/* ==========================================================================
   CONTAINER & GRID ARCHITECTURE
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--grid-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.section-padding {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-7 { grid-column: span 7; }
.col-span-6 { grid-column: span 6; }
.col-span-5 { grid-column: span 5; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }
.col-span-2 { grid-column: span 2; }

.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

@media (max-width: 1200px) {
    .section-padding {
        padding-top: var(--section-padding-laptop);
        padding-bottom: var(--section-padding-laptop);
    }
}

@media (max-width: 992px) {
    .grid-12 {
        grid-template-columns: repeat(6, 1fr);
    }
    .col-span-4 { grid-column: span 6; }
    .col-span-3 { grid-column: span 3; }
    
    .section-padding {
        padding-top: var(--section-padding-tablet);
        padding-bottom: var(--section-padding-tablet);
    }
}

@media (max-width: 768px) {
    .grid-12 {
        grid-template-columns: 1fr;
    }
    .col-span-12, .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4, .col-span-3, .col-span-2 {
        grid-column: span 1;
    }
    .section-padding {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}

/* ==========================================================================
   HERO ARCHITECTURE (STRICT TIER SYSTEM)
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 96px; 
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 64px 0;
}

/* Tier 1: The Index / Primary Architecture (Deep 60vh Matrix) */
.hero-architecture {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary-blue);
    min-height: 60vh; 
    display: flex;
    align-items: center;
    padding: 120px 0;
}

.hero-matrix-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1; /* Retains full visibility for the dark matrix */
    z-index: 1;
    filter: grayscale(100%); 
}

/* Dedicated, high-contrast gradient mask specifically for the homepage dark matrix */
.hero-architecture-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(27, 58, 107, 0.5) 0%, rgba(27, 58, 107, 0.95) 100%);
    z-index: 2;
}

/* Tier 2: Standard Interior Data Pages (Solid Blue, 40vh) */
.hero-interior {
    min-height: 40vh; 
    background-color: var(--color-primary-blue);
    color: var(--color-pure-white);
    display: flex;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 48px; /* Restored breathing room */
    margin-bottom: 0;
}

/* Tier 2: Visual Interior (Menu Pages with Cropped Assets, Strict 40vh Uniformity) */
.hero-interior-visual {
    position: relative;
    min-height: 40vh; 
    /* CRITICAL ARCHITECTURAL FIX: max-height removed entirely to prevent typographic decapitation. */
    display: flex;
    align-items: center;
    padding-top: 96px; 
    padding-bottom: 48px;
    overflow: hidden;
    background-color: var(--color-primary-blue);
    margin-bottom: 0;
}

.hero-bg-crop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 1; 
    z-index: 1;
}

/* Calibrated gradient mask for menu pages (allows crisp image details to punch through cleanly) */
.hero-interior-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 30, 55, 0.4) 0%, rgba(15, 30, 55, 0.88) 100%);
    z-index: 2;
}

.hero-content-layer {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* ==========================================================================
   CONTEXTUAL TYPOGRAPHY & GEOMETRY SCALING (TIER 2 COMPRESSION)
   ========================================================================== */

/* Radically compress the dead space inside 40vh blocks */
.hero-interior .hero-content,
.hero-interior-visual .hero-content {
    padding: 24px 0 !important; /* Forces 80px of reclaimed vertical space */
}

/* Fluid Typography: Dynamically scales between 32px and 56px based on viewport */
.hero-interior h1,
.hero-interior-visual h1 {
    font-size: clamp(32px, 4vw, var(--text-h3)) !important; 
    margin-bottom: 12px !important; /* Compressed from 24px */
    line-height: 1.15 !important;
}

/* Neutralize inline paragraph bloating */
.hero-interior p,
.hero-interior-visual p {
    font-size: var(--text-body) !important; /* Strips large sizes */
    margin-bottom: 24px !important; /* Strips the 40px inline margin */
    line-height: 1.5 !important;
}

/* Compress Eyebrow spacing */
.hero-interior .eyebrow,
.hero-interior-visual .eyebrow {
    margin-bottom: 8px !important;
}

/* ==========================================================================
   UTILITY & IMAGE CLASSES
   ========================================================================== */

/* Tier 3: Error / Utility & Legal Pages (Compressed by 50%) */
.hero-utility {
    min-height: 25vh; 
    background-color: var(--color-warm-ivory);
    padding-top: 48px;
    padding-bottom: 48px;
    display: flex;
    align-items: center;
}

/* Image Utilities */
.img-structural {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--color-warm-ivory);
    border: 1px solid var(--color-navy-60);
    filter: grayscale(100%) contrast(1.15); 
    transition: filter var(--transition-duration) var(--ease-out);
    object-fit: cover;
}

.img-structural:hover {
    filter: grayscale(30%) contrast(1.1);
}