/* Figma-matched direct-video slider. */
.crunchr-video-slider {
	--video-card-width: min(76.4vw, 1100px, calc(var(--slider-viewport-width, 100vw) - 200px));
	--video-card-gap: 16px;
	--video-peek-width: max(44px, calc((var(--slider-viewport-width, 100vw) - var(--video-card-width)) / 2 - var(--video-card-gap)));
	width: 100%;
	padding: 12px 0 28px;
	overflow: hidden;
}

.crunchr-video-slider__viewport {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: visible;
	touch-action: pan-y;
	cursor: grab;
}

.crunchr-video-slider.is-dragging .crunchr-video-slider__viewport { cursor: grabbing; }

.crunchr-video-slider__track {
	position: relative;
	left: 50%;
	display: flex;
	gap: var(--video-card-gap);
	transform: translateX(calc(-1 * (var(--video-card-width) / 2) - (var(--active-slide, 0) * (var(--video-card-width) + var(--video-card-gap))) + var(--drag-offset, 0px)));
	transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.crunchr-video-slider.is-dragging .crunchr-video-slider__track { transition: none; }
.crunchr-video-slider__track.is-snapping { transition: none; }

.crunchr-video-slide {
	position: relative;
	flex: 0 0 var(--video-card-width);
	aspect-ratio: 1100 / 620;
	height: var(--video-card-height, auto);
	min-width: 0;
	overflow: hidden;
	background: #151d2b;
	border-radius: 16px;
	box-shadow: inset 0 1px rgba(255,255,255,.25);
	user-select: none;
}

.crunchr-video-slide__video,
.crunchr-video-slide__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.crunchr-video-slide__shade {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 52% 43%, rgba(21,29,43,.2), rgba(21,29,43,.62));
	transition: opacity 200ms ease;
	pointer-events: none;
}

.crunchr-video-slide__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(28px, 4.4vw, 50px) clamp(28px, 3.7vw, 40px);
	color: #fff;
	transition: opacity 200ms ease, visibility 200ms ease;
	pointer-events: none;
}

.crunchr-video-slide__logo {
	width: auto;
	height: clamp(18px, 2vw, 24px);
	max-width: 160px;
	object-fit: contain;
	object-position: left center;
}

.crunchr-video-slide__intro {
	width: min(35%, 342px);
	margin: auto 0 clamp(36px, 5vw, 65px);
	font-size: clamp(var(--wp--preset--font-size--body), 1.78vw, var(--wp--preset--font-size--h-5));
	font-weight: 500;
	line-height: 1.2;
}

.crunchr-video-slide__person { display: flex; flex-direction: column; line-height: 1.2; }
.crunchr-video-slide__person strong { font-size: var(--wp--preset--font-size--body-small); font-weight: 500; }
.crunchr-video-slide__person span { margin-top: 3px; font-size: var(--wp--preset--font-size--micro); }

button.crunchr-video-slide__play,
.crunchr-video-slide__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 63px;
	height: 63px;
	padding: 0;
	place-items: center;
	color: #fff;
	font: inherit;
	font-size: 0;
	line-height: 1;
	background: rgba(255,255,255,.42);
	border: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(8px);
	contain: layout style paint;
	cursor: pointer;
	transition: transform 180ms ease, opacity 180ms ease;
}

.crunchr-video-slide__play::before {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid currentColor;
	content: "";
	transform: translateX(2px);
}

.crunchr-video-slide__play span { display: none; }
.crunchr-video-slider .crunchr-video-slide__play {
	border-radius: 63px;
	background: rgba(255,255,255,.28);
	-webkit-backdrop-filter: blur(8.199999809265137px);
	backdrop-filter: blur(8.199999809265137px);
}
.crunchr-video-slider .crunchr-video-slide__play::before { display: none; }
.crunchr-video-slider .crunchr-video-slide__play svg { display: block; width: 63px; height: 63px; flex: 0 0 63px; }
.crunchr-video-slider .crunchr-video-slide__play path { transform: scale(.86); transform-origin: 31.5px 31.5px; }
button.crunchr-video-slide__play:hover { transform: translate(-50%, -50%) scale(1.06); }
button.crunchr-video-slide__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.crunchr-video-slide.is-playing .crunchr-video-slide__overlay,
.crunchr-video-slide.is-playing .crunchr-video-slide__shade,
.crunchr-video-slide.is-playing .crunchr-video-slide__play { opacity: 0; visibility: hidden; pointer-events: none; }

.crunchr-video-slider__nav {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 15px;
	margin: clamp(22px, 2.8vw, 40px) auto 0;
	pointer-events: auto;
}

.crunchr-video-slider__nav button {
	width: clamp(52px, 10.42vw, 150px);
	height: 4px;
	padding: 0;
	background: #4b5567;
	border: 0;
	border-radius: 78px;
	cursor: pointer;
	touch-action: manipulation;
	pointer-events: auto;
}

.crunchr-video-slider__nav button.is-active { background: #fff; }
.crunchr-video-slider__nav button:focus-visible { outline: 2px solid #151d2b; outline-offset: 5px; }

.editor-styles-wrapper .crunchr-video-slider.is-editor { overflow: visible; }
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slider__track { left: 0; display: grid; transform: none; }
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slide { width: 100%; user-select: text; }
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slide__overlay { z-index: 2; pointer-events: auto; }
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slide__play { z-index: 1; pointer-events: none; }
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slide__intro,
.editor-styles-wrapper .crunchr-video-slider.is-editor .crunchr-video-slide__person { cursor: text; }

@media (min-width: 783px) {
	.crunchr-video-slider__viewport { cursor: default; }
	.crunchr-video-slider .crunchr-video-slide:is(.is-previous, .is-next) { cursor: pointer; }
	.crunchr-video-slider .crunchr-video-slide.is-previous {
		clip-path: inset(0 0 0 calc(100% - var(--video-peek-width)) round 16px);
	}
	.crunchr-video-slider .crunchr-video-slide.is-next {
		clip-path: inset(0 calc(100% - var(--video-peek-width)) 0 0 round 16px);
	}
	.crunchr-video-slide__peek-poster {
		position: absolute;
		top: 0;
		bottom: 0;
		display: none;
		width: var(--video-peek-width);
		background-position: center;
		background-size: cover;
		border-radius: 16px;
		z-index: 1;
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-previous .crunchr-video-slide__peek-poster { right: 0; display: block; }
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-next .crunchr-video-slide__peek-poster { left: 0; display: block; }
	.crunchr-video-slider.is-initialized .crunchr-video-slide:is(.is-previous, .is-next)::after {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--video-peek-width);
		background: rgba(21,29,43,.25);
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(15px);
		border-radius: 16px;
		z-index: 2;
		content: "";
		pointer-events: none;
		contain: layout style paint;
		transform: translateZ(0);
		transition: background-color 180ms ease, -webkit-backdrop-filter 180ms ease, backdrop-filter 180ms ease;
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-previous::after { right: 0; }
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-next::after { left: 0; }
	.crunchr-video-slider.is-initialized .crunchr-video-slide:is(.is-previous, .is-next):hover::after {
		background: rgba(21,29,43,.16);
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide:is(.is-previous, .is-next) .crunchr-video-slide__overlay {
		z-index: 3;
		padding: clamp(28px, 4.4vw, 50px) 16px;
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide:is(.is-previous, .is-next) .crunchr-video-slide__intro,
	.crunchr-video-slider.is-initialized .crunchr-video-slide:is(.is-previous, .is-next) .crunchr-video-slide__person {
		display: none;
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-previous .crunchr-video-slide__logo {
		align-self: flex-end;
		width: calc(var(--video-peek-width) - 32px);
		max-width: none;
		object-position: right center;
	}
	.crunchr-video-slider.is-initialized .crunchr-video-slide.is-next .crunchr-video-slide__logo {
		align-self: flex-start;
		width: calc(var(--video-peek-width) - 32px);
		max-width: none;
		object-position: left center;
	}
}

@media (max-width: 782px) {
	.crunchr-video-slider { --video-card-width: var(--slider-viewport-width, 100%); --video-card-gap: 0px; padding-inline: 0; }
	.crunchr-video-slider__viewport { overflow: hidden; }
	.crunchr-video-slider__track { left: 0; transform: translateX(calc(-1 * var(--active-slide, 0) * var(--slider-viewport-width, 100vw) + var(--drag-offset, 0px))); }
	.crunchr-video-slide { border-radius: 12px; }
	.crunchr-video-slide__overlay { padding: 24px; }
	.crunchr-video-slider__nav { width: 100%; padding: 0 16px; }
	.crunchr-video-slider__nav button { flex: 1; width: auto; }
}

@media (max-width: 1000px) {
	.crunchr-video-slide__intro { width: min(80%, 330px); margin-bottom: 24px; font-size: var(--wp--preset--font-size--body-small); }
	.crunchr-video-slide__person strong { font-size: var(--wp--preset--font-size--micro); }
	.crunchr-video-slide__person span { font-size: var(--wp--preset--font-size--eyebrow-small); }
	button.crunchr-video-slide__play,
	.crunchr-video-slide__play { top: 20px; right: 20px; left: auto; transform: none; }
	button.crunchr-video-slide__play:hover { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.crunchr-video-slider__track, .crunchr-video-slide__overlay, .crunchr-video-slide__shade { transition: none; }
}
