/* ─── Carousel ─────────────────────────────────────────────────────────
   Core accessible carousel (one slide per view): prev/next + arrow keys,
   aria-roledescription, per-slide labels, inactive slides inert. Optional
   opt-in autoplay (data-hzo-carousel-autoplay) pauses on hover/focus and is
   disabled under reduced-motion; it needs a [data-hzo-carousel-toggle] pause
   button (WCAG 2.2.2). Touch-swipe, infinite-loop (manual), and dot indicators
   are deferred to Wave E.1. Wired by the carousel IIFE in main.js. Markup
   contract: component-patterns §38. Reuses existing tokens; zero new tokens.

   Phase-2 widget: the option contract (per-view/gap/pagination/effect/mousewheel/
   …) lives in carousel.js + carousel.php. The variant sheets are @imported here
   so the component loader (which enqueues only carousel.css) pulls them on demand. */
@import './carousel-crossfade.css?ver=1787769613';

.hzo-carousel { position: relative; }
.hzo-carousel__viewport { overflow: hidden; touch-action: pan-y; }  /* swipe horiz, keep vertical page scroll */
.hzo-carousel__track {
    display: flex;
    gap: var(--hzo-cv-gap, 0px);   /* px between slides; JS sets --hzo-cv-gap */
    transition: transform var(--hzo-cv-speed, var(--transition-base)) ease;
}
/* Per-view sizing: JS sets --hzo-cv-per-view / --hzo-cv-gap; the no-JS fallback
   (1 / 0px) resolves to a single 100%-wide slide, so markup still degrades to a
   plain horizontal scroller. */
.hzo-carousel__slide {
    flex: 0 0 calc((100% - (var(--hzo-cv-per-view, 1) - 1) * var(--hzo-cv-gap, 0px)) / var(--hzo-cv-per-view, 1));
    min-width: 0;
}

.hzo-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface, #fff);
    color: var(--text-heading);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 1;
    transition: background var(--transition-base) ease;
}
.hzo-carousel__btn:hover { background: var(--bg-alt); }
.hzo-carousel__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hzo-carousel__btn--prev { left: 8px; }
.hzo-carousel__btn--next { right: 8px; }
.hzo-carousel__btn[disabled] { opacity: 0.4; cursor: default; box-shadow: var(--shadow-sm); }
.hzo-carousel__btn > svg { width: 22px; height: 22px; display: block; }

.hzo-carousel__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    padding: 6px var(--space-smd);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface, #fff);
    color: var(--text-body);
    font-size: var(--fs-75);
    cursor: pointer;
}
.hzo-carousel__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Dot indicators (generated by the carousel IIFE). 24px hit area, 10px visual dot. */
.hzo-carousel__dots { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-md); }
.hzo-carousel__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.hzo-carousel__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--carousel-dot-color, var(--border));
    transition: background var(--transition-base) ease, transform var(--transition-base) ease;
}
.hzo-carousel__dot[aria-current="true"]::before { background: var(--carousel-dot-active-color, var(--brand)); transform: scale(1.3); }
.hzo-carousel__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: 50%; }

/* Progress-ring dots — the active dot draws a circular countdown matching the
   autoplay interval (opt-in: data-hzo-carousel-ring-dots + autoplay; the JS
   injects the SVG and sets --carousel-ring-duration from the autoplay ms).
   The animation is keyed to [aria-current] so it restarts naturally on every
   slide change; .is-paused (hover/focus/toggle) freezes it mid-draw. Ring
   color follows the active dot color. Hidden entirely under reduced motion
   (autoplay is off there anyway). */
.hzo-carousel__dots--ring .hzo-carousel__dot { position: relative; }
.hzo-carousel__dot-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.hzo-carousel__dot-ring circle {
    fill: none;
    stroke: var(--carousel-ring-color, var(--carousel-dot-active-color, var(--brand)));
    stroke-width: 2;
    stroke-dasharray: 62.83;   /* 2πr, r=10 in the 28×28 viewBox */
    stroke-dashoffset: 62.83;
    stroke-linecap: round;
}
.hzo-carousel__dot[aria-current="true"] .hzo-carousel__dot-ring circle {
    animation: hzo-ring-progress var(--carousel-ring-duration, 6000ms) linear forwards;
}
.hzo-carousel__dots--ring.is-paused .hzo-carousel__dot-ring circle { animation-play-state: paused; }
@keyframes hzo-ring-progress { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hzo-carousel__dot-ring { display: none; }
}

/* Fraction pagination ("3 / 8") — a compact status line under the deck. */
.hzo-carousel__fraction {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Progress-bar pagination — a track that fills as you advance. */
.hzo-carousel__progress {
    margin-top: var(--space-md);
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--carousel-dot-color, var(--border));
    overflow: hidden;
}
.hzo-carousel__progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--carousel-dot-active-color, var(--brand));
    transition: transform var(--transition-base) ease;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-carousel__track,
    .hzo-carousel__btn,
    .hzo-carousel__progress-bar,
    .hzo-carousel__dot::before { transition: none; }
}