/* ============================================================
   BTE OUR MANUFACTURERS
   Light card on dark page bg, rounded top corners, triangle hex pattern,
   two-tone heading, logo carousel, vertical side tab
   ============================================================ */

.bte-manu {
    position: relative;
    background-color: var(--bte-navy);
    padding-top: var(--space-10);
}

/* ---- Card-stack: slides up over Testimonials (desktop) ----
   Mirrors the product page's Features/Spec reveal (see product.css
   .bte-card-stack): a shared wrapper (created at runtime by
   bte-manufacturers.js initFullscreenPin, since Testimonials and
   Manufacturers are both independently rendered by the section
   builder with no shared markup of their own) is pinned once, with
   Testimonials and Manufacturers as simple absolutely-positioned
   children inside it. Manufacturers starts translated one full
   viewport height below and slides up to cover Testimonials as the
   wrapper's pin scrubs through its scroll range, then hands off
   naturally into whatever follows (News) once the wrapper itself
   unpins — nothing to manually reposition or clear on hand-off.

   Two earlier approaches were tried and replaced:
   - Pinning Testimonials directly and separately fixed-positioning
     Manufacturers as an independent sibling overlay, toggling its
     position between fixed/absolute and clearing inline styles by
     hand on hand-off — this caused the reported snap-back and
     "disappears, back in its old position" bugs.
   - Manufacturers pinning only itself (no visual relationship to
     Testimonials) — robust, but produced no overlap/slide-over
     visual at all, since by the time its own pin engaged Testimonials
     had already scrolled fully out of view via normal document flow.
   ---- */
@media (min-width: 1024px) {
    .bte-manu-card-stack {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .bte-manu-card-stack #bte-testimonials,
    .bte-manu-card-stack #bte-manufacturers {
        position: absolute;
        inset: 0;
        height: 100vh;
        width: 100%;
    }

    .bte-manu-card-stack #bte-testimonials {
        z-index: 1;
    }

    .bte-manu-card-stack #bte-manufacturers {
        z-index: 2;
    }

    .bte-manu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        /* 2026-07-16 — fill the page + remove the navy band above the
           card (per client request). height:100vh makes the section
           fill the viewport so the flex:1 card below fills it too;
           padding-top:0 removes the navy strip the base rule
           (padding-top:var(--space-10)) was showing above the card's
           rounded top. The card keeps its rounded top corners — only
           the band is gone; any navy now shows just as small triangles
           right in the two top corners, as agreed. */
        height: 100vh;
        padding-top: 0;
    }

    .bte-manu__card {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 0;
        /* Extra top clearance while pinned full-screen — the card's
           normal padding-top isn't enough to clear the fixed header
           (z-index:100, above this section's z-index:2), so the
           headline was sitting partly behind it. */
        padding-top: calc( var(--bte-header-h, 100px) + var(--space-24) );
    }

    .bte-manu__top,
    .bte-manu__carousel-row {
        margin-bottom: 0;
    }
}


/* ---- Card ---- */
.bte-manu__card {
    position: relative;
    background-color: #ffffff;
    border-radius: 2.5rem 2.5rem 0 0;
    overflow: hidden;
    padding-top: clamp(var(--space-10), 6vw, var(--space-16));
    padding-bottom: var(--space-12);
    padding-left: clamp(var(--gutter), 6vw, var(--space-20));
    padding-right: var(--gutter);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.bte-manu__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Light triangle hex pattern background on the white card */
.bte-manu__card.bte-hex-bg::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient( rgba(255,255,255,0.55), rgba(255,255,255,0.85) ),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

.bte-manu__card > * {
    position: relative;
    z-index: 1;
}

/* ---- Top: heading + body ---- */
.bte-manu__top {
    max-width: 1100px;
    margin-bottom: var(--space-16);
}

.bte-manu__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 var(--space-8);
}

.bte-manu__heading-red {
    display: block;
    color: var(--bte-red);
}

.bte-manu__heading {
    color: var(--bte-navy);
}

.bte-manu__body {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(7, 9, 58, 0.75);
}

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

/* ---- Logo carousel ---- */
.bte-manu__carousel-row {
    margin-bottom: var(--space-16);
}

.bte-manu__viewport {
    overflow: hidden;
    width: 100%;
}

.bte-manu__track {
    display: flex;
    gap: var(--space-5);
    transition: transform 0.5s var(--ease-out);
    will-change: transform;
}

.bte-manu__tile {
    flex: 1 1 0;
    height: clamp(110px, 11vw, 150px);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.bte-manu__tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.15));
}

.bte-manu__tile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bte-manu__tile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bte-manu__tile-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--bte-navy);
}

/* ---- Bottom row: arrows left, CTAs right ---- */
.bte-manu__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.bte-manu__nav {
    display: flex;
    gap: var(--space-3);
}

/* Manufacturers nav arrows now use the shared .bte-arrow-btn look with
   no local override -- no longer needed now the whole site draws from
   one definition. */

.bte-manu__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ---- Scroll indicator (dark variant for light bg) ---- */
.bte-manu__scroll {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.bte-manu__scroll .bte-scroll-indicator,
.bte-manu__scroll .bte-scroll-indicator__circle {
    border-color: rgba(7, 9, 58, 0.3);
    color: var(--bte-navy);
}

/* ---- Vertical side tab ---- */
.bte-manu__side-tab {
    position: absolute;
    right: 0;
    top: var(--space-10);
    z-index: 3;
    background-color: var(--bte-red);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-3);
    border-radius: 0 0 0 0.5rem;
}

.bte-manu__side-tab span {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bte-white);
    transform: rotate(180deg);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bte-manu__card { transition: none; opacity: 1; transform: none; }
    .bte-manu__track { transition: none; }
    .bte-manu__tile { transition: none; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .bte-manu__card {
        border-radius: 1.5rem 1.5rem 0 0;
        padding: var(--space-8) var(--gutter) var(--space-10);
    }

    .bte-manu__bottom-row {
        flex-direction: column;
        align-items: stretch;
    }

    .bte-manu__ctas {
        flex-direction: column;
    }

    .bte-manu__side-tab {
        padding: var(--space-4) var(--space-2);
    }
}

/* ============================================================
   2026-07-16 — HEADING CLEARANCE BELOW STICKY HEADER
   The desktop `.bte-manu__card { padding-top: calc(header + space) }`
   rule earlier in this file was being overridden by the later base
   `.bte-manu__card` padding-top declaration (equal specificity, later
   in source wins), so on the pinned full-screen section the "OUR
   MANUFACTURERS" heading sat tucked up behind the fixed header
   (measured live: heading top ~94px vs header bottom ~138px). Declaring
   the clearance HERE, after every base rule, guarantees it wins — the
   heading now clears the header with comfortable breathing space.
   ============================================================ */
@media (min-width: 1024px) {
    .bte-manu__card {
        padding-top: calc( var(--bte-header-h, 137px) + 4rem );
    }
}

/* ============================================================
   MOBILE (phones) — 2026-07-21 — match the visual: drop the vertical
   side tab, make the logo tiles a proper big carousel, and give the
   arrows / CTAs / scroll cue room to clear the floating action bar.
   ============================================================ */
@media (max-width: 767px) {
    .bte-manu__side-tab { display: none !important; }

    /* Bigger logo tiles — carousel showing ~1.5 per view (were flex:1,
       so all squeezed into one row, tiny). */
    .bte-manu__tile {
        flex: 0 0 auto !important;
        width: clamp(210px, 64vw, 300px);
        height: clamp(130px, 36vw, 180px);
    }

    /* Clear the floating Search/Call/Email bar. */
    .bte-manu__card {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
    }
}

/* 2026-07-21 (pass 2) — New Plant / Used Plant side by side (not
   stacked full-width) and a bit larger. */
@media (max-width: 767px) {
    .bte-manu__ctas {
        flex-direction: row !important;
        gap: var(--space-3);
        width: 100%;
    }
    .bte-manu__ctas .bte-btn {
        flex: 1 1 0;
        min-width: 0;
        /* More breathing room on the right (the parallelogram skew eats
           into that side); smaller text compensates. */
        padding-right: 2.6rem !important;
    }
    .bte-manu__ctas .bte-btn .bte-btn__inner {
        font-size: var(--text-sm);
        justify-content: center;
    }
}

/* 2026-07-24 — Our Manufacturers heading was larger/inconsistent vs the
   rest of the page on mobile; bring it in line with the other section
   headings. */
@media (max-width: 767px) {
    .bte-manu__heading {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
        line-height: 1.05;
        margin-bottom: var(--space-5);
    }
}

/* 2026-07-24 — body copy was var(--text-lg) (22px), noticeably larger
   than other sections on mobile. Match the About / "Our Mission" body
   size (the client's reference) so body copy reads consistently across
   sections on phones. */
@media (max-width: 767px) {
    .bte-manu__body,
    .bte-manu__body p {
        font-size: clamp( var(--text-base), 1.1vw, var(--text-md) );
        line-height: 1.7;
    }
}

/* ============================================================
   2026-07-27 — MOBILE FIT: arrows + CTAs hidden on smaller phones.
   This section is pinned full-screen on phones, but the long intro
   plus two space-16 gaps and the large body font pushed the logo
   carousel and its nav arrows / New Plant + Used Plant buttons off
   the bottom of the viewport. Tighten the vertical rhythm and shrink
   the body copy so the whole thing — arrows and buttons included —
   fits on one screen and sits higher up.
   ============================================================ */
@media (max-width: 767px) {
    .bte-manu__card {
        /* less top inset + a smaller action-bar clearance reclaim room */
        padding-top: var(--space-6);
        padding-bottom: calc( env(safe-area-inset-bottom, 0px) + 88px ) !important;
    }
    .bte-manu__heading {
        font-size: clamp( 1.7rem, 8vw, 2.4rem );
        margin-bottom: var(--space-4);
    }
    .bte-manu__top {
        margin-bottom: var(--space-5);
    }
    .bte-manu__body {
        font-size: var(--text-base);
        line-height: 1.5;
    }
    .bte-manu__body p { margin-bottom: var(--space-2); }
    .bte-manu__carousel-row {
        margin-bottom: var(--space-5);
    }
    /* Arrows + CTAs closer together and pulled up off the card floor */
    .bte-manu__bottom-row {
        gap: var(--space-3);
    }
}

/* Extra squeeze for genuinely short viewports (small phones / landscape)
   so the arrows + buttons still clear the bottom. */
@media (max-width: 767px) and (max-height: 780px) {
    .bte-manu__top { margin-bottom: var(--space-3); }
    .bte-manu__carousel-row { margin-bottom: var(--space-3); }
    .bte-manu__body { font-size: var(--text-sm); line-height: 1.45; }
    .bte-manu__tile {
        width: clamp(180px, 58vw, 260px) !important;
        height: clamp(104px, 30vw, 150px) !important;
    }
}