/**
 * [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;
}

/* Equal columns are sized to the requested per-view count, not to the content,
   so every slide is as wide as the widest. Left-aligned, a short label left 74px
   of dead space before the next divider. Centring splits the leftover evenly, so
   a short slide reads as deliberate rather than unfinished.

   Auto-width slides are already exactly their content, so they are excluded.
   Absolutely positioned children (Flatsome's .is-border divider) are unaffected. */
.kw-carousel:not(.kw-carousel--auto-width) .kw-carousel__track > * {
	justify-content: center;
}

/* 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;
}

/* Uniform strip: item_height option crops all media to one height so
   mixed aspect ratios can't produce a ragged marquee. */
.kw-carousel--uniform .kw-carousel__track > * img,
.kw-carousel--uniform .kw-carousel__track > * video {
	height: var(--kw-c-item-height, 220px);
	width: 100%;
	object-fit: cover;
}

@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;
}

/* ── UX Builder preview: static editable layout ─────────────────────
   The marquee JS bails in the builder iframe; without it the nowrap
   track clipped every child past the first viewport width (overflow
   hidden, no scroll) — selected children were invisible. Wrap instead:
   every child sits at its configured per-view width, all rows visible,
   all children clickable. */
.kw-carousel--builder .kw-carousel__viewport {
	overflow: visible;
}

.kw-carousel--builder .kw-carousel__track {
	flex-wrap: wrap;
	transform: none !important;
}

.kw-carousel--builder .kw-carousel__track > * {
	flex: 0 0 auto;
	width: calc((100% - (var(--kw-c-visible, 4) - 1) * var(--kw-c-gap, 20px)) / var(--kw-c-visible, 4));
	max-width: 100%;
}

/* Builder + one item per view: behave like [ux_slider] — only the current
   child renders. "Current" is the child UX Builder marked uxb-selected (or
   the one containing the selection); with nothing selected inside the
   carousel, the first child stands in. Selecting children in the toolbar
   children-selector flips the visible item.

   Only NON-current children are hidden — the current one keeps whatever
   display its own shortcode defines (e.g. [kw_container]'s flex). The
   !important is required: children like [kw_container] style themselves
   through per-instance #id rules, whose specificity beats any class
   selector; without it the hide never wins (computed display stayed flex). */
.kw-carousel--builder.kw-carousel--single .kw-carousel__track > * {
	width: 100%;
}

/* Something inside the carousel is selected → hide every child that is not
   the selected one and does not contain the selection. */
.kw-carousel--builder.kw-carousel--single .kw-carousel__track:has(.uxb-selected) > :not(.uxb-selected):not(:has(.uxb-selected)) {
	display: none !important;
}

/* Nothing selected inside → first child stands in; hide the rest. */
.kw-carousel--builder.kw-carousel--single .kw-carousel__track:not(:has(.uxb-selected)) > :not(:first-child) {
	display: none !important;
}

/* Fit-content mode — each item is as wide as its own text. The JS also clears
   the inline pixel widths it would otherwise pin on each slide. */
.kw-carousel--auto-width .kw-carousel__track > * {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}