/**
 * Carousel behavior runtime CSS (behaviors spec 5.4 as amended by contract
 * v1). Static plugin CSS, registered as the `lumitra-carousel` handle by
 * includes/behaviors/class-carousel.php (build copy preferred, src
 * fallback). Per-instance responsive values (--lumitra-cr-pv /
 * --lumitra-cr-gap / --lumitra-cr-peek) are emitted per breakpoint as inline
 * additions to this handle, scoped to the config-hash class
 * .lumitra-cr-{hash}; this file only CONSUMES those custom properties.
 *
 * House rule: cosmetic base rules sit in :where() (specificity 0);
 * functional rules (sizing math, drag state, no-JS fallback, reduced
 * motion, hidden semantics) keep real specificity because they must beat
 * the zero-specificity frame base and UA rules (W3 red-team lesson).
 */

:where(.lumitra-carousel) {
	position: relative;
}

/* The generated viewport clips the translated track. touch-action keeps
 * vertical page scrolling native while horizontal drag is ours. */
.lumitra-carousel__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.lumitra-carousel__track {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: var(--lumitra-cr-gap, 0px);
	transition: transform var(--lumitra-dur, 250ms) var(--lumitra-ease, ease);
}

/* will-change only while dragging (behaviors spec 5.4). */
.lumitra-carousel__track.is-dragging {
	transition: none;
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}

/* Slide sizing: perView columns + gap + peek, all from the instance custom
 * properties, so the same rule serves every breakpoint. Beats the frame
 * base (flex-direction:column stays fine inside the slide itself). */
.lumitra-carousel__slide {
	flex: 0 0
		calc(
			(
					100% - (var(--lumitra-cr-pv, 1) - 1) * var(--lumitra-cr-gap, 0px) -
						var(--lumitra-cr-peek, 0px)
				) / var(--lumitra-cr-pv, 1)
		);
	min-width: 0;
}

/* Native image drag would swallow the pointer gesture. */
:where(.lumitra-carousel__track) img {
	-webkit-user-drag: none;
}

/* Controls: unopinionated structural bases (design systems style on top). */
:where(.lumitra-carousel__toggle),
:where(.lumitra-carousel__prev),
:where(.lumitra-carousel__next) {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	inline-size: 2em;
	block-size: 2em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0.25em 0.5em 0;
	padding: 0;
}

.lumitra-carousel__prev[aria-disabled='true'],
.lumitra-carousel__next[aria-disabled='true'] {
	opacity: 0.4;
	cursor: default;
}

:where(.lumitra-carousel__prev)::before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(0.125em) rotate(45deg);
}

:where(.lumitra-carousel__next)::before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateX(-0.125em) rotate(45deg);
}

/* Play/pause glyph follows the root state class (SSR-printed, JS-synced). */
:where(.lumitra-carousel__toggle)::before {
	content: '\25B6\FE0E';
	font-size: 0.75em;
	line-height: 1;
}

.lumitra-carousel.is-playing .lumitra-carousel__toggle::before {
	content: '\275A\275A';
	font-size: 0.6em;
	letter-spacing: 0.1em;
}

/* Dots: APG tablist. */
:where(.lumitra-carousel__dots) {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	margin-top: 0.75em;
}

:where(.lumitra-carousel__dot) {
	inline-size: 0.75em;
	block-size: 0.75em;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

:where(.lumitra-carousel__dot[aria-selected='true']) {
	background: currentColor;
}

/* Author display rules must never resurrect hidden dots (W3 lesson 6). */
.lumitra-carousel__dot[hidden] {
	display: none;
}

/* Visually hidden status live region (announces slide changes). */
.lumitra-carousel__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * No-JS degradation (behaviors spec 1.3/5.4: native scroll-snap strip).
 * Scoped to `scripting: none` instead of a bare :not(.lumitra-hydrated)
 * guard so JS-enabled visitors never see a flash between SSR and module
 * hydration (panels precedent); data-wp-init still adds .lumitra-hydrated as
 * the hydration marker for tests/tooling. JS-only controls disappear; the
 * strip itself stays fully usable.
 */
@media (scripting: none) {
	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__track {
		transform: none !important;
		transition: none;
	}

	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__slide {
		scroll-snap-align: start;
	}

	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__toggle,
	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__prev,
	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__next,
	.lumitra-carousel:not(.lumitra-hydrated) .lumitra-carousel__dots {
		display: none;
	}
}

/*
 * Reduced motion (behaviors spec 2.3): 1ms, NOT 0, so transitionend still
 * fires for anything awaiting the settle. Autoplay is separately forced
 * off in the store (R6 pause matrix).
 */
@media (prefers-reduced-motion: reduce) {
	.lumitra-carousel__track {
		transition-duration: 1ms !important;
	}
}