/* ============================================================
   BTE INNER PAGE HERO
   Restyled 2026-07-03 to match the homepage Hero Slider look:
   full-bleed photo, bottom-up dark gradient, heading/body/CTA
   bottom-left over the photo. (Previously a 55/45 split panel.)
   ============================================================ */

.bte-page-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--bte-navy-hex);
    /* 2026-07-15 — rounded bottom corners, matching the Aftersales
       hero's own treatment (aftersales.css .bte-as-hero) and the
       same 2.5rem radius used for other large photo panels site-wide
       (manufacturers.css). This hero has no fade-to-transparent at
       its own bottom edge — it's full viewport height and the next
       section starts immediately below — so, unlike Aftersales, the
       photo is still fully opaque right up to this edge and the
       rounded corner is clearly visible with no further fade
       adjustment needed. Shared by every page using this partial
       (About, Our Manufacturers, Contact, etc.), so fixing it here
       covers all of them at once. */
    border-radius: 0 0 2.5rem 2.5rem;
}

/* ---- Photo — fills the entire section ---- */
.bte-page-hero__photo-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.bte-page-hero__photo {
    /* 2026-07-15 — base/default sizing (parallax OFF — either the
       per-page "Disable Parallax" checkbox is ticked, so this <img>
       carries no data-edae-parallax attribute, or JS/GSAP isn't
       available). 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;
    will-change: transform;
}

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

.bte-page-hero__photo-placeholder {
    background-color: var(--bte-navy-hex);
}

/* ---- Content — overlays the photo, bottom-left aligned ---- */
.bte-page-hero__content-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    /* 2026-07-23 — inner-page hero content lifted off the bottom to roughly
       the Aftersales hero's own height. Centring it put the heading ABOVE
       the middle (the block is heading + copy + button, so its top sits
       high); instead keep it bottom-anchored but lift it with a tall
       bottom padding so the heading lands around mid-viewport like
       Aftersales, not too high. */
    justify-content: flex-end;
}

.bte-page-hero__content-wrap::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;
}

.bte-page-hero__content-row {
    position: relative;
    z-index: 1;
    display: flex;
    /* 2026-07-22 — body copy stacked UNDER the heading (was a side-by-side
       row with the subtext on the right). */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--gutter);
    padding-top: calc( var(--bte-header-h, 100px) + var(--space-16) );
    /* Lift off the bottom — tuned to sit the heading near mid-viewport,
       matching the Aftersales hero height. Easy single knob to adjust. */
    padding-bottom: clamp( var(--space-24), 13vh, var(--space-32) );
}

.bte-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    max-width: 56rem;
    flex: 1;
}

/* ---- Heading ---- */
.bte-page-hero__heading {
    font-family: var(--font-display);
    font-size: clamp( 2.4rem, 5vw, 5rem );
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--bte-white);
    margin: 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.bte-page-hero__heading .red { color: var(--bte-red); }

/* 2026-07-18 — no-CTA heroes (About, etc.): reserve the vertical space a
   CTA button + its gap would have occupied, so the heading sits at the
   same height as on the pages that do have a button rather than dropping
   to the bottom edge. */
.bte-page-hero__content--no-cta {
    /* 2026-07-22 — was reserving CTA-button space, which pushed the body copy
       well below the title. Now the layout is stacked, so drop it and let the
       body sit right under the title. */
    margin-bottom: 0;
}

/* 2026-07-18 — hero heading reddens on scroll (About). is-page-scrolled is
   toggled on <body> by bte-core.js at the same 60px threshold as the header. */
.bte-page-hero__heading {
    transition: color 0.6s var(--ease-out, ease);
}
.bte-page--about.is-page-scrolled .bte-page-hero__heading,
.bte-page--brands.is-page-scrolled .bte-page-hero__heading {
    color: var(--bte-red);
}

/* Opt-in one-line heading (New Plant / Used Plant page heroes) — the
   heading was wrapping to two lines on desktop even though the hero
   is full-bleed with plenty of spare width, because it was capped by
   .bte-page-hero__content's shared 56rem max-width. Only applied at
   desktop widths where there's room; mobile keeps its normal wrap. */
@media (min-width: 1024px) {
    .bte-page-hero__content--wide {
        max-width: none;
    }
    .bte-page-hero__heading--nowrap {
        white-space: nowrap;
    }
}

/* ---- Subtext — right side with red left border, matches the
   Aftersales page hero's own layout (see aftersales.css
   .bte-as-hero__subtext) ---- */
.bte-page-hero__subtext {
    max-width: 46rem;           /* 2026-07-22 — stacked under the heading now, so wider */
    flex-shrink: 0;
    border-left: 3px solid var(--bte-red);
    padding-left: var(--space-5);
    padding-bottom: var(--space-2);
}

.bte-page-hero__subtext p {
    font-size: var(--text-base);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 var(--space-4) 0;
}

.bte-page-hero__subtext p:last-child { margin-bottom: 0; }

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

/* ---- Mobile ---- */
@media (max-width: 1023px) {
    .bte-page-hero__content-row {
        flex-direction: column;
        align-items: flex-start;
        padding-top: var(--space-8);
        /* 2026-07-24 — lift the title/copy well clear of the fixed
           scroll-to-continue cue + mobile action bar at the bottom. */
        padding-bottom: clamp(150px, 20vh, 200px);
    }

    .bte-page-hero__content {
        max-width: 100%;
    }

    .bte-page-hero__subtext {
        max-width: 100%;
    }

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


/* Triangle/hex pattern overlay on the header photo (2026-07-19, opt-in
   via the "Triangle Pattern Overlay" page-hero toggle) — same texture
   used on the product hero / aftersales sections. Sits above the photo
   but below the content gradient/text (content-wrap is z-index 3). */
.bte-page-hero__triangles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    mix-blend-mode: overlay;
}