/* ============================================================
   BTE PRODUCT CATEGORIES CAROUSEL
   Centre-focus carousel — deliberately distinct from Services:
   no eyebrow/heading intro block, big card-heading overlay at
   top of the active card, underlined text link (not a pill
   button) bottom-left, single "next" arrow inside the card.
   ============================================================ */

/* ---- Section ---- */
.bte-pcat {
    position: relative;
    background-color: transparent;
}

/* ---- Carousel panel ---- */
/* 2026-07-14 fix — removed the fixed min-height:100vh. The active
   card's own aspect-ratio (4/3) already caps its rendered height to
   roughly 45-55vh at typical carousel widths, so forcing the panel to
   a full 100vh and vertically centring inside it (justify-content:
   center) left a large fixed band of empty space above AND below the
   cards — visible because .bte-pcat has a transparent background, so
   the site's fixed hex/triangle background shows straight through
   that empty band. Confirmed live ("large empty space... can see the
   triangle background"). Sizing to content + padding instead removes
   the dead space while keeping generous top/bottom breathing room via
   padding-block. Purely a layout change — unrelated to, and doesn't
   affect, this section's own ScrollTrigger pin (BTE.addSimpleSectionPin
   in bte-core.js), whose pin distance is a viewport-relative "+=60%"
   offset, not tied to this panel's own height. */
.bte-pcat__carousel-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-16);
    overflow: hidden;
}

/* ---- Carousel viewport ---- */
.bte-pcat__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Room for the active card's outline AND its drop-shadow glow
       (--shadow-lg spreads up to ~88px below the box) so neither is
       clipped by the overflow:hidden above, which is needed to hide
       off-screen side cards horizontally. */
    padding-block: var(--space-20);
}

/* ---- Track ---- */
.bte-pcat__track {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-inline: var(--gutter);
    transition: transform 0.6s var(--ease-out);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

.bte-pcat__track img {
    -webkit-user-drag: none;
    user-select: none;
}

/* ---- Card wrapper ---- */
.bte-pcat__card {
    flex-shrink: 0;
    width: clamp(480px, 50vw, 780px);
    transition:
        width 0.55s var(--ease-out),
        transform 0.55s var(--ease-out);
    opacity: 1;
    transform: scale(0.97);
}

.bte-pcat__card.is-active {
    width: clamp(560px, 58vw, 900px);
    transform: scale(1);
}

/* 2026-07-16 fix — cards were sized nearly edge-to-edge on phones
   (the active card alone could hit 84vw, ~420px on a 390px-wide
   screen), leaving almost no peek of neighbouring cards and reading
   as oversized. Reported live: "the home page categories... are
   appearing too large on a smaller screen." Scaled both clamps down
   so the active card leaves visible side-peeks and breathing room. */
@media (max-width: 767px) {
    .bte-pcat__card {
        width: clamp(180px, 52vw, 260px);
    }
    .bte-pcat__card.is-active {
        width: clamp(220px, 68vw, 320px);
    }
}

/* ---- Card inner ---- */
.bte-pcat__card-inner {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1.5px solid transparent;
    transition:
        border-color 0.55s var(--ease-out),
        box-shadow 0.55s var(--ease-out);
}

/* Dashed border sits OUTSIDE the image with a gap — an outline
   rather than a border, since border-radius + overflow:hidden on
   the image would otherwise clip it flush to the image edge. */
.bte-pcat__card.is-active .bte-pcat__card-inner {
    outline: 1.5px dashed var(--bte-teal);
    outline-offset: 12px;
    box-shadow: var(--glow-teal), var(--shadow-lg);
}

/* ---- Card link / image ---- */
.bte-pcat__card-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bte-pcat__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
    filter: brightness(0.85);
}

.bte-pcat__card-inner:hover .bte-pcat__card-img {
    transform: scale(1.04);
}

/* ---- Gradient overlay (top + bottom, so heading/link stay legible) ---- */
.bte-pcat__card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 35%),
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%);
    z-index: 1;
    pointer-events: none;
}

/* ---- Card heading — big overlay at top, all cards ---- */
.bte-pcat__card-title {
    position: absolute;
    top: var(--space-10);
    left: calc(var(--space-6) * 3);
    right: calc(var(--space-6) * 3);
    z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.6vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-white);
    line-height: 0.95;
    text-align: center;
    text-shadow: 0 4px 24px rgba(0,0,0,0.65);
    transition: font-size 0.4s var(--ease-out);
    pointer-events: none;
}

.bte-pcat__card.is-active .bte-pcat__card-title {
    font-size: clamp(1.75rem, 5.5vw, 5.5rem);
}

/* ---- Card CTA — underlined text link, bottom-left, all cards.
   Kept as its own plain-text style (not the full .bte-btn component)
   per client request (2026-07-12) — only the font-family was changed,
   from the body font to the display font, to match the font used on
   the site's standard buttons elsewhere. */
.bte-pcat__card-cta {
    position: absolute;
    left: calc(var(--space-6) * 3);
    bottom: calc(var(--space-6) * 3);
    z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.6vw, var(--text-md));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bte-white);
    text-decoration: underline;
    text-decoration-color: var(--bte-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.bte-pcat__card.is-active .bte-pcat__card-cta {
    left: calc(var(--space-8) * 3);
    bottom: calc(var(--space-8) * 3);
    font-size: var(--text-lg);
}

.bte-pcat__card-cta:hover {
    color: var(--bte-teal);
    text-decoration-color: var(--bte-teal);
}

/* ---- Nav arrows ----
   2026-07-16, per request — moved from a per-card floating pair that
   rode along with whichever card was active (the old .bte-pcat__card-nav
   rules this replaces) to a single shared pair sitting below the whole
   carousel, matching how the Services carousel does it
   (.bte-services__nav in services.css). Sits in normal flow as the
   next child after .bte-pcat__viewport inside .bte-pcat__carousel-panel
   (flex-direction:column), so it naturally lands directly underneath —
   no absolute positioning needed here, unlike Services, since this
   panel doesn't have a separate viewport-wrap sized independently of
   its own min-height. */
.bte-pcat__nav {
    display: flex;
    /* 2026-07-17 — centre the arrows below the (horizontally centred)
       open/active tile instead of tucking them to the right edge where
       they were hard to notice; nudge them up closer to the tiles too.
       2026-07-19 — pulled further up (negative margin into the viewport's
       own bottom padding) so they sit nearer the category box. */
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter) 0;
    margin-top: calc(-1 * var(--space-12));
}

/* ---- Scroll indicator ---- */
.bte-pcat__scroll {
    position: relative;
    margin-top: var(--space-10);
    display: flex;
    justify-content: center;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bte-pcat__track      { transition: none; }
    .bte-pcat__card       { transition: none; }
    .bte-pcat__card-inner { transition: none; }
    .bte-pcat__card-img   { transition: none; }
    .bte-pcat__card-title { transition: none; opacity: 1; transform: none; }
    .bte-pcat__card-cta   { transition: none; opacity: 1; transform: none; }
}

/* 2026-07-14 fix — short-viewport cropping. .bte-pcat__carousel-panel
   (min-height:100vh) plus its own padding-block (--space-16, both top
   and bottom) plus .bte-pcat__viewport's own padding-block
   (--space-20, both top and bottom) add up to a large fixed budget on
   top of the vh floor — doesn't fit on a shorter laptop screen.
   Reduces the fixed padding directly (kept intentionally lighter than
   removed entirely, since the viewport's own padding is there
   specifically to leave room for the active card's drop-shadow glow,
   per the comment on .bte-pcat__viewport above, not just decorative
   spacing). Left the JS-driven card sizing (aspect-ratio:4/3)
   completely alone rather than the scale-to-fit approach tried first,
   which was confirmed to visibly distort/stretch these cards.
   Desktop-width-only, matching the pin's own JS gate. */
@media (max-height: 820px) and (min-width: 1024px) {
    .bte-pcat__carousel-panel {
        padding-block: var(--space-6);
    }
    .bte-pcat__viewport {
        padding-block: var(--space-10);
    }
}

/* ============================================================
   MOBILE (phones) — 2026-07-21
   Deeper cards; title stays at the top and the CTA drops to the
   bottom-left so they stop clashing on the shorter mobile card.
   ============================================================ */
@media (max-width: 767px) {
    .bte-pcat__card-inner { aspect-ratio: 3 / 4; }   /* was 4/3 — deeper */
    .bte-pcat__viewport { padding-block: 24px; }     /* room for the dashes */

    .bte-pcat__card-title,
    .bte-pcat__card.is-active .bte-pcat__card-title {
        top: var(--space-6) !important;
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    }
    .bte-pcat__card-cta,
    .bte-pcat__card.is-active .bte-pcat__card-cta {
        left: var(--space-6) !important;
        bottom: var(--space-6) !important;
        font-size: var(--text-base) !important;
    }
}

/* 2026-07-21 (pass 2) — title was bleeding off the right (big insets +
   large font) and the arrows overlapped the card. */
@media (max-width: 767px) {
    .bte-pcat__card-title,
    .bte-pcat__card.is-active .bte-pcat__card-title {
        left: var(--space-4) !important;
        right: var(--space-4) !important;
        top: var(--space-5) !important;
        font-size: clamp(1.2rem, 5.5vw, 1.9rem) !important;
        text-align: center !important;
    }
    /* Arrows sit BELOW the card (was pulled up over it by a negative margin). */
    .bte-pcat__nav { margin-top: var(--space-4) !important; }
}