/* ============================================================
   BTE WHY CHOOSE US — Pinned scroll-animated section
   ============================================================ */

/* ---- Section wrapper ---- */
.bte-wcu {
    position: relative;
    height: 100vh;           /* visible viewport; GSAP ScrollTrigger adds scroll distance */
    overflow: hidden;
    background-color: var(--bte-navy);
}

/* Note: this section previously used a fixed -100vh margin (applied
   only when a specific preceding section type was detected) to pull
   itself up and overlap whatever came before it. That's now handled
   entirely in JS (see bte-why-choose-us.js initEntranceSlideUp()) via
   a scroll-tied position:fixed slide, which works regardless of what
   actually precedes this section — so no CSS margin trick is needed
   here at all any more. */



/* ---- Background photo ---- */
.bte-wcu__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Needed for the animated border-radius (see bte-why-choose-us.js)
       to actually clip the image rather than just sit visually
       ignored underneath its uncropped corners. */
    overflow: hidden;
}

.bte-wcu__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dark gradient overlay so white text reads on photo */
.bte-wcu__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(7, 9, 58, 0.72) 0%,
        rgba(7, 9, 58, 0.30) 60%,
        rgba(7, 9, 58, 0.15) 100%
    );
}

/* ============================================================
   STATE 1 — heading, body, CTA (always visible over photo)
   ============================================================ */

.bte-wcu__state-1 {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-10), 6vw, var(--space-20)) var(--gutter);
    gap: var(--space-4);
}

/* Large bleed heading — matches hero/services treatment */
.bte-wcu__heading {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(2.25rem, 6vw, 6rem);
    font-weight: 800;
    line-height: 0.9;
    color: var(--bte-white);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

/* Row: body left, CTA right */
.bte-wcu__content-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.bte-wcu__body-1 {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
    line-height: 1.75;
    max-width: 42ch;
}

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

.bte-wcu__cta-wrap {
    flex-shrink: 0;
}

/* ============================================================
   HEX OVERLAY — diagonal wipe panel
   Clips from off-screen-right to full coverage via clip-path.
   clip-path polygon: diagonal left edge, right = full width.
   Start (hidden): left edge is at 110%  (off right)
   End   (visible): left edge is at -20% (past left edge)
   GSAP animates --wcu-clip-x custom property.
   ============================================================ */

.bte-wcu__hex-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Explicit background rather than relying on .bte-section--hex's
       transparent + fixed-backdrop trick — that fixed backdrop sits
       at z-index:-1 site-wide, but .bte-wcu's own opaque navy
       background-color sits between it and this overlay, blocking it
       from ever actually showing through. Same navy + geometric
       pattern image used for the site-wide fixed backdrop, applied
       directly here instead so it's guaranteed visible regardless. */
    background-color: rgb(7, 9, 58);
    background-image:
        linear-gradient( rgba(7, 9, 58, 0.90), rgba(7, 9, 58, 0.90) ),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Initial clip: entirely off to the right */
    clip-path: polygon(
        140% 0%,
        140% 0%,
        140% 100%,
        140% 100%
    );
}

/* Active state — set by GSAP inline style via CSS property animation.
   We define the full-reveal polygon here for reference; GSAP sets it directly.
   Bottom edge further left than top — matches the reference visual. */
.bte-wcu__hex-overlay.is-revealed {
    clip-path: polygon(
        -10% 0%,
        100% 0%,
        120% 100%,
        -40%  100%
    );
}

/* ============================================================
   STATE 2 — machine card (bottom-left) + body 2 (bottom-right)
   Sits inside the overlay, initially invisible, fades in mid-wipe
   ============================================================ */

.bte-wcu__state-2 {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: clamp(var(--space-10), 6vw, var(--space-20)) var(--gutter);
    gap: var(--space-8);
    opacity: 0;
}

/* Rounded card with slight white border — sits independently in the
   left-hand area (not a flex sibling of body-2, which stays
   right-aligned) so it can wipe up from the bottom on its own,
   matching the reference visual and the same mechanic used on the
   Pic Right/Pic Left sections' second-image reveal. */
.bte-wcu__machine-card {
    position: absolute;
    left: var(--gutter);
    bottom: clamp(var(--space-10), 6vw, var(--space-20));
    z-index: 2;
    border-radius: 1rem;
    overflow: hidden;
    width: clamp(220px, 30vw, 440px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bte-wcu__machine-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.bte-wcu__body-2 {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
    line-height: 1.75;
    /* Constrain to right ~40% so it's always clear of the diagonal edge */
    max-width: 42ch;
    width: clamp(280px, 38vw, 520px);
    align-self: flex-end;
    flex-shrink: 0;
    /* Nudged down and left slightly from the corner */
    margin-right: clamp(1.5rem, 3vw, 3.5rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

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

/* ============================================================
   STATE 3 — eyebrow, heading 2, body 3 (full overlay)
   ============================================================ */

.bte-wcu__state-3 {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-10), 6vw, var(--space-20)) var(--gutter);
    gap: var(--space-6);
    opacity: 0;
}

.bte-wcu__eyebrow {
    color: var(--bte-red);
    margin-bottom: 0;
}

/* Large bleed heading — same scale treatment as state 1 heading */
.bte-wcu__heading-2 {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(2.4rem, 5.4vw, 6rem);
    font-weight: 800;
    line-height: 0.9;
    color: var(--bte-white);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
}

.bte-wcu__body-3 {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
    line-height: 1.75;
    max-width: 46ch;
}

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

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.bte-wcu__scroll {
    position: absolute;
    bottom: clamp(var(--space-6), 4vh, var(--space-10));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

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

@media (prefers-reduced-motion: reduce) {
    .bte-wcu__hex-overlay {
        clip-path: none !important;
        opacity: 0.95;
    }
    .bte-wcu__state-2,
    .bte-wcu__state-3 {
        opacity: 1 !important;
    }
}

/* ============================================================
   MOBILE — simplified layout
   ============================================================ */

@media (max-width: 767px) {
    .bte-wcu__heading {
        font-size: clamp(2.6rem, 10.5vw, 4.5rem);
    }

    .bte-wcu__heading-2 {
        font-size: clamp(1.7rem, 8.25vw, 3rem);
    }

    .bte-wcu__content-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bte-wcu__state-2 {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .bte-wcu__machine-card {
        width: clamp(180px, 60vw, 280px);
    }

    /* 2026-07-24 — tighten the gap between image and text on the final
       slide (State 3) per client. */
    .bte-wcu__state-3 {
        gap: var(--space-2);
    }
}

/* ============================================================
   MOBILE (phones, <768px) — 2026-07-21
   The section is a desktop multi-state layout with white-space:nowrap
   headings and vw-based content widths, so it overflowed the screen.
   Wrap the headings, stack the state-1 row, and constrain the wide
   content so everything fits the phone width.
   ============================================================ */
@media (max-width: 767px) {
    .bte-wcu { overflow-x: hidden; }

    .bte-wcu__heading,
    .bte-wcu__heading-2 {
        white-space: normal;
        text-align: left; /* 2026-07-24 — was centred (client: left-align on mobile) */
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 0.98;
    }

    /* State 1 — body under heading, CTA below (was a space-between row). */
    .bte-wcu__content-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }
    .bte-wcu__body-1,
    .bte-wcu__body-3 {
        max-width: 100%;
    }

    /* State 2 — image card centred (upper), copy centred below it, on
       the now fully-covered blue (matches the mobile visual). */
    /* Shared width so the text block lines up exactly with the image
       card (both centred as boxes; text ranged left within it). */
    .bte-wcu__machine-card {
        left: 50%;
        transform: translateX(-50%);
        top: 16%;
        bottom: auto;
        width: min(84vw, 400px);
        /* Sit ABOVE the now full-screen blue overlay (z-index:3) — it
           was z-index:2 (designed to show through the desktop diagonal
           gap), so once the blue covers fully on mobile it was hidden. */
        z-index: 6 !important;
    }
    .bte-wcu__body-2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 56%;
        width: min(84vw, 400px) !important;
        max-width: min(84vw, 400px) !important;
        margin: 0 !important;
        text-align: left;
        align-self: auto;
    }
}