/**
 * [kw-carousel] — continuous-marquee carousel.
 *
 * Layout-only stylesheet. Slide widths AND the marquee translation are
 * driven by JS (rAF) because:
 *   - CSS container queries didn't hold up across all environments —
 *     `ux_image` and friends impose natural widths that won the layout.
 *   - CSS @keyframes don't recover cleanly from tab-hidden / `:hover`
 *     state across alt-tab.
 *
 * Custom properties set inline on `.kw-carousel`:
 *   --kw-c-visible-d   desktop slides-per-view
 *   --kw-c-visible-t   tablet  slides-per-view (≤ 1148px)
 *   --kw-c-visible-m   mobile  slides-per-view (≤ 848px)
 *   --kw-c-gap         gap between items in px
 *   --kw-c-speed       ms per item (JS uses this to derive total duration)
 */

.kw-carousel {
	position: relative;
	overflow: hidden;
	--kw-c-visible: var(--kw-c-visible-d, 4);
}

@media (max-width: 1148px) {
	.kw-carousel { --kw-c-visible: var(--kw-c-visible-t, 3); }
}
@media (max-width: 848px) {
	.kw-carousel { --kw-c-visible: var(--kw-c-visible-m, 2); }
}

.kw-carousel__viewport {
	overflow: hidden;
}

.kw-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--kw-c-gap, 20px);
	will-change: transform;
}

/* JS will set an explicit pixel width on each slide. Until then, prevent
   flex children from collapsing or stretching unpredictably. */
.kw-carousel__track > * {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 0;
}

/* Constrain whatever the slide contains (often an [ux_image] or banner)
   so it can't blow past the slide's pixel width. */
.kw-carousel__track > * img,
.kw-carousel__track > * video {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.kw-carousel__track { transform: none !important; }
}

/* ── UX Builder preview ─────────────────────────────────────────────────
 * The JS bails inside the builder so the children stay laid out in their
 * natural row. Reset any transform/width inherited from prior state. */
.ux-builder .kw-carousel__track {
	transform: none !important;
}
.ux-builder .kw-carousel__track > * {
	width: auto !important;
}