/**
 * Generic carousel (moved from hos-donate.css, 23 Sept 2026).
 * Used by Donate and Our services. JS: js/hos-carousel.js targets [data-carousel].
 * Enqueued by inc/hos-carousel.php on the pages that need it.
 */
.hos-carousel__viewport { overflow: hidden; }
.hos-carousel__track { display: flex; align-items: stretch; transition: transform 0.45s ease; }
.hos-carousel__slide { flex: 0 0 100%; display: flex; justify-content: center; padding: var(--ds-space-xs); }
.hos-carousel__slide > * { width: 100%; max-width: 760px; }
.hos-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-md); margin-top: var(--ds-space-lg); }
.hos-carousel__dots { display: flex; gap: 0; }
/* 24px tap target (WCAG 2.5.8) around an 11px visual dot */
.hos-carousel__dot { position: relative; width: 24px; height: 24px; border-radius: var(--ds-radius-pill); border: none; background: transparent; cursor: pointer; padding: 0; }
.hos-carousel__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: var(--ds-radius-pill); background: var(--ds-color-muted); }
.hos-carousel__dot:focus-visible { outline: 2px solid var(--ds-color-red-dark); outline-offset: 0; }
.hos-carousel__dot[aria-current="true"]::before { background: var(--ds-color-red-core); }
.fl-ds-page .hos-carousel__dot { width: 24px !important; height: 24px !important; border: 0 !important; border-radius: var(--ds-radius-pill) !important; background: transparent !important; min-height: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fl-ds-page .hos-carousel__dot[aria-current="true"] { background: transparent !important; }
.hos-carousel.is-single .hos-carousel__controls { display: none; }