/* ============================================================
   BTE ABOUT / 35 YEARS SECTION
   ============================================================ */

/* ---- Section ---- */
.bte-about {
    position: relative;
    min-height: 100vh;
    /* Transparent — was opaque, which sat above the fixed background
       in the stacking order and blocked it entirely, regardless of
       .bte-about__content's own gradient fading to transparent. Same
       class of bug found and fixed on Aftersales' parent sections. */
    background-color: transparent;
}

/* ---- Inner — mobile: simple stacked flow ---- */
.bte-about__inner {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* Desktop: NOT a grid split — the image is a full-bleed layer behind
   everything, and the blue content panel is a 50%-wide overlay on
   top of it. This is what makes "full image, then blue panel wipes
   over it" a real structural state rather than a faked one — with a
   grid split, the image was only ever 50% wide, even before any
   animation started. */
@media (min-width: 1024px) {
    .bte-about__inner {
        position: relative;
        display: block;

        /* Confirmed live: while this section is pinned (position:fixed
           via GSAP), the still-visible tail end of the Services
           section above it — which sits later in normal document flow
           but hasn't scrolled out of view yet — was rendering on TOP
           of it rather than underneath, for a real chunk of the
           transition between the two. GSAP's fixed positioning alone
           doesn't guarantee stacking order against normal-flow
           content; needs an explicit z-index to win reliably. A CSS
           rule here (rather than setting it via JS) also means it
           can't get quietly overwritten by GSAP's own inline-style
           updates on future scroll ticks. */
        z-index: 50;

        /* Added 2026-07-13 — a thin black line was reported across
           the top of the screen only while this section is actively
           pinned/animating, not while static. This element itself
           (the actual GSAP pin trigger/target) carries no background
           of its own — only its two absolutely-positioned children
           do (the full-bleed image layer and the blue content
           panel) — so any sub-pixel rounding gap during the
           scroll-linked pin exposes whatever sits behind it instead.
           GSAP's scrub re-positions a fixed/pinned element every
           scroll frame at fractional, rarely-whole-pixel offsets,
           which is a known source of hairline seams right at a
           pinned element's edge — exactly matching "only during
           animation, not static". Giving this element its own
           matching dark background (same navy as .bte-about__content
           below) means any such gap reveals dark navy rather than a
           stark line, blending into the section either way. */
        background-color: #07093a;
    }

    /* Height cap — 2026-07-13, replacing an earlier attempt that
       applied height:100vh unconditionally to .bte-about__inner at
       every desktop width. That was wrong: it also constrained the
       section's ordinary, NOT-pinned, normal-document-flow state
       (which is active essentially all the time — before scrolling
       reaches this section, and on any section with animation
       disabled) to exactly 100vh too, even though nothing forces it
       to be that short outside of the pin. Confirmed live: that
       showed up as an unwanted internal scrollbar on the static page,
       and a visible "jump" in the image/content the instant the pin
       actually engaged, because the box's real height changed
       abruptly right at that moment instead of already matching.
       Scoped to .bte-about--pinned instead — a class this section
       only carries for the exact duration GSAP has it genuinely
       fixed (added/removed via onEnter/onLeave/onEnterBack/
       onLeaveBack in bte-about.js, mirroring GSAP's own pin state
       precisely) — so the cap now only ever applies while pinned,
       matching what GSAP's pin-spacer actually reserves, and leaves
       the section free to be its natural, taller-than-100vh height
       the rest of the time, same as before this fix existed.

       2026-07-13, second pass — the `height: 100vh;` line that used
       to sit here was REMOVED. A CSS `transition` on it was tried
       first to smooth the snap, but confirmed live to make no visible
       difference at all: this box has no explicit `height` before the
       pin engages (it's sized by its content, i.e. `height: auto`),
       and CSS transitions cannot animate to/from `auto` — browsers
       just apply the end value instantly regardless of any
       `transition` rule, which is exactly the "still an instant hard
       snap" behaviour reported after that attempt. The height is now
       animated from JS instead (bte-about.js, inside setUp(), see
       clampInnerHeightToPin()/releaseInnerHeightFromPin()), using
       GSAP to tween an explicit inline `height` between a freshly
       measured natural pixel value and the live viewport height —
       both real numbers, not `auto`, so the tween genuinely
       interpolates frame by frame instead of snapping.
       overflow-y:hidden rather than auto — if content still doesn't
       fit in 100vh once genuinely pinned, it should never show a
       nested scrollbar on a marketing page; clipping the excess is
       the better failure mode. */
    .bte-about--pinned .bte-about__inner {
        overflow-y: hidden;
    }
}

/* ============================================================
   PINNED SCROLL SEQUENCE (see bte-about.js attemptPinSequence())

   .bte-about--pin-armed is added synchronously, immediately, as soon
   as JS confirms the sequence should run — well before GSAP itself
   may have actually finished loading (it can be delayed waiting on
   the animation engine's ready event). This is what establishes the
   pre-scroll starting look via plain CSS with no GSAP dependency at
   all: without it, the page would render in its plain, unmodified
   state first, then visibly "snap" into the correct starting
   position once gsap.set() finally ran. GSAP re-applies the exact
   same values as inline styles once it does load, purely so it has
   full control to animate away from them — the visual state itself
   never actually changes at that point, so there's nothing to snap.

   Scroll distance for the pin itself is NOT set here — GSAP creates
   its own spacer internally based on a relative `end` offset in the
   ScrollTrigger config (see bte-about.js), rather than us manually
   sizing a wrapper via CSS and hoping ScrollTrigger measures it at
   the right moment. That manual-height approach is what caused the
   pin to release early/inconsistently in earlier attempts.

   All of this only applies once .bte-about--pin-armed is present, so
   a section that never gets that far (GSAP missing, reduced-motion,
   mobile — see the guards in attemptPinSequence()) never carries any
   of this dead scroll space or hidden starting state.
   ============================================================ */

.bte-about__pin-wrap {
    position: relative;
}

@media (min-width: 1024px) {
    /* opacity, not transform — GSAP's xPercent/y layer additively on
       top of whatever transform a CSS class already applied, rather
       than replacing it. That's what was actually causing the blue
       panel to get stuck at -100% instead of reaching 0% (fully
       revealed): it started at CSS's -100% plus GSAP's own -100%
       stacked together (~-200%), and only ever animated the GSAP
       portion back to -100%, never actually reaching 0. Hiding via
       opacity here instead avoids any transform-property conflict —
       textBlock doesn't need its own armed rule at all, since it's a
       child of the blue panel and already hidden by this. */
    .bte-about--pin-armed .js-about-blue-panel {
        opacity: 0;
    }
    .bte-about--pin-armed .js-about-heading,
    .bte-about--pin-armed .js-about-heading-red {
        color: #ffffff;
    }
    .bte-about--pin-armed .js-about-reveal-slide {
        opacity: 1;
        clip-path: inset(100% 0 0 0);
    }
}

/* ============================================================
   LEFT PANEL — content
   ============================================================ */

.bte-about__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Mobile: dark navy fading to clear, unchanged from before —
       there's no image directly underneath to worry about hiding,
       since panels stack rather than overlap on smaller screens. */
    background: linear-gradient(
        to bottom,
        rgba(7, 9, 58, 0.8) 0%,
        rgba(7, 9, 58, 0.4) 55%,
        rgba(7, 9, 58, 0) 100%
    );
    padding-bottom: 0;
}

/* Desktop: overlay on top of the full-bleed image, so it needs to be
   properly opaque rather than fading to transparent — otherwise the
   image behind would show through the bottom of the panel. */
@media (min-width: 1024px) {
    .bte-about__content {
        position: absolute;
        inset: 0;
        width: 50%;
        z-index: 1;
        /* Triangle pattern added 2026-07-13 — this panel carries the
           .bte-hex-bg / .bte-section--hex classes (see
           bte_render_section_about() in the plugin), but that class
           pair no longer renders anything of its own (see
           .bte-hex-bg::before in main.css — "Hex pattern replaced by
           BTE background image on parent", now display:none); the
           pattern moved to the sitewide .bte-fixed-bg layer instead,
           which every other "hex" section shows through by using a
           transparent background of its own. That trick doesn't work
           here specifically, though: .bte-about__inner (this panel's
           parent) has its own solid opaque background-color
           (#07093a, added earlier to fix a rendering gap during the
           pinned scroll animation), which sits between this panel and
           that fixed layer and blocks it — making this panel
           transparent would only reveal that plain navy, not the
           pattern. Given its own independent copy of the exact same
           image + navy tint instead, rather than depending on
           transparency through an ancestor that specifically needs to
           stay opaque. */
        background-color: rgb(var(--bte-overlay-navy-rgb, 7, 9, 58));
        background-image:
            linear-gradient( rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), var(--bte-overlay-navy-opacity, 0.90)), rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), var(--bte-overlay-navy-opacity, 0.90)) ),
            var(--bte-overlay-bg-url, url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg'));
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Pic Left mirror — panel sits on the right instead, wiping in
       from that side (see xPercent:100 vs -100 in bte-about.js,
       chosen based on the .bte-about--pic-left class checked there). */
    .bte-about--pic-left .bte-about__content {
        left: auto;
        right: 0;
    }
}

.bte-about__content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: clamp(var(--space-12), 8vw, var(--space-20)) var(--gutter);
    position: relative;
    z-index: 1;
}

/* Desktop: this panel sits pinned at the very top of the viewport
   during the scroll sequence, with the sticky header (~140-150px)
   overlaid on top of it — the ordinary responsive top padding above
   isn't enough clearance, so the heading ends up sitting behind the
   header rather than below it. */
@media (min-width: 1024px) {
    .bte-about__content-inner {
        padding-top: 190px;
        /* 2026-07-15 — this panel is a full-bleed 50%-width overlay
           with no bte-container wrapping it (see .bte-about__content
           above), so on desktop its horizontal padding IS the only
           thing standing between the text and the true browser window
           edge — unlike most other sections, which also get a
           max-width container's own side margin for free. The base
           rule's var(--gutter) (caps at 3rem/48px) reads as too tight
           in that context; widened here, desktop-only, so mobile/
           tablet spacing is untouched. */
        padding-left: clamp(var(--gutter), 6vw, 6rem);
        padding-right: clamp(var(--gutter), 6vw, 6rem);
    }
}

/* ---- Heading ---- */
.bte-about__heading {
    font-size: clamp(2.2rem, 4.5vw, 4.5rem);
    line-height: 1.0;
    color: var(--bte-white);
}

/* "BUILT ON" prefix in red */
.bte-about__heading-red {
    color: var(--bte-red);
    display: block;
}

/* ---- Body text ---- */
.bte-about__body {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
    line-height: 1.75;
    max-width: 52ch;
}

.bte-about__body p { margin-bottom: var(--space-4); }
.bte-about__body p:last-child { margin-bottom: 0; }

/* ---- CTA ---- */
.bte-about__cta {
    align-self: flex-start;
}

/* ---- Desktop progress bar (bottom of left panel) ---- */
.bte-about__progress {
    position: relative;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.12);
    z-index: 1;
    display: none;
}

@media (min-width: 1024px) {
    .bte-about__progress { display: block; }
}

.bte-about__progress--mobile {
    display: block;
    margin-top: var(--space-4);
    border-radius: 2px;
    overflow: hidden;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.14);
}
/* Now sits BELOW the image card (moved out of it) — give it the same
   side gutters so it lines up under the card, per the mobile visuals. */
@media (max-width: 767px) {
    .bte-about__progress--mobile {
        margin: var(--space-2) var(--gutter) var(--space-6);
    }
}

@media (min-width: 1024px) {
    .bte-about__progress--mobile { display: none; }
}

.bte-about__progress-fill {
    height: 100%;
    background-color: var(--bte-red);
    width: 0%;
    border-radius: 2px;
    /* transition set by JS */
}

/* ============================================================
   RIGHT PANEL — image slider
   ============================================================ */

.bte-about__images {
    position: relative;
    overflow: hidden;
    /* Mobile: fixed height image below content */
    min-height: 60vw;
}

/* Desktop: full-bleed layer behind the content panel, rather than a
   50%-wide grid column — the panel overlay covers the left half of
   it, so what's actually visible ends up matching the old grid-split
   look once the pin sequence has fully played through, but the image
   itself is genuinely full-width underneath the whole time. */
@media (min-width: 1024px) {
    .bte-about__images {
        position: absolute;
        inset: 0;
        z-index: 0;
        min-height: 0;
    }
}

/* ---- Individual slides ---- */
.bte-about__image-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s var(--ease-out);
}

/* The reveal slide's opacity is set once via GSAP and never changes
   again — its reveal is entirely clip-path, driven by scroll. The
   regular opacity transition above would otherwise still apply and
   create a competing fade alongside the wipe. */
.js-about-reveal-slide {
    transition: none;
}

.bte-about__image-slide.is-active {
    opacity: 1;
    /* Stay absolute + inset:0 (like the base rule) rather than
       switching to position:relative — a relatively-positioned slide
       with only min-height doesn't give the <img>'s height:100% a
       definite value to resolve against, so the image rendered at
       its own natural aspect ratio instead of filling the slide,
       leaving the section background visible underneath it. */
}

.bte-about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    /* ED-AE applies parallax here */
    will-change: transform;
}

/* Mobile: image is a rounded card */
@media (max-width: 1023px) {
    .bte-about__images {
        margin: 0 var(--gutter) var(--space-8);
        border-radius: var(--radius-xl);
        min-height: 70vw;
        overflow: hidden;
    }

    .bte-about__image-slide.is-active {
        border-radius: var(--radius-xl);
    }

    /* 2026-07-21 — clean ONE-AT-A-TIME carousel on mobile. The two slides
       were stacking one above the other (both visible); force them to
       OVERLAP inside the single box (absolute) with only the active image
       shown, so the box cycles through one image at a time. */
    .bte-about__images {
        position: relative !important;
    }
    .bte-about__image-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        clip-path: none !important;
        transition: opacity 0.6s var(--ease-out) !important;
    }
    .bte-about__image-slide.is-active {
        opacity: 1 !important;
    }
    .bte-about__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ---- Scroll indicator ---- */
.bte-about__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Desktop: centred within the left-hand blue panel specifically —
   at the whole section's 50% mark it lands over the image instead. */
@media (min-width: 1024px) {
    .bte-about__scroll {
        left: 25%;
    }
    .bte-about--pic-left .bte-about__scroll {
        left: 75%;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .bte-about__image-slide { transition: none; }
    .bte-about__progress-fill { transition: none; }
}

/* ============================================================
   MOBILE (phones) — FORCE the image box to sit BELOW the text.
   2026-07-21 — reported the image wasn't dropping under the copy and
   both slides were stacking. Hard flex-column stack: content first,
   then a single fixed-height image box (slides overlap; only the
   active one shows), then the progress bar.
   ============================================================ */
@media (max-width: 767px) {
    .bte-about__pin-wrap { position: static !important; }
    .bte-about__inner {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .bte-about__content {
        position: relative !important;
        inset: auto !important;
        order: 0 !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }
    .bte-about__images {
        position: relative !important;
        inset: auto !important;
        order: 1 !important;
        width: auto !important;
        height: 68vw !important;
        min-height: 0 !important;
        margin: var(--space-4) var(--gutter) 0 !important;
        border-radius: var(--radius-xl) !important;
        overflow: hidden !important;
    }
    .bte-about__progress--mobile { order: 2 !important; }

    .bte-about__image-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        clip-path: none !important;
        transition: opacity 0.6s var(--ease-out) !important;
    }
    .bte-about__image-slide.is-active { opacity: 1 !important; }
    .bte-about__image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Mobile — ensure the image box is rounded on ALL corners (top too). */
@media (max-width: 767px) {
    .bte-about__images,
    .bte-about__image-slide,
    .bte-about__image {
        border-radius: var(--radius-xl) !important;
    }
    .bte-about__images { overflow: hidden !important; }
}


/* ============================================================
   2026-07-24 — ABOUT PAGE: image ABOVE the text on mobile
   ------------------------------------------------------------
   Client wants the About-page blocks (e.g. Our Mission) to lead with
   the IMAGE on phones, matching the brands section's visual-first
   look — the default About stacking is text-first. Scoped to
   .bte-page--about so the HOMEPAGE About/Pic sections keep their
   own text-first order untouched.
   ============================================================ */
@media (max-width: 767px) {
    .bte-page--about .bte-about__images {
        order: 0 !important;
        margin: 0 var(--gutter) var(--space-4) !important;
    }
    .bte-page--about .bte-about__content {
        order: 1 !important;
    }
    .bte-page--about .bte-about__progress--mobile {
        order: 2 !important;
    }
}