/* ========================================================================
 ! WARRANTEED COMPONENT: THE FOUR PILLARS CORE INFRASTRUCTURE
 ! Developed/Tested: June 2026 // Target Viewport: Unified Cross-Device
 ======================================================================== */

/* --- 1. GLOBAL CONTAINER BASELINE --- */
.registry-section {
    padding: 100px 0; 
    background: #fdfdfe; 
    text-align: center; 
    width: 100vw; 
    position: relative; 
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.registry-container {
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 50px; 
    box-sizing: border-box;
}

.registry-header-group {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 60px;
}

.registry-section-badge {
    background: #eef2ff; 
    color: #4f46e5; 
    border: 1px solid #c7d2fe; 
    padding: 4px 12px; 
    border-radius: 4px; 
    font-family: 'Space Mono', monospace; 
    font-size: 0.65rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 2px;
}

.registry-main-title {
    font-family: 'JetBrains Mono', monospace; 
    font-size: 3.5rem; 
    margin: 20px 0 10px; 
    color: #0f172a; 
    letter-spacing: -2px; 
    line-height: 1.1;
}

.registry-main-title .accent-indigo { color: #4f46e5; }

/* --- 2. THE MULTI-COLUMN PILLAR GRID RUNAWAY (DESKTOP) --- */
.pillars-grid {
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
    gap: 20px; 
    margin-top: 60px; 
    text-align: left;
    box-sizing: border-box;
}

.pillar-card {
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%); 
    border: 1px solid #e2e8f0; 
    border-radius: 12px 12px 4px 4px; 
    padding: 40px 25px 30px; 
    min-height: 380px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    
    /* Hardware accelerated hover tracking transitions */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
}

/* Individual Top Accent Border Weights */
.pillar-indigo  { border-top: 4px solid #6366f1; }
.pillar-blue    { border-top: 4px solid #4f46e5; }
.pillar-cyan    { border-top: 4px solid #06b6d4; }
.pillar-green   { border-top: 4px solid #10b981; }

.pillar-card-content {
    width: 100%;
}

.pillar-meta-tag {
    font-family: 'Space Mono', monospace; 
    font-size: 0.7rem; 
    font-weight: bold; 
    margin-bottom: 20px; 
    letter-spacing: 1px;
}
.pillar-indigo .pillar-meta-tag  { color: #6366f1; }
.pillar-blue .pillar-meta-tag    { color: #4f46e5; }
.pillar-cyan .pillar-meta-tag    { color: #06b6d4; }
.pillar-green .pillar-meta-tag   { color: #10b981; }

.pillar-emoji {
    font-size: 1.5rem; 
    margin-bottom: 15px;
}

.pillar-title {
    font-family: 'JetBrains Mono', monospace; 
    font-size: 1.15rem; 
    margin: 0 0 15px 0; 
    color: #0f172a; 
    letter-spacing: -0.5px;
}

.pillar-description {
    color: #64748b; 
    font-size: 0.85rem; 
    line-height: 1.6; 
    margin: 0;
}
.pillar-description .dark-emphasis { color: #0f172a; }

.pillar-footer-bar {
    height: 4px; 
    background: #cbd5e1; 
    margin-top: 30px; 
    border-radius: 2px;
}

/* --- PURE CSS HOVER ENGINE --- */
.pillar-card:hover {
    transform: translateY(-8px);
}
.pillar-indigo:hover { 
    border-color: #6366f1; 
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.15); 
}
.pillar-blue:hover { 
    border-color: #4f46e5; 
    box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.15); 
}
.pillar-cyan:hover { 
    border-color: #06b6d4; 
    box-shadow: 0 20px 25px -5px rgba(6, 182, 212, 0.15); 
}
.pillar-green:hover { 
    border-color: #10b981; 
    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.15); 
}

/* Foundation grounding rail decoration */
.registry-foundation-rail {
    width: 100%; 
    height: 12px; 
    background: #0f172a; 
    border-radius: 4px; 
    margin-top: 4px; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}


/* ========================================================================
 ! --- 3. MOBILE ARCHITECTURE (Screens under 1024px / 768px wide) ---
 ======================================================================== */
@media (max-width: 1024px) {
    .pillars-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Converts to an optimized 2x2 layout matrix on tablets */
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .registry-section {
        padding: 60px 0 !important;
    }

    .registry-container {
        padding: 0 20px !important;
    }

    .registry-main-title {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
    }

    /* Convert grid layout to a single stacked row lane on smartphones */
    .pillars-grid {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 40px !important;
        gap: 16px !important;
    }

    .pillar-card {
        width: 100% !important;
        min-height: auto !important; /* Frees container from locking structural sizes */
        padding: 30px 20px 20px !important;
    }

    .pillar-emoji {
        margin-bottom: 10px !important;
    }

    .pillar-title {
        font-size: 1.05rem !important;
        margin-bottom: 10px !important;
    }

    .pillar-footer-bar {
        margin-top: 20px !important;
    }

    /* Soften mobile scaling gestures for comfort */
    .pillar-card:hover {
        transform: translateY(-4px) !important;
    }
}