/* * Blog Header Block - Final Gap & Scrollbar Fix */

/* ============================================================
   1. GLOBAL PAGE SAFETY
   ============================================================ */
body.single-post {
    /* overflow-x:clip instead of hidden — clip stops horizontal scrollbar without
       creating a Block Formatting Context. A BFC on body breaks position:fixed,
       causing fixed elements (sticky share bar) to scroll with the page. */
    overflow-x: clip !important;
    width: 100% !important;
}

/* ============================================================
   2. COMPONENT RESET
   ============================================================ */
.blog-header-block {
    width: 100%;
    position: relative;
    /* No z-index here. Adding one creates a stacking context that traps the
       fixed sticky-share-bar inside it — its z-index:999 then only competes
       within this context (effective root z-index:auto) rather than globally,
       letting timeline nodes (z-index:30 at root) paint above it. Without a
       z-index, the fixed bar's 999 competes at root level and wins correctly. */
    background: transparent !important;
    background-color: transparent !important;
    
    /* Pull up to meet header */
    margin-top: -2px !important; 
    padding-top: 140px; 
    
    /* Reset margins that were causing the gap */
    margin-bottom: 0 !important;
    
    /* Remove overflow rules that cause internal scrollbars */
    box-sizing: border-box;
    
    /* Force Text White */
    color: var(--nebula-white, #FFFFFF) !important;
}

/* Force text colors */
.blog-header-block h1, 
.blog-header-block a,
.post-author__name,
.post-meta-details {
    color: var(--nebula-white, #FFFFFF) !important;
}

/* ============================================================
   3. BACKGROUNDS & IMAGES
   ============================================================ */
/* THE BLUE BACKGROUND LAYER — full viewport width
   Uses left:50%/margin-left:-50vw trick so the colour panel bleeds edge-to-edge
   regardless of any parent container max-width. The section stays page-width;
   only this background layer breaks out. */
.hero-bg-panel {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: var(--nebula-blue, #313A4C);
    z-index: 0;
    overflow: hidden; /* Ensures pattern never bleeds out of the blue panel */
}

/* The SVG Pattern Layer */
.hero-bg-panel .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center top; 
    background-size: auto 100%; /* Height 100%, width auto scaling (crops L/R) */
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Ensure the progress bar is painted above the pattern */
.hero-bg-panel .scroll-progress-bar {
    z-index: 3;
}

/* Kill global theme interference (Strips out unwanted opacity layers/overlays) */
.blog-header-block .hero-bg::before,
.blog-header-block .hero-bg::after,
.blog-header-block::before,
.blog-header-block::after,
.hero-bg-panel::before,
.hero-bg-panel::after,
.hero-bg-panel.section--secondary::before,
.hero-bg-panel.section--secondary::after,
.section--hero::before,
.section--hero::after { 
    display: none !important; 
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ============================================================
   5. LAYOUT WRAPPERS
   ============================================================ */
.hero__wrap { position: relative; z-index: 10; width: 100%; box-sizing: border-box; }
.hero__inner { max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }


/* ============================================================
   6. MOBILE & TABLET LAYOUT (0px to 1025px)
   ============================================================ */
@media (max-width: 1025px) {
    .blog-header-block {
        padding-top: 120px;
        /* Mobile: Blue bg stops 20vw from the bottom of the container */
        --blue-bottom-stop: 20vw; 
    }
    
    .hero__inner { padding: 0 20px; }

    /* BLUE BACKGROUND LOGIC */
    .hero-bg-panel {
        /* This creates the visual split. The blue stops, but content continues. */
        height: auto;
        bottom: var(--blue-bottom-stop); 
    }

    /* Stack Content */
    .blog-hero-layout {
        display: block !important;
        width: 100% !important;
    }

    .hero__content {
        width: 100% !important;
        max-width: 100% !important;
        /* Space between text and image */
        padding-bottom: 40px !important; 
        position: relative;
        z-index: 20;
    }

    /* IMAGE: Natural Flow (No negative margins) */
    .hero__image {
        display: block !important;
        width: 80% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Just a small buffer for the shadow at the bottom */
        margin-bottom: 30px !important; 
        margin-top: 0 !important;
        position: relative;
        z-index: 30;
    }
    
    .hero__image img {
        /* Tamer shadow for mobile to prevent overflow */
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    }

    /* Adjust padding on sticky bar for small screens */
    .sticky-share-bar__inner {
        padding: 0 20px;
    }
}

/* ============================================================
   7. DESKTOP LAYOUT (1026px+)
   ============================================================ */
@media (min-width: 1026px) {
    .blog-header-block {
        padding-top: 180px; 
        padding-bottom: 0 !important;
        /* Desktop: Fixed overhang calculation */
        --desktop-overhang: 150px;
        margin-bottom: 120px !important; /* Space for the overhang */
    }

    /* Desktop Blue Bg Logic */
    .hero-bg-panel {
        height: calc(100% - var(--desktop-overhang));
        bottom: auto; /* Reset mobile property */
    }

    .blog-hero-layout {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-end;
        gap: 60px;
        min-height: 450px;
    }

    .hero__content {
        flex: 1;
        max-width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* Ensure text is above the blue cut-off */
        padding-bottom: calc(var(--desktop-overhang) + 50px);
        position: relative;
        z-index: 20;
    }

    .hero__image {
        flex: 0 0 45%;
        max-width: 45%;
        margin: 0 !important;
        /* Physical Overhang using negative margin on Desktop ONLY */
        margin-bottom: -160px !important;
        position: relative;
        z-index: 30;
    }
    
    .hero__image img {
        box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    }
}

/* ============================================================
   8. GLOBAL STYLES
   ============================================================ */
.hero__image img {
    border-radius: 24px;
    width: 100% !important;
    height: auto !important;
    display: block;
    background-color: #333;
}

.blog-header-block h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0 !important;
    margin-bottom: 30px;
    margin-left: 0;
    padding-left: 0;
    word-wrap: break-word; 
}

.post-author__inner { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.post-author__name { font-size: 1.1rem; font-weight: 600; }
.post-meta-details { font-size: 0.9rem; opacity: 0.8; margin-top: 4px; }
.meta-separator { margin: 0 8px; }
.post-author__avatar img { width: 55px; height: 55px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.2); }

/* Icons */
.static-social-row { display: flex; align-items: center; margin-top: 10px; margin-bottom: 0; position: relative; z-index: 30; }
.social-label { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); margin-right: 15px; }
.social-icons { display: flex; gap: 12px; flex-wrap: wrap; }
.social-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; transition: all 0.2s ease; text-decoration: none; line-height: 0; }
.social-link svg { display: block; fill: currentColor; overflow: visible; height: 20px; width: auto; }
.social-link:hover { background-color: var(--primary) !important; color: var(--nebula-blue, #313A4C) !important; transform: translateY(-2px); }

/* Progress Bar */
.scroll-progress-bar.static-progress { position: absolute; bottom: 0; left: 0; height: 4px; background-color: var(--primary); width: 0%; z-index: 10; transition: width 0.1s linear; }
.scroll-progress-bar.sticky-progress { position: absolute; bottom: 0; left: 0; height: 4px; background-color: var(--primary); width: 0%; transition: width 0.1s linear; }
#sticky-trigger { position: absolute; bottom: 100px; left: 0; width: 100%; height: 1px; pointer-events: none; }

@media (max-width: 480px) {
    .social-label, .share-label { display: none; }
    .social-link { width: 40px; height: 40px; }
    .sticky-share-bar__logo img { height: 30px; }
}