/* ============================================================
   BTE HERO — Full-bleed background photo
   Photo covers the entire section; content sits in the lower-left
   over a dark gradient that's strongest at the bottom of the slide.
   ============================================================ */

/* ---- Section ---- */
.bte-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--bte-navy-hex);
}

/* ---- Track ---- */
.bte-hero__track {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ---- Slide — absolutely positioned panels ---- */
.bte-hero__slide {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.0s var(--ease-out), visibility 1.0s;
    will-change: opacity;
    z-index: 0;
}

.bte-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    /* position stays absolute — never relative, which breaks stacking */
}

/* Content panel — overlays the photo, bottom-left aligned */
.bte-hero__left {
    position: absolute !important;
    inset: 0;
    z-index: 3 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Photo — fills the entire slide */
.bte-hero__right {
    position: absolute !important;
    inset: 0;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* ---- Mobile ---- */
@media (max-width: 1023px) {
    .bte-hero__slide.is-active {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================================
   CONTENT PANEL (overlay)
   ============================================================ */

/* Bottom gradient — darkest at the very bottom, fading upward
   so the photo reads clearly behind the nav/top of the slide */
.bte-hero__left::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to top,
        rgba(7, 9, 58, 0.92) 0%,
        rgba(7, 9, 58, 0.65) 35%,
        rgba(7, 9, 58, 0.15) 65%,
        rgba(7, 9, 58, 0) 100%
    );
    pointer-events: none;
}

/* Content area — bottom of the overlay */
.bte-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--gutter);
    padding-top: calc( var(--bte-header-h, 100px) + var(--space-20) );
    padding-bottom: clamp( var(--space-16), 8vh, var(--space-24) );
    max-width: 92rem;  /* wider still — was 75rem, heading was wrapping too early */
}

/* 2026-07-23 — Inner-page heroes (Careers, Depots, Giving Back — any
   hero.php instance that isn't the homepage) inherited the homepage hero's
   bottom-aligned content, which sat the title + copy low on the banner.
   Lift them to a higher, vertically-centred position with balanced padding.
   Keyed off .bte-hero--inner (added server-side when !is_front_page), so it
   applies regardless of how many slides the block has. The homepage hero
   keeps its original bottom alignment. */
.bte-hero--inner .bte-hero__left {
    /* Bottom-anchored (same as the homepage hero) but lifted off the very
       bottom by the tall bottom padding below, so the title sits in the
       mid-lower area — the position Brands was signed off at. The 44vh
       fixed-anchor experiment sat everything too high; reverted here.
       Single knob to move all inner heroes up/down: the 13vh below. */
    justify-content: flex-end;
}
.bte-hero--inner .bte-hero__content {
    padding-top: calc( var(--bte-header-h, 100px) + var(--space-16) );
    padding-bottom: clamp( var(--space-24), 13vh, var(--space-32) );
}

/* ---- Heading ---- */
.bte-hero__heading {
    font-family: var(--font-display);
    font-size: clamp( 2.1rem, 6vw, 6.5rem );
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--bte-white);
    display: flex;
    flex-direction: column;
    gap: 0.04em;
    text-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* Hero description / tagline — shown below heading */
.bte-hero__desc {
    font-size: clamp( 1rem, 1.4vw, 1.25rem );
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0;
}

/* Each line clipped for slide-up reveal */
.bte-hero__heading-line {
    display: block;
    overflow-x: visible;
    overflow-y: hidden;
}

/* ---- Scroll-linked word highlight ----
   Words start dim and progressively turn red as the user scrolls
   through the hero (see bte-hero.js — GSAP ScrollTrigger scrub,
   staggered per word). If GSAP/ScrollTrigger aren't available for
   some reason, the JS itself removes this dimming immediately as a
   fallback (see initScrollHighlight in bte-hero.js) rather than
   leaving words stuck dim with no way to un-dim them. */
.bte-hero__heading-word {
    color: rgba(255, 255, 255, 1);
    transition: color 0.3s var(--ease-out);
}

/* ---- Line entrance animation ---- */
.bte-hero__slide.is-active .bte-hero__heading-line {
    animation: bte-line-up 0.85s var(--ease-out) both;
}

.bte-hero__slide.is-active .bte-hero__heading-line:nth-child(1) { animation-delay: 0.05s; }
.bte-hero__slide.is-active .bte-hero__heading-line:nth-child(2) { animation-delay: 0.18s; }
.bte-hero__slide.is-active .bte-hero__heading-line:nth-child(3) { animation-delay: 0.30s; }
.bte-hero__slide.is-active .bte-hero__heading-line:nth-child(4) { animation-delay: 0.42s; }

@keyframes bte-line-up {
    from {
        opacity: 0;
        transform: translateY(65%);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 -5% 0);
    }
}

/* ---- CTAs ---- */
.bte-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out) 0.45s, transform 0.6s var(--ease-out) 0.45s;
}

.bte-hero__slide.is-active .bte-hero__ctas {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Tagline ---- */
/* ============================================================
   RIGHT PANEL — tagline + vertical slide nav
   ============================================================ */

.bte-hero__right-panel {
    position: absolute;
    right: var(--space-10);
    bottom: var(--space-16);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-8);
}

/* ---- Vertical slide nav — each item is now a single row: the line
   indicator plus that slide's own tagline text together, so all
   three read as one continuous set of lines rather than two
   separate stacks (nav lines above, tagline bars below) that used
   to sit near each other without actually joining up. ---- */
.bte-hero__slide-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-end;
}

.bte-hero__slide-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: right;
    flex-direction: row-reverse; /* line on right, tagline on left */
    max-width: none;             /* was 260px — allow full one-line tagline */
    opacity: 0.45;
    transition: opacity 0.4s var(--ease-out);
}

.bte-hero__slide-nav-item.is-active {
    opacity: 1;
}

.bte-hero__slide-nav-tagline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    max-width: none;        /* was 22ch — let the tagline size to its text */
    white-space: nowrap;    /* keep "Powered By World-Class Brands" on one line */
    text-align: right;
}

/* Vertical line segment */
.bte-hero__slide-nav-line {
    display: block;
    width: 3px;
    min-height: 52px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Active fill — animates downward like progress */
.bte-hero__slide-nav-fill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background-color: var(--bte-red);
    border-radius: 2px;
    transition: height 0.3s var(--ease-out);
}

/* Active item — fill animates via JS */
.bte-hero__slide-nav-item.is-active .bte-hero__slide-nav-line {
    background-color: rgba(255,255,255,0.25);
}

.bte-hero__slide-nav-item.is-active .bte-hero__slide-nav-fill {
    /* JS drives the fill height from 0→100% over SLIDE_DURATION */
}

/* Inactive items that have already been shown */
.bte-hero__slide-nav-item.was-active .bte-hero__slide-nav-fill {
    height: 100%;
    background-color: rgba(255,255,255,0.4);
}

@media (max-width: 1023px) {
    .bte-hero__right-panel {
        right: var(--space-5);
        bottom: var(--space-20);
        gap: var(--space-5);
    }
    .bte-hero__slide-nav-tagline {
        display: none; /* hidden on mobile — not enough space */
    }
    .bte-hero__slide-nav-line {
        height: 32px;
    }
}

/* ============================================================
   PHOTO — full-bleed background
   ============================================================ */

.bte-hero__photo {
    /* 2026-07-15 — base/default sizing (parallax OFF — either this
       slide's "Disable Parallax" checkbox is ticked, so its <img>
       carries no data-edae-parallax attribute, or JS/GSAP isn't
       available; also applies as-is to the <video> variant, which
       never carries the attribute at all). Plain, non-oversized
       framing — the buffer needed for the scroll shift lives in the
       [data-edae-parallax] rule below and only applies when that
       attribute is present. Fixes a bug where disabling parallax
       stopped the movement but left the extra crop from the
       (previously unconditional) oversize behind. */
    position: absolute;
    inset: 0;
    width:  100%;
    height: 100%;
    object-fit:      cover;
    object-position: center 35%;
    will-change:     transform;
}

.bte-hero__photo[data-edae-parallax] {
    /* Oversized 25% top/bottom so the stronger 0.3 parallax speed has
       room to shift without revealing a gap (.bte-hero__right has
       overflow:hidden). */
    top: -25%;
    bottom: -25%;
    height: 150%;
}

/* Mask not needed — full-bleed photo, gradient handles contrast */
.bte-hero__right-mask {
    display: none;
}

/* Old .bte-hero__dots replaced by .bte-hero__slide-nav above */
.bte-hero__dots { display: none; }

/* ============================================================
   PROGRESS BAR + SCROLL
   ============================================================ */

.bte-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgba(255,255,255,0.1);
    z-index: 10;
}

.bte-progress-bar__fill {
    height: 100%;
    background-color: var(--bte-red);
    width: 0%;
}

.bte-hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ============================================================
   MOBILE LAYOUT
   ============================================================ */

@media (max-width: 1023px) {
    .bte-hero__content {
        padding-top: var(--space-8);
        padding-bottom: var(--space-16);
        max-width: 100%;
    }

    /* 2026-07-24 — inner-page heroes: lift title/copy clear of the fixed
       scroll cue + action bar (homepage hero keeps its own bigger pad
       below for the loading bar). */
    .bte-hero--inner .bte-hero__content {
        padding-bottom: clamp(150px, 20vh, 200px);
    }

    .bte-hero__heading {
        font-size: clamp( 2.2rem, 10vw, 3.5rem );
    }

    /* tagline hidden on mobile via right-panel responsive rules */
}

/* ============================================================
   PHONE HERO FIT (2026-07-21) — reported: the CTA buttons bleed off
   the bottom of the screen on phones. Cause: the hero track is sized
   with 100vh, but on mobile 100vh is the LARGE viewport (address bar
   hidden), which is taller than the actually-visible area — so the
   bottom-aligned content sat partly behind the browser UI / off the
   bottom edge. Switch to 100svh (small viewport height = always the
   visible area) so the hero fits the visible screen, and lift the
   content block up off the very bottom so the buttons clear the
   slider progress bar, the SCROLL cue and the browser chrome.
   ============================================================ */
@media (max-width: 767px) {
    .bte-hero,
    .bte-hero__track,
    .bte-hero__slide {
        min-height: 100svh;
    }
    .bte-hero__content {
        /* extra bottom room for the horizontal slider bar + scroll cue */
        padding-bottom: clamp( 168px, 30vh, 220px );
        gap: var(--space-5);
    }

    /* 2026-07-24 — move the tagline down to sit just above the loading
       bar (client: easier to see). Pulled out of the content flow and
       pinned near the bottom; the content box bottom-aligns to the slide
       (justify-content:flex-end) so bottom:140px lands just above the
       progress bar at 128px. */
    .bte-hero__desc {
        position: absolute;
        left: var(--gutter);
        right: var(--gutter);
        bottom: 140px;
        max-width: none;
        margin: 0;
    }

    /* 2026-07-21 — "red lines on the right need to be at the bottom".
       Hide the vertical right-side slide-nav lines and instead show the
       horizontal progress bar (already JS-driven by width, kept for
       exactly this) as a bottom slider indicator, matching the design. */
    .bte-hero__right-panel { display: none; }
    .bte-progress-bar {
        display: block !important;
        top: auto;
        bottom: 128px;
        left: var(--gutter);
        right: var(--gutter);
        height: 3px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0.18);
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .bte-hero__slide          { transition: opacity 0.3s; }
    .bte-hero__heading-line   { animation: none; opacity: 1; transform: none; clip-path: none; }
    .bte-hero__ctas,
    .bte-hero__slide-nav-item { opacity: 1; transform: none; transition: none; }
    .bte-hero__slide-nav-fill  { transition: none; }
}