/* Carousel component. Colours come from theme.css variables. */
.carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); box-shadow: var(--shadow-md); outline-offset: 3px; }
.carousel__viewport { overflow: hidden; aspect-ratio: var(--cr-ratio, 16 / 9); }
.carousel__track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .45s cubic-bezier(.22, .8, .3, 1); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; }
.carousel__track.is-dragging { transition: none; cursor: grabbing; }
.carousel__slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; }
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.carousel__caption { position: absolute; inset: auto 0 0 0; margin: 0; padding: 2.5rem 1rem 2.75rem; color: #fff; font-family: var(--font-display); font-size: 1.1rem; background: linear-gradient(to top, rgba(11, 31, 58, .85), transparent); }

.carousel__btn, .carousel__toggle { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--cream); background: rgba(11, 31, 58, .72); cursor: pointer; transition: background .15s; }
.carousel__btn { top: 50%; translate: 0 -50%; }
.carousel__btn--prev { left: .6rem; } .carousel__btn--next { right: .6rem; }
.carousel__toggle { top: .6rem; right: .6rem; }
.carousel__btn:hover, .carousel__toggle:hover { background: var(--navy); }
.carousel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel__toggle .i-play { display: none; fill: currentColor; }
.carousel.is-paused .i-play { display: block; } .carousel.is-paused .i-pause { display: none; }

.carousel__dots { position: absolute; left: 0; right: 0; bottom: .2rem; display: flex; justify-content: center; }
.carousel__dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }  /* 44px tall tap target */
.carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(11, 31, 58, .5); transition: width .2s, background .2s; }
.carousel__dot[aria-current="true"]::before { width: 22px; background: var(--gold); }

.carousel:focus-visible, .carousel button:focus-visible { outline: 3px solid var(--gold); }
.carousel.is-single .carousel__track { cursor: default; }
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }
@media (hover: none) and (pointer: coarse) { .carousel__btn { display: none; } }  /* touch devices swipe; dots remain */