/*
  =============================================
  VinciBridge v2 - W Folderze Component Styles
  Created for section #w-folderze.
  (Add your unique element styles here)
  =============================================
*/

/* Base container reset and setup */
#w-folderze {
    background-color: #0f1726; /* Slate-900 or similar dark backdrop */
    color: #e2e8f0;       /* Light slate text */
    padding: 8rem 0;
}

/* Section Header Style (Large, impactful) */
.w-section-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 1rem;
}

.w-section-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font sizing */
    letter-spacing: -0.03em;
    color: #6ee7b3; /* A lighter green/teal for the main title highlight */
}

/* --- Component Styling: Technical Pillar Grid (The 'Wow' Factor) --- */

.w-pillar-grid {
    display: grid;
    /* Default to 2 columns on medium screens, up to 3 on large */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    padding: 0 2rem;
}

.w-pillar-card {
    position: relative;
    background-color: #1e293b; /* Slightly lighter dark background for contrast */
    border: 1px solid rgba(55, 65, 81, 0.5); /* Subtle border for definition */
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* Hover Effect: Simulate energy or active connection lines */
.w-pillar-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #059669; /* Emerald accent on hover */
    box-shadow: 0 15px 30px rgba(5, 150, 105, 0.2);
}

/* Background Image Masking/Overlay (Used for the pillar visuals) */
.w-pillar-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1; /* Subtle background visual presence */
    z-index: 1;
    pointer-events: none;
}

.w-pillar-content {
    position: relative;
    z-index: 2; /* Ensure text is above the image mask */
}

/* --- Responsiveness/Refinement (Based on breakpoints) --- */
@media (max-width: 768px) {
    .w-pillar-grid {
        gap: 2rem;
        padding: 0 1rem;
    }
    .w-pillar-card {
        padding: 1.5rem;
    }
}