/**
 * Responsive Video Slider — frontend stylesheet
 * Asset handle: rvs-frontend
 *
 * BEM-ish under `.rvs`. All theming happens through `--rvs-*` custom
 * properties. JS toggles `.rvs--portrait` / `.rvs--landscape` and
 * `.rvs--marquee` on the root element; it also raises the playing video,
 * marks marquee clones inert/aria-hidden, and populates the dots.
 *
 * The HTML this styles is emitted verbatim by RVS_Renderer (BUILD_SPEC §6);
 * the selectors below depend on that structure byte-for-byte.
 */

/* -------------------------------------------------------------------------
 * Custom-property surface (documented defaults — BUILD_SPEC §7)
 * ---------------------------------------------------------------------- */
.rvs {
	--rvs-gap: 16px;
	--rvs-radius: 8px;
	--rvs-arrow-bg: rgba(0, 0, 0, .5);
	--rvs-arrow-color: #fff;
	--rvs-arrow-size: 44px;
	--rvs-dot-color: rgba(0, 0, 0, .3);
	--rvs-dot-active: #111;
	--rvs-aspect-landscape: 16/9;
	--rvs-aspect-portrait: 9/16;
	--rvs-transition: 300ms ease;

	/* Liquid-glass control surface (play + prev/next buttons).
	   --rvs-arrow-bg stays the opaque fallback when backdrop-filter is
	   unsupported or the viewer prefers reduced transparency. */
	--rvs-glass-tint: rgba(255, 255, 255, .14);
	--rvs-glass-border: rgba(255, 255, 255, .4);
	--rvs-glass-blur: 14px;

	position: relative;
	box-sizing: border-box;
}

.rvs *,
.rvs *::before,
.rvs *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Viewport + track
 * ---------------------------------------------------------------------- */
.rvs__viewport {
	overflow: hidden;
}

.rvs__track {
	display: flex;
	gap: var(--rvs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	transition: transform var(--rvs-transition);
	touch-action: pan-y; /* JS owns horizontal drag */
}

/* Width is computed by JS from per-view + gap. */
.rvs__slide {
	flex: 0 0 auto;
	position: relative;
}

/* -------------------------------------------------------------------------
 * Media, poster + video layering
 * ---------------------------------------------------------------------- */
.rvs__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--rvs-radius);
	aspect-ratio: var(--rvs-aspect-landscape);
	background: #000;
}

.rvs.rvs--portrait .rvs__media {
	aspect-ratio: var(--rvs-aspect-portrait);
}

.rvs__poster,
.rvs__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rvs__poster {
	z-index: 1;
}

.rvs__video {
	z-index: 0; /* video paints under the poster... */
}

.rvs__video.is-playing {
	z-index: 2; /* ...JS raises the video once it is actually playing */
}

/* Full-cover click target sits above everything inside the media. */
.rvs__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
}

.rvs__link:focus-visible {
	outline: 2px solid var(--rvs-dot-active);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * Caption
 * ---------------------------------------------------------------------- */
.rvs__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.rvs__caption-title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* -------------------------------------------------------------------------
 * Nav buttons
 * ---------------------------------------------------------------------- */
/* Shared liquid-glass surface for the circular controls (arrows + toggle).
   No images, no pseudo-elements: a layered specular gradient over a
   translucent tint, blurred by backdrop-filter and lit with inset shadows —
   GPU-composited and cheap to paint. */
.rvs__nav,
.rvs__toggle {
	position: absolute;
	z-index: 4;
	width: var(--rvs-arrow-size);
	height: var(--rvs-arrow-size);
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	border: 1px solid var(--rvs-glass-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--rvs-arrow-color);
	background:
		radial-gradient(115% 85% at 30% 12%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%),
		var(--rvs-glass-tint);
	-webkit-backdrop-filter: blur(var(--rvs-glass-blur)) saturate(180%);
	backdrop-filter: blur(var(--rvs-glass-blur)) saturate(180%);
	box-shadow:
		0 6px 18px rgba(0, 0, 0, .22),
		0 1px 2px rgba(0, 0, 0, .16),
		inset 0 1px 1px rgba(255, 255, 255, .6),
		inset 0 -1px 2px rgba(0, 0, 0, .12);
	transition:
		transform var(--rvs-transition),
		background var(--rvs-transition),
		box-shadow var(--rvs-transition),
		opacity var(--rvs-transition);
	-webkit-appearance: none;
	appearance: none;
}

.rvs__nav svg,
.rvs__toggle svg {
	pointer-events: none;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4)); /* keep the glyph legible on bright glass */
}

.rvs__nav svg {
	width: 45%;
	height: 45%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Vertical centring for the side arrows only (the toggle anchors top-left,
   so it must not inherit the translate). */
.rvs__nav {
	top: 50%;
	transform: translateY(-50%);
}

.rvs__nav--prev {
	left: 8px;
}

.rvs__nav--next {
	right: 8px;
}

.rvs__nav:hover,
.rvs__nav:focus-visible {
	background:
		radial-gradient(115% 85% at 30% 12%, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, .24);
	box-shadow:
		0 10px 24px rgba(0, 0, 0, .26),
		0 2px 4px rgba(0, 0, 0, .18),
		inset 0 1px 1px rgba(255, 255, 255, .7),
		inset 0 -1px 2px rgba(0, 0, 0, .12);
	transform: translateY(-50%) scale(1.06);
}

.rvs__nav:focus-visible,
.rvs__toggle:focus-visible {
	outline: 2px solid var(--rvs-arrow-color);
	outline-offset: 2px;
}

.rvs__nav[disabled],
.rvs__nav[hidden] {
	opacity: 0;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Dots (role="group"; JS builds one button per page)
 * ---------------------------------------------------------------------- */
.rvs__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}

.rvs__dots:empty {
	display: none;
}

.rvs__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--rvs-dot-color);
	cursor: pointer;
	transition: background var(--rvs-transition), transform var(--rvs-transition);
	-webkit-appearance: none;
	appearance: none;
}

.rvs__dot:hover,
.rvs__dot:focus-visible {
	transform: scale(1.2);
}

.rvs__dot:focus-visible {
	outline: 2px solid var(--rvs-dot-active);
	outline-offset: 2px;
}

.rvs__dot[aria-current="true"] {
	background: var(--rvs-dot-active);
}

/* -------------------------------------------------------------------------
 * Rotation toggle — first in DOM (§2.6), repositioned visually top-left
 * ---------------------------------------------------------------------- */
.rvs__toggle {
	/* Base surface + focus outline come from the shared .rvs__nav, .rvs__toggle rule. */
	top: 8px;
	left: 8px;
}

.rvs__toggle svg {
	width: 45%;
	height: 45%;
	fill: currentColor;
}

.rvs__toggle:hover,
.rvs__toggle:focus-visible {
	background:
		radial-gradient(115% 85% at 30% 12%, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, .24);
	box-shadow:
		0 10px 24px rgba(0, 0, 0, .26),
		0 2px 4px rgba(0, 0, 0, .18),
		inset 0 1px 1px rgba(255, 255, 255, .7),
		inset 0 -1px 2px rgba(0, 0, 0, .12);
	transform: scale(1.06);
}

/* -------------------------------------------------------------------------
 * Playback progress bar — very thin liquid-glass sliver at the video's foot.
 * Sits above the caption; JS scales the fill from timeupdate and toggles
 * `.is-active` while its slide's video is playing.
 * ---------------------------------------------------------------------- */
.rvs__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 5;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	background: rgba(255, 255, 255, .14);
	transition: opacity .35s ease;
}

.rvs__progress.is-active {
	opacity: 1;
	-webkit-backdrop-filter: blur(4px) saturate(140%);
	backdrop-filter: blur(4px) saturate(140%);
}

.rvs__progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(255, 255, 255, .75), #fff);
	box-shadow: 0 0 6px rgba(255, 255, 255, .45);
	will-change: transform;
}

/* -------------------------------------------------------------------------
 * Marquee state
 * ---------------------------------------------------------------------- */
.rvs--marquee .rvs__track {
	transition: none; /* rAF owns the transform; no CSS easing */
}

/* Clones are marked inert + aria-hidden by JS; keep them out of interaction. */
.rvs [inert],
.rvs [aria-hidden="true"] {
	pointer-events: none;
	user-select: none;
}

/* -------------------------------------------------------------------------
 * RTL — mirror nav horizontal anchoring
 * ---------------------------------------------------------------------- */
[dir="rtl"] .rvs__nav--prev {
	left: auto;
	right: 8px;
}

[dir="rtl"] .rvs__nav--next {
	right: auto;
	left: 8px;
}

[dir="rtl"] .rvs__toggle {
	left: auto;
	right: 8px;
}

[dir="rtl"] .rvs__progress-fill {
	transform-origin: right center;
}

/* -------------------------------------------------------------------------
 * Liquid-glass graceful degradation
 * ---------------------------------------------------------------------- */

/* No backdrop-filter (older engines): fall back to the opaque arrow colour so
   the controls stay legible instead of near-invisible over bright video. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.rvs__nav,
	.rvs__toggle {
		background: var(--rvs-arrow-bg);
	}

	.rvs__progress {
		background: rgba(0, 0, 0, .35);
	}
}

/* Viewer prefers reduced transparency: drop the blur + translucency entirely. */
@media (prefers-reduced-transparency: reduce) {
	.rvs__nav,
	.rvs__toggle {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--rvs-arrow-bg);
	}

	.rvs__progress.is-active {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(0, 0, 0, .4);
	}
}

/* -------------------------------------------------------------------------
 * Classic controls — opt-out of the liquid-glass look (Control style: Classic).
 * Restores the original flat, opaque circular buttons + a plain progress bar.
 * ---------------------------------------------------------------------- */
.rvs--controls-classic .rvs__nav,
.rvs--controls-classic .rvs__toggle {
	border: 0;
	background: var(--rvs-arrow-bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

.rvs--controls-classic .rvs__nav svg,
.rvs--controls-classic .rvs__toggle svg {
	filter: none;
}

.rvs--controls-classic .rvs__nav:hover,
.rvs--controls-classic .rvs__nav:focus-visible {
	background: var(--rvs-arrow-bg);
	box-shadow: none;
	filter: brightness(1.15);
	transform: translateY(-50%);
}

.rvs--controls-classic .rvs__toggle:hover,
.rvs--controls-classic .rvs__toggle:focus-visible {
	background: var(--rvs-arrow-bg);
	box-shadow: none;
	filter: brightness(1.15);
	transform: none;
}

.rvs--controls-classic .rvs__progress {
	background: rgba(0, 0, 0, .25);
}

.rvs--controls-classic .rvs__progress.is-active {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* -------------------------------------------------------------------------
 * Accessibility helper — matches core WP class if the theme lacks it
 * ---------------------------------------------------------------------- */
.rvs .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* -------------------------------------------------------------------------
 * Reduced motion — CSS half of the policy (JS halts autoplay/marquee/video)
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rvs__track {
		transition: none;
	}

	.rvs__nav,
	.rvs__dot,
	.rvs__toggle {
		transition: none;
	}
}