/**
 * cg/video-testimonial-slider — block styles.
 *
 * Colors use the page-level theme tokens (var(--color-theme-*)) so the section
 * inherits whatever color theme the page is set to. Splide layout/transform
 * rules come from the vendored splide-core.min.css; this file only themes it.
 */

.cg-vts {
	background: var(--color-theme-900, #1b2a4a);
	color: var(--color-theme-100, #f5e1e1);
	padding-block: 5rem;
	overflow: hidden;
}

/* "Grey (theme 700)" background band — matches the Tool Library slider. */
.cg-vts--bg-grey {
	background: var(--color-theme-700, #2c3e63);
}

/* The headline sits on the page content column (same frame formula as the
   hero / nav: width min(100% − 2·gutter, content-max), centred) so it
   left-aligns with the rest of the page content at every width. The previous
   cap + padding-inline DOUBLE-inset it — up to 80px right of the column. The
   slider track itself is NOT capped: the band renders alignfull and the
   carousel bleeds to the viewport edges (Figma 4169-5732), with neighbouring
   slides peeking in from each side. */
.cg-vts__header {
	width: min(100% - 2 * var(--cg-gutter, 1.5rem), var(--cg-content-max, 1352px));
	margin-inline: auto;
	margin-bottom: clamp(3rem, 7vw, 6.375rem); /* 102px — Figma header→row gap */
}

.cg-vts__headline {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-weight: 400; /* Martina Regular (Figma Header/Martina 56) */
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.15;
	letter-spacing: -0.2px;
}

/* ----- Slides ----- */

.cg-vts__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.25rem;
}

.cg-vts__thumb {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	aspect-ratio: 749 / 480; /* Figma slide: 749×480 */
	background: var(--color-theme-700, #2c3e63);
	cursor: pointer;
	overflow: hidden;
}

.cg-vts__thumb--static {
	cursor: default;
}

.cg-vts__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cg-vts__play {
	/* Bottom-right of the thumbnail, per the Figma design. */
	position: absolute;
	right: 1.75rem;
	bottom: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	transition: background 0.2s ease;
}

.cg-vts__thumb:hover .cg-vts__play,
.cg-vts__thumb:focus-visible .cg-vts__play {
	background: rgba(0, 0, 0, 0.72);
}

.cg-vts__play-icon {
	width: 2rem;
	height: 2rem;
}

/* ----- Quote ----- */

.cg-vts__quote {
	margin: 0;
	max-width: 38rem;
	padding-inline: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-align: center;
}

.cg-vts__quote-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.25;
}

.cg-vts__quote-cite {
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--color-theme-400, #be8787);
}

/* ----- Single layout -----
   One centered video with the same quote figure as a slide, no carousel.
   Reuses .cg-vts__slide, .cg-vts__thumb, and .cg-vts__quote; slider.js skips
   Splide when there is no .splide element. */

.cg-vts--single .cg-vts__single {
	/* Same frame approach as the header: the gutter comes out of the width, so
	   the video is a true 720px on desktop instead of 720 minus padding. */
	width: min(100% - 2 * var(--cg-gutter, 1.5rem), 720px);
	margin-inline: auto;
}

.cg-vts--single .cg-vts__slide {
	gap: 2rem;
}

/* ----- Center-mode emphasis -----
   Splide adds .is-initialized to the root and .is-active to the centered
   slide once it mounts. Both emphasis rules are gated on .is-initialized so
   that before mount — always in the editor, and briefly on the frontend
   before slider.js runs — every slide stays full-opacity with its quote
   shown (no flash, no all-dimmed editor preview). Non-active slides then dim
   and hide their quote; the quote keeps its box (visibility, not display) so
   all slides stay the same height and the track does not jump. */

.cg-vts .splide__slide {
	transition: opacity 0.3s ease;
}

.cg-vts .splide.is-initialized .splide__slide:not(.is-active) {
	opacity: 0.6;
}

.cg-vts .splide.is-initialized .splide__slide:not(.is-active) .cg-vts__quote {
	visibility: hidden;
}

/* ----- Arrows -----
   The vendored splide-core.min.css provides track/slide layout but NO arrow
   positioning (that lives in Splide's full theme CSS, which we don't load), so
   without these rules the auto-generated arrows fall back to static flow and
   stack ABOVE the carousel. We make the arrows container an overlay (so it
   reserves no vertical space) and position circular arrow buttons on the left/
   right edges, vertically centred on the video (the quote sits below it). */

.cg-vts .splide {
	position: relative;
}

.cg-vts .splide__arrows {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.cg-vts .splide__arrow {
	position: absolute;
	top: 37%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.2s ease;
}

.cg-vts .splide__arrow--prev {
	left: clamp(0.5rem, 3vw, 3rem);
}

.cg-vts .splide__arrow--next {
	right: clamp(0.5rem, 3vw, 3rem);
}

/* splide-core ships one right-pointing arrow SVG and relies on the full theme
   CSS to mirror the prev arrow; we don't load that, so flip it ourselves. */
.cg-vts .splide__arrow--prev svg {
	transform: scaleX(-1);
}

.cg-vts .splide__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: #fff;
}

.cg-vts .splide__arrow:hover:not(:disabled) {
	background: var(--color-theme-accent, rgba(0, 0, 0, 0.72));
}

.cg-vts .splide__arrow:disabled {
	opacity: 0.3;
}

@media (max-width: 600px) {
	/* On phones the video is near full-width; rely on swipe + peeking slides. */
	.cg-vts .splide__arrows {
		display: none;
	}
}

/* ----- Modal ----- */

.cg-vts__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cg-vts__modal[hidden] {
	display: none;
}

.cg-vts__modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.cg-vts__modal-dialog {
	position: relative;
	width: min(92vw, 1100px);
}

.cg-vts__modal-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.cg-vts__modal-video iframe,
.cg-vts__modal-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cg-vts__modal-close {
	position: absolute;
	top: -3rem;
	right: 0;
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
}

.cg-vts__modal-close-icon {
	width: 1.75rem;
	height: 1.75rem;
}

body.cg-vts-modal-open {
	overflow: hidden;
}

/* ----- Editor-only empty state ----- */

.cg-vts__empty {
	padding: 2rem;
	text-align: center;
	font-style: italic;
}