/* =====================================================
   HERO CORNER LAYOUT (Updated v2 - Fixed Bottom Text)
   ===================================================== */
   
/* --- 1. TYPOGRAPHY LOGIC --- */

/* A. H1 (Main Hero Title) */
.hero-item-top h1,
.hero-item-top .wpex-heading {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h1-size) !important; 
    line-height: var(--sys-h1-lh) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* B. H2 (Secondary Title) */
.hero-item-top h2 {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h2-size) !important; 
    line-height: var(--sys-h2-lh) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* C. Fallback */
.hero-item-top p,
.hero-item-top div:not(.wpex-heading) {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h1-size) !important; 
    line-height: var(--sys-h1-lh) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* D. Italic Exception */
.hero-item-top .special-font {
    font-family: 'PP Editorial New', serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: inherit !important; 
}

/* E. Body Text (Bottom White Box) */
.hero-item-bottom p {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-font-size) !important;
    line-height: var(--sys-line-height) !important;
    font-weight: 400 !important;
    margin-bottom: var(--sys-gutter) !important;
}

/* --- 2. DESKTOP & TABLET (768px+) --- */
@media screen and (min-width: 768px) {
    .hero-calc-height.layout-mode-right, .hero-calc-height.layout-mode-left { position: relative !important; z-index: 1; }
    .hero-calc-height.layout-mode-right .vc_column_container, .hero-calc-height.layout-mode-left .vc_column_container, .hero-calc-height.layout-mode-right .vc_column-inner, .hero-calc-height.layout-mode-left .vc_column-inner, .hero-calc-height.layout-mode-right .wpb_wrapper, .hero-calc-height.layout-mode-left .wpb_wrapper { position: static !important; display: block !important; height: auto !important; padding: 0 !important; margin: 0 !important; }

    /* Top Text */
    .hero-calc-height .hero-item-top {
        position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 10;
        padding-top: var(--hero-top-offset) !important; 
        padding-left: var(--sys-margin) !important;
        padding-right: var(--sys-margin) !important;
        padding-bottom: 0 !important; margin: 0 !important;
    }

    /* Bottom White Box */
    .hero-calc-height .hero-item-bottom {
        position: absolute !important; bottom: 0 !important; z-index: 10; width: 50% !important;
        box-sizing: border-box !important; margin: 0 !important;
        
        padding-top: var(--hero-box-py) !important;     
        padding-bottom: var(--hero-box-py) !important;  
        padding-left: var(--sys-margin) !important;     
        padding-right: var(--sys-margin) !important;    
    }

    /* RIGHT MODE (Standard): Text Left, Box Right */
    .layout-mode-right .hero-item-top { text-align: left !important; }
    .layout-mode-right .hero-item-top > * { text-align: left !important; margin-right: auto !important; margin-left: 0 !important; }
    .layout-mode-right .hero-item-bottom { right: 0; left: auto; }

    /* LEFT MODE (Mirror): Text Right, Box Left */
    .layout-mode-left .hero-item-top { text-align: right !important; }
    .layout-mode-left .hero-item-top > * { text-align: right !important; margin-left: auto !important; margin-right: 0 !important; }
    .layout-mode-left .hero-item-bottom { left: 0; right: auto; }
}

/* --- 3. XL SCREENS (1440px+) - BOXED FIX --- */
@media screen and (min-width: 1440px) {
    /* Top Text */
    .layout-mode-right .hero-item-top { padding-left: calc(var(--boxed-offset) + var(--sys-margin)) !important; padding-right: var(--sys-margin) !important; }
    .layout-mode-left .hero-item-top { padding-right: calc(var(--boxed-offset) + var(--sys-margin)) !important; padding-left: var(--sys-margin) !important; }
    
    /* Bottom White Box */
    .layout-mode-right .hero-item-bottom { padding-right: calc(var(--boxed-offset) + var(--sys-margin)) !important; padding-left: var(--sys-margin) !important; }
    .layout-mode-left .hero-item-bottom { padding-left: calc(var(--boxed-offset) + var(--sys-margin)) !important; padding-right: var(--sys-margin) !important; }
}

/* --- 4. MOBILE (0-767px) - STACKED LAYOUT (No Overlap) --- */
@media screen and (max-width: 767px) {
    .hero-calc-height { 
        position: relative !important; 
        min-height: auto !important; /* Allow natural height */
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-calc-height .vc_column_container, 
    .hero-calc-height .vc_column-inner, 
    .hero-calc-height .wpb_wrapper { 
        position: static !important; 
        display: block !important; 
        height: auto !important; 
        padding: 0 !important; 
        margin: 0 !important; 
    }

    /* Top Section: Full Screen Height */
    .hero-item-top {
        position: relative !important; 
        z-index: 1;
        min-height: calc(100vh - 76px) !important; 
        min-height: calc(100svh - 76px) !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        
        padding-top: var(--hero-top-offset) !important; 
        padding-left: var(--sys-margin) !important; 
        padding-right: var(--sys-margin) !important;
        padding-bottom: var(--hero-top-offset) !important; /* Normal bottom spacing */
    }
    
    /* Text-only variant (no white box below) */
    .hero-text-only .hero-item-top {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important; 
    }
    
    /* Bottom White Box: Positioned AFTER top section, not overlapping */
    .hero-item-bottom {
        position: relative !important; /* Changed from absolute */
        z-index: 10;
        width: 100vw !important; 
        left: 50% !important; 
        right: 50% !important; 
        margin-left: -50vw !important; 
        margin-right: -50vw !important;
        border-radius: 0 !important; 
        background: #ffffff;
        
        padding-top: 40px !important;       
        padding-bottom: 60px !important;    
        padding-left: 24px !important;      
        padding-right: 24px !important;     
    }

    /* Transparent bottom text variant */
    .hero-item-bottom-transparent {
        position: absolute !important;
        bottom: 0 !important;
        padding-right: 24px !important;
        padding-bottom: 40px !important;
        width: 100% !important;
    }
}

/* =====================================================
   HERO VARIANT: TRANSPARENT BOTTOM TEXT 
   (Updated to use Absolute Positioning for Safety)
   ===================================================== */

/* 1. Base Styles (All Screens) */
/* We use absolute positioning to guarantee it hits the bottom */
.hero-item-bottom-transparent {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 10;
    
    /* Reset others */
    top: auto !important; left: auto !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: right !important;
    
    /* BASE SPACING (Mobile & Tablet) */
    padding-bottom: 40px !important; 
    padding-right: var(--sys-margin) !important;
    padding-left: 0 !important;
}

/* 2. Desktop (LG) - 1024px to 1439px */
@media screen and (min-width: 1024px) {
    .hero-item-bottom-transparent {
        padding-bottom: 80px !important;
    }
}

/* 3. Extra Large (XL) - 1440px+ */
@media screen and (min-width: 1440px) {
    .hero-item-bottom-transparent {
        padding-bottom: 120px !important;
        
        /* If using Boxed Layout, align with the grid line */
        padding-right: calc(var(--boxed-offset) + var(--sys-margin)) !important;
    }
}