:root {
    --bt-hero-dark: #0f1626;
}

/* ── FULL-BLEED BREAKOUT ───────────────────────────────────────────────
   Runs edge-to-edge at true browser width regardless of Astra's normal
   content container. Requires the block wrapping [bt_hero_banner] to be
   set to "Full width" alignment in the editor — see loader.php, this CSS
   alone can't override WordPress's own block-width system. */
.bt-hero {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
}

/* ── CAROUSEL MECHANICS ────────────────────────────────────────────────
   Deliberately NOT a scroll container (overflow-x: auto + scroll-snap).
   The viewport clips overflow and the track is moved with a CSS
   transform driven by JS — no native/touch scrolling happens at all,
   only discrete slide-to-slide movement via dots, autoplay, or swipe
   (swipe triggers the same transform, it isn't a scroll). */
.bt-hero-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.bt-hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
}

.bt-hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;
}

.bt-hero-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bt-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wraps the image when a slide has a link — makes the entire slide
   clickable, not just the image itself. Renders as a plain <div> with
   the same layout when a slide has no link (see frontend.php). */
.bt-hero-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Mobile: taller crop (paired with a real mobile-specific image — see
   loader.php — so this isn't force-cropping a wide desktop image, it's
   correctly cropping an image composed for this shape). */
.bt-hero-slide {
    aspect-ratio: 4 / 5;
}

/* ── DOTS (segmented progress-bar style) ───────────────────────────────
   Thin horizontal bar segments, evenly spaced. Fixed-width segments —
   NOT scaled to a percentage of the banner width — so they stay compact
   regardless of how wide the screen or how few slides there are. */

.bt-hero-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 6px;
}

.bt-hero-dot {
    flex: none;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.bt-hero-dot.is-active {
    background: #fff;
}

/* ── TABLET ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    .bt-hero-slide {
        aspect-ratio: 16 / 9;
    }
}

/* ── DESKTOP ────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .bt-hero-slide {
        aspect-ratio: auto;
        /* Whichever is smaller: 560px, or half the actual browser viewport
           height. A flat 560px was fine on a tall external monitor, but
           on a laptop's shorter viewport (often 700-800px after browser
           chrome) it was eating most of the visible page before any
           scrolling — this scales down to match. */
        height: min(560px, 50vh);
    }
    .bt-hero-dots {
        bottom: 18px;
    }
}

/* Respect reduced-motion: no animated slide transitions. */
@media (prefers-reduced-motion: reduce) {
    .bt-hero-track {
        transition: none;
    }
}