/* ============================================================
   Asthma NZ — Stories Carousel (front-end)
   2026 best-practice baseline:
     - CSS Grid + container queries for the section layout
     - aspect-ratio (no padding hack)
     - clamp() for fluid typography
     - dvh-aware spacing
     - :focus-visible only (no aggressive outlines on click)
     - prefers-reduced-motion support
     - lite-embed pattern friendly (poster + iframe overlap)
   ============================================================ */

.anz-stories {
    --anz-bg:        #1e5bcd;
    --anz-bg-deep:   #0a3aa1;
    --anz-eyebrow:   #ffd84d;
    --anz-text:      #ffffff;
    --anz-cta-bg:    #ffffff;
    --anz-cta-fg:    #0057bf;
    --anz-cta-hover: #ffd84d;
    --anz-radius:    16px;
    --anz-shadow:    0 24px 60px -20px rgba(0,0,0,.45);
    --anz-gap:       clamp(1.5rem, 3vw, 3rem);

    position: relative;
    isolation: isolate;
    background: var(--anz-bg) radial-gradient(120% 80% at 0% 0%, var(--anz-bg) 0%, var(--anz-bg-deep) 100%);
    color: var(--anz-text);
    padding-block: clamp(3rem, 7vh, 6rem);
    overflow: clip;
    container-type: inline-size;
    container-name: anz-stories;
    scroll-margin-top: clamp(60px, 8vh, 120px);

    /* Force text-style rendering for ambiguous Unicode glyphs like ✔ ✓ ★
     * — without this, the OS emoji font kicks in with its own baked
     * colours (dark grey check marks on the blue bg). text-style lets
     * them inherit the white color from above. */
    font-variant-emoji: text;
}

/* Subtle film-grain overlay — pure CSS, no PNG needed.
   Uses an SVG noise filter dataURI; inert at GPU level. */
.anz-stories::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .12;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

.anz-stories-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 3rem);
}

.anz-stories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--anz-gap);
    align-items: center;
}

@container anz-stories (min-width: 820px) {
    .anz-stories-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5cqi, 4.5rem);
    }
}

/* ----- Media column ----- */
.anz-stories-media {
    width: 100%;
    min-width: 0;
}

/* ----- Stacked-card carousel -----
 * Container is taller than the active video so we can fit peek slides
 * above and below. Container aspect varies by video count — set via class:
 *
 *   .anz-vc-1     → square, single video (no peeks)
 *   .anz-vc-2     → 1:1.5, active centred + 1 peek below
 *   .anz-vc-3plus → 1:2,  active centred + peek above + peek below
 *
 * Each slide is a square (default) positioned absolutely. data-pos drives
 * its transform.  Math is sized so peeks fit FULLY inside the container
 * with no clipping — derived for 1:2 container with peek scale 0.5:
 *   active centre at 1.0w, prev centre at 0.25w, next centre at 1.75w.
 */
.anz-stories-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* matches slide for 1 or 2 videos */
    /* No overflow:hidden — peeks may bleed slightly outside the container
       when overlapping the active video. The parent .anz-stories has
       `overflow: clip` as the safety net for the section bounds. */
    border-radius: var(--anz-radius);
}

/* Container heights:
 *   2 videos: container_h = 1.5 × slide_h  (active in top half, peek below)
 *   3+:       container_h = 2.0 × slide_h  (active centred, peek above & below)
 *
 * For each video aspect, this gives:
 *   1:1   → 1:1.5  /  1:2
 *   16:9  → 16:13.5 / 16:18
 *   4:3   → 4:4.5  / 4:6
 *   9:16  → 9:24   / 9:32                                                */

.anz-stories-carousel.anz-vc-2     { aspect-ratio: 1 / 1.5; }
.anz-stories-carousel.anz-vc-3plus { aspect-ratio: 1 / 2; }

.anz-stories-media.is-aspect-16-9 .anz-stories-carousel              { aspect-ratio: 16 / 9; }
.anz-stories-media.is-aspect-16-9 .anz-stories-carousel.anz-vc-2     { aspect-ratio: 16 / 13.5; overflow: visible;}
.anz-stories-media.is-aspect-16-9 .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 16 / 18; }
.anz-stories-media.is-aspect-4-3  .anz-stories-carousel              { aspect-ratio: 4 / 3; }
.anz-stories-media.is-aspect-4-3  .anz-stories-carousel.anz-vc-2     { aspect-ratio: 4 / 4.5; }
.anz-stories-media.is-aspect-4-3  .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 4 / 6; }
.anz-stories-media.is-aspect-9-16 .anz-stories-carousel              { aspect-ratio: 9 / 16; }
.anz-stories-media.is-aspect-9-16 .anz-stories-carousel.anz-vc-2     { aspect-ratio: 9 / 24; }
.anz-stories-media.is-aspect-9-16 .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 9 / 32; }

/* 1-video: keep non-active hidden (there's no second video to show anyway). */
.anz-stories-carousel.anz-vc-1 .anz-slide:not([data-pos="0"]) {
    transform: translateY(-50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

/* 2-video: active in the top half, peek tucked under by 5%.
 * Container_h = 1.5 × slide_h:
 *   active centre 0.5cw   → translateY(-75%)
 *   peek   centre 1.20cw  → translateY(-5%) scale(.5)   (5% overlap) */
.anz-stories-carousel.anz-vc-2 .anz-slide[data-pos="0"] {
    transform: translateY(-75%) scale(1);
    z-index: 10;
}
.anz-stories-carousel.anz-vc-2 .anz-slide[data-pos="1"] {
    transform: translateY(-5%) scale(.5);
    opacity: .85;
    z-index: 5;
}
.anz-stories-carousel.anz-vc-2 .anz-slide[data-pos="1"]:hover {
    transform: translateY(-5%) scale(.55);
    opacity: 1;
}

.anz-stories-carousel .anz-stage {
    position: absolute;
    inset: 0;
    background: transparent;
}

.anz-slide {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--anz-radius);
    overflow: hidden;
    background: #000;
    box-shadow: var(--anz-shadow);
    transform-origin: center center;
    transition:
        transform .5s cubic-bezier(.4, 0, .2, 1),
        opacity   .4s ease,
        box-shadow .4s ease;
    will-change: transform, opacity;
    cursor: pointer;
}

.anz-stories-media.is-aspect-16-9 .anz-slide { aspect-ratio: 16 / 9; }
.anz-stories-media.is-aspect-4-3  .anz-slide { aspect-ratio: 4 / 3; }
.anz-stories-media.is-aspect-9-16 .anz-slide { aspect-ratio: 9 / 16; }

.anz-slide iframe,
.anz-slide .anz-poster,
.anz-slide .anz-iframe-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Stack order inside a slide: poster on bottom (z=1), iframe above (z=2).
 * Poster stays in the DOM permanently so peek slides always have something
 * to show and click. When the iframe mounts, the poster fades out via the
 * .is-iframe-mounted class — no .remove() so we can reuse it later. */
.anz-slide .anz-poster      { z-index: 1; transition: opacity .3s ease; }
.anz-slide .anz-iframe-host,
.anz-slide iframe           { z-index: 2; }

.anz-slide.is-iframe-mounted .anz-poster {
    opacity: 0;
    pointer-events: none;
}

/* ----- Custom controls bar (DESKTOP ONLY) -----
 * On desktop the player runs with controls=0 (no native YT chrome) and we
 * draw our own bar at the bottom of the active slide. Touch devices keep
 * YouTube's native controls (handled JS-side via isTouch detection).
 *
 * Bar contents: [play/pause] [timeline] [time] [mute] [volume] [CC]
 * Visibility: hidden by default, fades in on hover (150ms in & out — same
 * speed both directions). Pointer-events follow opacity so when hidden the
 * bar can't capture clicks. */
.anz-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Opaque enough to fully hide YouTube's branding watermark AND the
     * native volume HUD that flashes when setVolume() is called. The
     * gradient softens only the very top edge. */
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.anz-slide.is-iframe-mounted:hover .anz-controls,
.anz-slide.is-iframe-mounted .anz-controls:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.anz-ctrl-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, transform .12s ease;
}
.anz-ctrl-btn svg { width: 20px; height: 20px; }
.anz-ctrl-btn:hover { background: rgba(255,255,255,.18); }
.anz-ctrl-btn:active { transform: scale(.95); }
.anz-ctrl-btn:focus-visible {
    outline: 2px solid var(--anz-eyebrow);
    outline-offset: 2px;
}

.anz-ctrl-cc.is-on {
    background: var(--anz-eyebrow);
    color: #1a1a1a;
}
.anz-ctrl-cc.is-on:hover { background: #fff; }

/* Timeline */
.anz-ctrl-timeline {
    flex: 1;
    min-width: 60px;
    height: 18px; /* taller hit-area than the visible bar */
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    touch-action: none;
}
.anz-ctrl-timeline::before {
    /* the visible track sits inside the hit area */
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    background: rgba(255,255,255,.28);
    border-radius: 2px;
    transition: height .12s ease;
}
.anz-ctrl-timeline:hover::before { height: 6px; }

.anz-ctrl-buffer,
.anz-ctrl-fill {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: 2px;
    pointer-events: none;
    transition: height .12s ease;
}
.anz-ctrl-timeline:hover .anz-ctrl-buffer,
.anz-ctrl-timeline:hover .anz-ctrl-fill { height: 6px; }

.anz-ctrl-buffer { background: rgba(255,255,255,.4); }
.anz-ctrl-fill   { background: var(--anz-eyebrow); }

.anz-ctrl-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--anz-eyebrow);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.anz-ctrl-timeline:hover .anz-ctrl-handle { opacity: 1; }

/* Time text */
.anz-ctrl-time {
    color: rgba(255,255,255,.95);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 78px;
    text-align: center;
    flex-shrink: 0;
    user-select: none;
}

/* Mute + volume group — slider is hidden by default and slides out on
 * hover/focus of EITHER the mute button or the slider itself. Keeps the
 * controls bar compact and avoids visual conflict with YouTube's logo
 * area at rest. */
.anz-ctrl-vol-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.anz-ctrl-volume {
    width: 0;
    opacity: 0;
    pointer-events: none;
    accent-color: var(--anz-eyebrow);
    cursor: pointer;
    transition: width .2s ease, opacity .15s ease;
    /* Visually trim the native track so even when expanded it stays slim */
    height: 4px;
    margin: 0;
}

.anz-ctrl-vol-group:hover .anz-ctrl-volume,
.anz-ctrl-vol-group:focus-within .anz-ctrl-volume {
    width: 70px;
    opacity: 1;
    pointer-events: auto;
}

.anz-ctrl-volume:focus-visible {
    outline: 2px solid var(--anz-eyebrow);
    outline-offset: 3px;
}

/* Tighten the bar on narrower carousels */
@container anz-stories (max-width: 540px) {
    .anz-controls { gap: 6px; padding: 8px 10px 10px; }
    .anz-ctrl-btn { width: 30px; height: 30px; }
    .anz-ctrl-btn svg { width: 18px; height: 18px; }
    .anz-ctrl-time { font-size: 11px; min-width: 64px; }
    .anz-ctrl-volume { width: 50px; }
}

/* ----- Section-fill (desktop expand) -----
 * NOT browser fullscreen. JS sets the slide to position:fixed with
 * bounds matching the section's getBoundingClientRect, then keeps them
 * in sync on scroll/resize. The expanded video overlays both columns
 * within the section's own bounds and scrolls with the page.
 *
 * All the position properties are set inline by JS (so we can't use
 * !important here, but inline already wins specificity-wise). This rule
 * just handles the styling that's NOT inline (children, controls bar). */
.anz-slide.is-section-fill {
    background: #000;
}
.anz-slide.is-section-fill .anz-iframe-host,
.anz-slide.is-section-fill iframe {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}
/* Keep controls visible in expanded view even without hover — otherwise
 * users would lose access to play/pause/scrub/exit. */
.anz-slide.is-section-fill .anz-controls {
    opacity: 1;
    pointer-events: auto;
}

/* When the .anz-advance overlay is moved INTO the expanded slide (so it
 * fills the section bounds instead of the carousel's small bounds),
 * ensure it stacks above the iframe (z=2) and controls bar (z=4) but
 * below the close button (z=60) so users can still exit during the
 * countdown. The 50 here lives inside the slide's own stacking context,
 * so it doesn't conflict with the carousel's z values. */
.anz-slide.is-section-fill > .anz-advance {
    z-index: 50;
}

/* Floating close button pinned to top-right of the expanded slide.
 * Always visible (no hover), high contrast, comfortable touch target.
 * z-index above controls bar so it's never overlapped. */
.anz-section-fill-close {
    position: absolute;
    top: clamp(.75rem, 2vw, 1.25rem);
    right: clamp(.75rem, 2vw, 1.25rem);
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s ease, transform .15s ease;
}
.anz-section-fill-close:hover {
    background: rgba(0, 0, 0, .9);
    transform: scale(1.06);
}
.anz-section-fill-close:active { transform: scale(.95); }
.anz-section-fill-close:focus-visible {
    outline: 2px solid var(--anz-eyebrow);
    outline-offset: 2px;
}
.anz-section-fill-close svg { width: 22px; height: 22px; }

/* ----- Position states -----
 * Active overlaps each peek by ~5% of the active height for a layered look.
 * Math (1:2 container, peek scale 0.5):
 *   active centre 1.0w, spans 0.5–1.5w
 *   prev   centre 0.30w, visible 0.05–0.55w  (5% overlap with active top)
 *   next   centre 1.70w, visible 1.45–1.95w  (5% overlap with active bottom)
 * z-index puts the active above peeks so the overlap is visually clean.   */

.anz-slide[data-pos="0"] {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    z-index: 10;
    cursor: default;
}

.anz-slide[data-pos="-1"] {
    transform: translateY(-120%) scale(.5);
    opacity: .8;
    z-index: 5;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}

.anz-slide[data-pos="1"] {
    transform: translateY(20%) scale(.5);
    opacity: .8;
    z-index: 5;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}

/* Far prev/next (5+ videos): tiny sliver at top/bottom edge */
.anz-slide[data-pos="-2"] {
    transform: translateY(-160%) scale(.3);
    opacity: .35;
    z-index: 3;
}
.anz-slide[data-pos="2"] {
    transform: translateY(60%) scale(.3);
    opacity: .35;
    z-index: 3;
}

/* Anything further back is hidden */
.anz-slide:not([data-pos="0"]):not([data-pos="-1"]):not([data-pos="1"]):not([data-pos="-2"]):not([data-pos="2"]) {
    transform: translateY(-50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* Hover on peek: small promote to signal clickability */
.anz-slide[data-pos="-1"]:hover { transform: translateY(-120%) scale(.55); opacity: .95; }
.anz-slide[data-pos="1"]:hover  { transform: translateY(20%)   scale(.55); opacity: .95; }

@media (prefers-reduced-motion: reduce) {
    .anz-slide { transition: none; }
}

/* Mobile fallback: collapse to single-slide layout regardless of count.
 * Peeks would dominate small viewports, so on narrow screens we drop them
 * and let the section-level dots strip handle navigation. */
@container anz-stories (max-width: 540px) {
    .anz-stories-carousel.anz-vc-2,
    .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 1 / 1; }
    .anz-stories-media.is-aspect-16-9 .anz-stories-carousel.anz-vc-2,
    .anz-stories-media.is-aspect-16-9 .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 16 / 9; }
    .anz-stories-media.is-aspect-4-3  .anz-stories-carousel.anz-vc-2,
    .anz-stories-media.is-aspect-4-3  .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 4 / 3; }
    .anz-stories-media.is-aspect-9-16 .anz-stories-carousel.anz-vc-2,
    .anz-stories-media.is-aspect-9-16 .anz-stories-carousel.anz-vc-3plus { aspect-ratio: 9 / 16; }
    .anz-stories-carousel.anz-vc-2 .anz-slide[data-pos="0"],
    .anz-stories-carousel.anz-vc-3plus .anz-slide[data-pos="0"] {
        transform: translateY(-50%) scale(1);
    }
    .anz-stories-carousel.anz-vc-2 .anz-slide:not([data-pos="0"]),
    .anz-stories-carousel.anz-vc-3plus .anz-slide:not([data-pos="0"]) {
        transform: translateY(-50%) scale(0);
        opacity: 0;
        pointer-events: none;
    }
}

.anz-poster {
    background: #000;
    cursor: pointer;
    border: 0;
    padding: 0;
    color: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Real <img> for SEO — fills the poster button, sits below the play
 * icon and the dark gradient overlay. */
.anz-poster .anz-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    z-index: 0;
}

.anz-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1; /* above the poster img */
}

.anz-play-icon {
    position: relative;
    z-index: 2; /* above img and gradient */
    width: clamp(44px, 7cqi, 64px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.85);
    display: grid;
    place-items: center;
    transition: transform .2s ease, background .2s ease;
}

.anz-poster:hover .anz-play-icon,
.anz-poster:focus-visible .anz-play-icon {
    transform: scale(1.06);
    background: rgba(0, 87, 191, .85);
}

.anz-play-icon svg {
    width: 40%;
    height: 40%;
    fill: #fff;
    margin-left: 6%; /* optical centering of the triangle */
}

/* Poster title overlay intentionally removed — the active title is shown
   in the bottom nav strip instead, so we don't render text on top of the
   video frame. */

/* ----- Up-next overlay ----- */

/* Wrapper is a transparent centring grid that fills the carousel — only
 * the inner card has visual weight, so peeks above/below the active video
 * are NOT darkened. z-index is above the active slide (z=10). */
.anz-advance {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    place-items: center;
    text-align: center;
    pointer-events: none; /* outside the card, clicks pass through */
}
.anz-advance.is-visible { display: grid; }

/* The actual visible "card" — sized to its content, dark bg + blur,
   pointer-events back ON so the buttons work. */
.anz-advance-inner {
    pointer-events: auto;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: min(90%, 24rem);
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .55);
}

.anz-advance-label {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: clamp(.7rem, 1.6cqi, .85rem);
    color: rgba(255,255,255,.7);
    margin-bottom: .5rem;
}

.anz-advance-title {
    font-size: clamp(1.05rem, 3cqi, 1.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.anz-advance-bar {
    width: min(220px, 60cqi);
    height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    margin: 0 auto 1rem;
    overflow: hidden;
}
.anz-advance-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--anz-eyebrow);
    border-radius: inherit;
    transform-origin: left;
    transform: scaleX(1);
}

.anz-advance-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.anz-advance-actions button {
    appearance: none;
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
    color: #fff;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.anz-advance-actions button:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.7);
}
.anz-advance-actions .anz-advance-now {
    background: var(--anz-eyebrow);
    color: #1a1a1a;
    border-color: var(--anz-eyebrow);
}
.anz-advance-actions .anz-advance-now:hover {
    background: #fff;
    border-color: #fff;
}

/* ----- Eyeline navigation -----
 * Title list is server-rendered as the FIRST child of each copy panel,
 * sitting where the per-video eyebrow used to sit. Each panel renders
 * its own copy with the matching index marked .is-active.
 *
 * Active title uses brand yellow (--anz-eyebrow); others 50% white.
 * Dots live separately, pinned to the bottom of the carousel.
 */

/* Dots pinned to the bottom-centre of the carousel container, offset 10%
 * BELOW the bottom edge so they don't overlap the bottom peek video.
 * Lives on the section's blue background between the carousel and the
 * next element. */
.anz-stories-carousel > .anz-stories-eyenav-dots {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11; /* above active slide (z:10), below advance overlay (z:20) */
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 6px 10px;
    background: rgba(0, 0, 0, .35);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.anz-eyenav-dot {
    appearance: none;
    border: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .15s ease, width .25s ease, transform .15s ease;
}
.anz-eyenav-dot:hover  { background: rgba(255, 255, 255, .85); }
.anz-eyenav-dot.is-active {
    background: var(--anz-eyebrow);
    width: 24px;
}
.anz-eyenav-dot:focus-visible {
    outline: 2px solid var(--anz-eyebrow);
    outline-offset: 3px;
}

.anz-stories-eyenav-titles {
    display: flex;
    list-style: none;
    /* !important defeats theme `ul` padding (e.g. Divi's "0 0 23px 1em") */
    padding: 0 !important;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 0 0 clamp(.5rem, 1.5vh, 1rem);
}

/* Use CSS `order` so the active title always renders FIRST visually,
 * regardless of DOM order. JS uses FLIP to animate the swap. */
.anz-stories-eyenav-titles li {
    order: 1;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .5);
    font-size: clamp(.85rem, .95vw, 1rem);
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .2s ease;
    /* JS-driven transform during FLIP — overridden inline temporarily */
    will-change: transform;
}

.anz-stories-eyenav-titles li.is-active {
    order: 0;
    color: var(--anz-eyebrow);
}

.anz-stories-eyenav-titles button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.anz-stories-eyenav-titles li:not(.is-active) button:hover {
    color: rgba(255, 255, 255, .85);
}
/* Subtle keyboard focus — yellow underline instead of a heavy outline,
 * matching the inline editorial feel of the eyeline. */
.anz-stories-eyenav-titles button:focus-visible {
    outline: none;
    text-decoration: underline;
    text-decoration-color: var(--anz-eyebrow);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ----- Mobile autoplay tap-to-play overlay ----- */
.anz-tap-hint {
    position: absolute;
    inset: auto 0 50% 0;
    z-index: 7;
    display: none;
    text-align: center;
    pointer-events: none;
}
.anz-tap-hint.is-visible { display: block; }
.anz-tap-hint span {
    display: inline-block;
    padding: .5rem .9rem;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .85rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ----- Copy column ----- */

/*
 * Each video has its own copy panel. They stack into the same CSS grid cell
 * so the column height settles to the tallest panel and switching dots does
 * not cause layout shift. Only the active panel is visible.
 */
/* Copy column: title list above + panel stack below, vertically centred
 * as a unit against the taller carousel media. */
.anz-stories-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Panel stack — panels share one grid cell so only the active one shows */
.anz-stories-panels {
    display: grid;
    grid-template-areas: "panel";
    min-height: 0;
}

.anz-stories-copy-panel {
    grid-area: panel;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
    /* Block pointer + tab access when hidden so no off-screen focus. */
    pointer-events: none;
    /* Centre content within the panel's grid cell. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anz-stories-copy-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .anz-stories-copy-panel { transition: none; }
}

/* (.anz-stories-eyebrow rule removed — the per-video eyebrow has been
 *  replaced by the eyenav-titles list rendered in the same position.) */

.anz-stories-headline {
    color: #fff;
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(.75rem, 2vh, 1.25rem);
    text-wrap: balance;
}

.anz-stories-body {
    color: rgba(255,255,255,.92);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.55;
    margin-bottom: clamp(1.25rem, 3vh, 2rem);
    max-width: 56ch;
}

.anz-stories-body p { margin: 0; }

/* CTA always stacks vertically — heading/body/link sit on top, the button
 * sits below with a clear gap. No side-by-side layout at any width.
 * justify-items:start so the button hugs its own width on the left. */
.anz-stories-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: start;
    justify-items: start;
}

.anz-stories-cta-text { min-width: 0; }

.anz-stories-cta-heading {
    color: #fff;
    font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
    font-weight: 700;
    margin: 0 0 .25rem;
    letter-spacing: .01em;
}

.anz-stories-cta-body {
    color: rgba(255,255,255,.92);
    font-size: clamp(.9rem, .85rem + .2vw, 1rem);
    margin: 0;
    line-height: 1.5;
}

.anz-stories-cta-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.anz-stories-cta-link:hover { color: var(--anz-eyebrow); }

/*
 * Mirrors the existing Divi .primary-button look so the carousel CTA
 * matches the rest of the site visually:
 *   blue bg + white border + white text + pill shape + arrow on the LEFT
 * Match the same 300ms ease transitions Divi uses for hover state.
 */
.anz-stories-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    appearance: none;
    background-color: #0057BF;
    color: #FFFFFF !important; /* defeat anchor-color cascade from theme */
    border: 1px solid #FFFFFF;
    padding: 15px 25px;
    border-radius: 50px;
    font-family: inherit;
    font-weight: 500;
    font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: top;
    transition: color 300ms ease, background-color 300ms ease, transform 200ms ease;
}

/* Arrow on the left — Font Awesome 6 fa-arrow-right (\f061), matching
 * the existing .primary-button p::before rule in style.css line 217. The
 * legacy "FontAwesome" family name is kept as a fallback for any pages
 * still serving FA 4/5. */
.anz-stories-btn::before {
    font-family: "Font Awesome 6 Free", FontAwesome;
    font-weight: 900; /* solid style in FA 6 */
    content: "\f061";
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
    /* No margin — flex gap on the parent handles spacing */
}

.anz-stories-btn:hover {
    background-color: #FFFFFF;
    color: #0057BF !important;
    transform: translateY(-1px);
}

.anz-stories-btn:focus-visible {
    outline: 2px solid var(--anz-eyebrow);
    outline-offset: 3px;
}

/* ----- Noscript fallback -----
 * Bare list of all videos for crawlers that don't run JS, and as a
 * progressive-enhancement floor. Hidden whenever JS is available. */
.anz-stories-noscript-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}
.anz-stories-noscript-list li article > * + * { margin-top: .75rem; }
.anz-stories-noscript-list h3 {
    color: #fff;
    font-size: 1.25rem;
    margin: 0;
}
.anz-stories-noscript-list img {
    max-width: 100%;
    height: auto;
    display: block;
}
.anz-stories-noscript-list iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .anz-stories-btn,
    .anz-stories-btn::after,
    .anz-slide,
    .anz-dot,
    .anz-play-icon,
    .anz-advance-bar-fill,
    .anz-stories-cta-link {
        transition: none !important;
    }
}

/* ----- Small-screen polish ----- */
@media (max-width: 540px) {
    .anz-dots-label { display: none; }
    .anz-stories-cta { text-align: left; }
    .anz-stories-btn { width: 100%; justify-content: center; }
}