/**
 * Video — .espt-block-video
 *
 * Vars set by the spec: --accent --title-color --text-color --meta-color
 * --ov-color --pb-bg --pb-color --pb-size --badge-bg --badge-color --btn-bg
 * --btn-color --max-width --title-size --split --gap --stage-radius.
 * Root classes: is-template-* is-ratio-* is-play-mode-* is-text-align-*
 * is-thumb-hover-* is-badge-pos-* is-pb-shape-* is-pb-anim-* is-btn-style-*
 * is-ov-enable/no-ov-enable is-ov-gradient/no-ov-gradient.
 * Markup classes: .espt-vid-lay-stack|overlay|left|right (the layout the
 * template maps to) and .espt-vid-stage.espt-vid-has-ovtext when a text panel
 * sits inside the video area.
 * Mobile-first: base = phones, then 768px, then 1024px.
 */

.espt-block-video .espt-vid {
	--vid-accent: var(--accent, var(--bd-primary));
	--vid-ink: var(--title-color, var(--bd-ink));
	--vid-body: var(--text-color, var(--bd-body));
	--vid-meta: var(--meta-color, var(--bd-muted));
	display: flex;
	flex-direction: column;
	gap: var(--gap, 18px);
	margin-inline: auto;
	max-width: min(100%, var(--max-width, 100%));
	min-width: 0;
	position: relative;
}

/* Layouts. The overlay/hero/background templates map to .espt-vid-lay-overlay
   (everything lives inside the stage); split-left / split-right map to
   .espt-vid-lay-left / -right, which stack on phones — video first, whatever
   the DOM order — and become a two-column grid from 768px up. Those layout
   classes, not the template ones, carry the split styling. */
.espt-block-video .espt-vid-lay-left .espt-vid-panel,
.espt-block-video .espt-vid-lay-right .espt-vid-panel { order: 2; }

.espt-block-video .espt-vid-empty {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 12px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	padding: 22px 16px;
	text-align: center;
}

/* ------------------------------------------------------------- stage */

.espt-block-video .espt-vid-stage {
	aspect-ratio: 16 / 9;
	background: #0b1020;
	border-radius: var(--stage-radius, 14px);
	cursor: pointer;
	isolation: isolate;
	min-width: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.espt-block-video.is-play-mode-background .espt-vid-stage,
.espt-block-video .espt-vid-stage.is-playing { cursor: default; }

.espt-block-video .espt-vid-stage:focus-visible {
	outline: 3px solid var(--vid-accent);
	outline-offset: 3px;
}

.espt-block-video .espt-vid-frame {
	inset: 0;
	position: absolute;
}

.espt-block-video .espt-vid-poster {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.5s ease, filter 0.4s ease;
	width: 100%;
}

.espt-block-video .espt-vid-poster-blank {
	background: linear-gradient(135deg, #1e293b, #0b1020);
}

.espt-block-video .espt-vid-overlay {
	background: var(--ov-color, rgba(0, 0, 0, 0.35));
	inset: 0;
	position: absolute;
	z-index: 1;
}

.espt-block-video.no-ov-enable .espt-vid-overlay { display: none; }

.espt-block-video.is-ov-gradient .espt-vid-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, var(--ov-color, rgba(0, 0, 0, 0.72)) 100%);
}

.espt-block-video .espt-vid-el {
	background: #000;
	border: 0;
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.espt-block-video video.espt-vid-el { object-fit: cover; }

/* aspect ratios */
.espt-block-video.is-ratio-4-3 .espt-vid-stage { aspect-ratio: 4 / 3; }
.espt-block-video.is-ratio-1-1 .espt-vid-stage { aspect-ratio: 1 / 1; }
.espt-block-video.is-ratio-21-9 .espt-vid-stage { aspect-ratio: 21 / 9; }
.espt-block-video.is-ratio-9-16 .espt-vid-stage { aspect-ratio: 9 / 16; }
.espt-block-video.is-ratio-3-4 .espt-vid-stage { aspect-ratio: 3 / 4; }

/* poster hover effects */
.espt-block-video.is-thumb-hover-zoom .espt-vid-stage:hover .espt-vid-poster { transform: scale(1.06); }
.espt-block-video.is-thumb-hover-bright .espt-vid-stage:hover .espt-vid-poster { filter: brightness(1.14); }
.espt-block-video.is-thumb-hover-blur .espt-vid-stage:hover .espt-vid-poster { filter: blur(2px); }

/* the facade disappears once the real player is injected */
.espt-block-video .espt-vid-stage.is-playing .espt-vid-poster,
.espt-block-video .espt-vid-stage.is-playing .espt-vid-overlay,
.espt-block-video .espt-vid-stage.is-playing .espt-vid-play,
.espt-block-video .espt-vid-stage.is-playing .espt-vid-badge,
.espt-block-video .espt-vid-stage.is-playing .espt-vid-panel-ov {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* -------------------------------------------------------- play button */

.espt-block-video .espt-vid-play {
	align-items: center;
	background: var(--pb-bg, var(--vid-accent));
	box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
	color: var(--pb-color, #fff);
	display: inline-flex;
	height: var(--pb-size, 54px);
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	width: var(--pb-size, 54px);
	z-index: 4;
}

/* With a CTA inside the stage the render swaps the badge for a real <button>
   (the stage can no longer be one) — strip the UA chrome. */
.espt-block-video button.espt-vid-play {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.espt-block-video button.espt-vid-play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Play badge switched off, but a keyboard user still needs a way in: the
   button stays, invisible, and only shows itself while focused. */
.espt-block-video button.espt-vid-play-bare {
	animation: none;
	background: transparent;
	box-shadow: none;
	color: transparent;
}

.espt-block-video button.espt-vid-play-bare::before,
.espt-block-video button.espt-vid-play-bare::after { display: none; }

.espt-block-video button.espt-vid-play-bare:focus-visible {
	background: var(--pb-bg, var(--vid-accent));
	color: var(--pb-color, #fff);
}

.espt-block-video.is-pb-shape-circle .espt-vid-play { border-radius: 50%; }
.espt-block-video.is-pb-shape-rounded .espt-vid-play { border-radius: 18px; }
.espt-block-video.is-pb-shape-square .espt-vid-play { border-radius: 4px; }

.espt-block-video .espt-vid-play svg {
	height: 42%;
	width: 42%;
}

.espt-block-video.is-pb-shape-circle .espt-vid-play svg { margin-left: 5%; }

.espt-block-video .espt-vid-pico {
	align-items: center;
	display: inline-flex;
	height: 100%;
	justify-content: center;
	line-height: 0;
	width: 100%;
}

.espt-block-video .espt-vid-stage:hover .espt-vid-play { box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.62); }
.espt-block-video.is-pb-anim-scale .espt-vid-stage:hover .espt-vid-play { transform: translate(-50%, -50%) scale(1.12); }

.espt-block-video.is-pb-anim-pulse .espt-vid-play::before {
	animation: espt-vid-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	background: var(--pb-bg, var(--vid-accent));
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

@keyframes espt-vid-pulse {
	0% { opacity: 0.5; transform: scale(1); }
	70% { opacity: 0; transform: scale(1.6); }
	100% { opacity: 0; transform: scale(1.6); }
}

.espt-block-video.is-pb-anim-ripple .espt-vid-play::after {
	animation: espt-vid-ripple 1.8s ease-out infinite;
	border: 2px solid var(--pb-bg, var(--vid-accent));
	border-radius: inherit;
	content: "";
	inset: -4px;
	position: absolute;
}

@keyframes espt-vid-ripple {
	0% { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.7); }
}

.espt-block-video.is-pb-anim-glow .espt-vid-play {
	animation: espt-vid-glow 2.4s ease-in-out infinite;
}

@keyframes espt-vid-glow {
	0%, 100% { box-shadow: 0 0 16px -4px var(--pb-bg, var(--vid-accent)), 0 12px 30px -8px rgba(0, 0, 0, 0.5); }
	50% { box-shadow: 0 0 32px 2px var(--pb-bg, var(--vid-accent)), 0 12px 30px -8px rgba(0, 0, 0, 0.5); }
}

/* --------------------------------------------------------------- badge */

.espt-block-video .espt-vid-badge {
	align-items: center;
	background: var(--badge-bg, var(--vid-accent));
	border-radius: 999px;
	color: var(--badge-color, #fff);
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	gap: 5px;
	left: 10px;
	letter-spacing: 0.03em;
	line-height: 1.3;
	max-width: calc(100% - 20px);
	overflow-wrap: anywhere;
	padding: 5px 10px;
	position: absolute;
	top: 10px;
	z-index: 3;
}

.espt-block-video .espt-vid-bdgi,
.espt-block-video .espt-vid-bico {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.espt-block-video .espt-vid-bdgi svg { height: 1.1em; width: 1.1em; }

.espt-block-video.is-badge-pos-tr .espt-vid-badge { left: auto; right: 10px; }
.espt-block-video.is-badge-pos-bl .espt-vid-badge { bottom: 10px; top: auto; }
.espt-block-video.is-badge-pos-br .espt-vid-badge { bottom: 10px; left: auto; right: 10px; top: auto; }

/* ---------------------------------------------------------- text panel */

.espt-block-video .espt-vid-panel {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	text-align: center;
}

.espt-block-video.is-text-align-left .espt-vid-panel { align-items: flex-start; text-align: left; }
.espt-block-video.is-text-align-right .espt-vid-panel { align-items: flex-end; text-align: right; }

.espt-block-video .espt-vid-sub {
	color: var(--vid-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-video .espt-vid-title {
	color: var(--vid-ink);
	font-size: var(--title-size, 20px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-video .espt-vid-desc {
	color: var(--vid-body);
	font-size: 15px;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

.espt-block-video .espt-vid-meta {
	color: var(--vid-meta);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.espt-block-video .espt-vid-actions {
	align-items: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
	max-width: 100%;
}

.espt-block-video .espt-vid-btn {
	align-items: center;
	background: var(--btn-bg, var(--vid-accent));
	border: 2px solid transparent;
	border-radius: var(--espt-btn-radius, 12px);
	color: var(--btn-color, #fff);
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 13px 24px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.espt-block-video .espt-vid-btn:hover {
	color: var(--btn-color, #fff);
	filter: brightness(1.06);
	transform: translateY(-2px);
}

.espt-block-video .espt-vid-btn:focus-visible {
	outline: 3px solid var(--vid-accent);
	outline-offset: 3px;
}

.espt-block-video .espt-vid-panel-ov .espt-vid-btn:focus-visible { outline-color: #fff; }

.espt-block-video .espt-vid-bico svg { height: 1.1em; width: 1.1em; }

.espt-block-video.is-btn-style-pill .espt-vid-btn { border-radius: 999px; padding-inline: 30px; }

.espt-block-video.is-btn-style-gradient .espt-vid-btn {
	background: linear-gradient(135deg, var(--btn-bg, var(--vid-accent)), var(--bd-accent));
}

.espt-block-video.is-btn-style-outline .espt-vid-btn {
	background: transparent;
	border-color: var(--btn-bg, var(--vid-accent));
	color: var(--btn-color, var(--btn-bg, var(--vid-accent)));
}

.espt-block-video.is-btn-style-outline .espt-vid-btn:hover {
	background: var(--btn-bg, var(--vid-accent));
	color: #fff;
}

.espt-block-video.is-btn-style-glow .espt-vid-btn {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 10px 26px -10px var(--btn-bg, var(--vid-accent));
}

.espt-block-video.is-btn-style-glow .espt-vid-btn:hover {
	box-shadow: 0 0 22px -4px var(--btn-bg, var(--vid-accent)), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
}

.espt-block-video.is-btn-style-ghost .espt-vid-btn {
	background: transparent;
	color: var(--btn-color, var(--btn-bg, var(--vid-accent)));
	padding: 6px 2px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.espt-block-video .espt-vid-note {
	color: var(--vid-meta);
	font-size: 12.5px;
	overflow-wrap: anywhere;
}

/* -------------------------------------------- overlay panel (in stage) */

.espt-block-video .espt-vid-panel-ov {
	bottom: 0;
	color: #fff;
	left: 0;
	padding: 16px;
	position: absolute;
	right: 0;
	transition: opacity 0.3s ease;
	z-index: 3;
}

.espt-block-video .espt-vid-panel-ov .espt-vid-title { color: #fff; }
.espt-block-video .espt-vid-panel-ov .espt-vid-desc { color: rgba(255, 255, 255, 0.9); }
.espt-block-video .espt-vid-panel-ov .espt-vid-meta,
.espt-block-video .espt-vid-panel-ov .espt-vid-note { color: rgba(255, 255, 255, 0.78); }
.espt-block-video .espt-vid-panel-ov .espt-vid-sub { color: #fff; opacity: 0.9; }

/* A 16:9 stage is only ~160px tall on a 320px phone — far too short for a
   headline, a paragraph and a CTA. Give a stage that carries text room to
   breathe and clamp the long lines instead of letting them clip. */
.espt-block-video .espt-vid-stage.espt-vid-has-ovtext { min-height: 300px; }

.espt-block-video .espt-vid-panel-ov .espt-vid-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	font-size: min(var(--title-size, 20px), 21px);
	line-clamp: 3;
	overflow: hidden;
}

.espt-block-video .espt-vid-panel-ov .espt-vid-desc {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 13.5px;
	line-height: 1.55;
	line-clamp: 2;
	overflow: hidden;
}

.espt-block-video .espt-vid-panel-ov .espt-vid-note { display: none; }
.espt-block-video .espt-vid-panel-ov .espt-vid-btn { padding: 10px 18px; }

.espt-block-video.is-template-overlay .espt-vid-panel-ov { padding-bottom: 18px; }

.espt-block-video.is-template-hero .espt-vid-panel-ov {
	align-items: center;
	inset: 0;
	justify-content: center;
	padding: 20px 16px 74px;
	text-align: center;
}

.espt-block-video.is-template-hero .espt-vid-play {
	bottom: 14px;
	top: auto;
	transform: translate(-50%, 0);
}

.espt-block-video.is-template-hero.is-pb-anim-scale .espt-vid-stage:hover .espt-vid-play { transform: translate(-50%, 0) scale(1.12); }

/* ------------------------------------------------------ template skins */

.espt-block-video.is-template-rounded .espt-vid {
	border: 0;
	border-radius: calc(var(--bd-radius, 16px) + 10px);
}

.espt-block-video.is-template-glass .espt-vid {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: calc(var(--bd-radius, 16px) + 4px);
}

.espt-block-video.is-template-gradient .espt-vid {
	background: linear-gradient(135deg, var(--vid-accent), var(--bd-deep));
	border: 0;
	border-radius: calc(var(--bd-radius, 16px) + 4px);
}

.espt-block-video.is-template-dark .espt-vid {
	background: #0f172a;
	border: 1px solid #1e293b;
}

.espt-block-video.is-template-glass .espt-vid-title,
.espt-block-video.is-template-gradient .espt-vid-title,
.espt-block-video.is-template-dark .espt-vid-title { color: var(--title-color, #fff); }

.espt-block-video.is-template-glass .espt-vid-desc,
.espt-block-video.is-template-gradient .espt-vid-desc { color: var(--text-color, rgba(255, 255, 255, 0.9)); }

.espt-block-video.is-template-dark .espt-vid-desc { color: var(--text-color, #94a3b8); }

.espt-block-video.is-template-glass .espt-vid-meta,
.espt-block-video.is-template-gradient .espt-vid-meta,
.espt-block-video.is-template-dark .espt-vid-meta,
.espt-block-video.is-template-glass .espt-vid-note,
.espt-block-video.is-template-gradient .espt-vid-note,
.espt-block-video.is-template-dark .espt-vid-note { color: var(--meta-color, rgba(255, 255, 255, 0.72)); }

.espt-block-video.is-template-gradient .espt-vid-sub { color: var(--bd-accent); }
.espt-block-video.is-template-glass .espt-vid-sub { color: #fff; }

.espt-block-video.is-template-minimal .espt-vid { gap: calc(var(--gap, 18px) * 0.66); }
.espt-block-video.is-template-minimal .espt-vid-stage { border-radius: calc(var(--stage-radius, 14px) * 0.5); }

/* "Background (play only)": the video is the section — no card, no text, no
   rounded corners, so it can sit edge to edge behind the rest of the page. */
.espt-block-video.is-template-background .espt-vid-stage {
	border-radius: 0;
	box-shadow: none;
}

.espt-block-video.is-template-simple .espt-vid-stage,
.espt-block-video.is-template-card .espt-vid-stage,
.espt-block-video.is-template-rounded .espt-vid-stage { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.55); }

.espt-block-video.is-template-rounded .espt-vid-stage { border-radius: calc(var(--stage-radius, 14px) + 6px); }

/* device frames */
.espt-block-video.is-template-device-browser .espt-vid-stage {
	border: 1px solid #d1d5db;
	border-radius: 0 0 12px 12px;
	border-top: 26px solid #e5e7eb;
	box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.45);
}

.espt-block-video.is-template-device-browser .espt-vid-stage::before {
	background: #f87171;
	border-radius: 50%;
	box-shadow: 11px 0 0 #fbbf24, 22px 0 0 #34d399;
	content: "";
	height: 6px;
	left: 10px;
	position: absolute;
	top: -16px;
	width: 6px;
	z-index: 5;
}

.espt-block-video.is-template-device-phone .espt-vid { max-width: min(100%, 320px); }

.espt-block-video.is-template-device-phone .espt-vid-stage {
	aspect-ratio: 9 / 18;
	border: 9px solid #111827;
	border-radius: 34px;
	box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------- lightbox */
/* Portaled to <body> by video.js, so it cannot sit under the block root. */

.espt-vid-lb-ov {
	align-items: center;
	background: rgba(6, 10, 20, 0.88);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 20px;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	visibility: hidden;
	z-index: 2147483000;
}

.espt-vid-lb-ov.is-open {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.28s ease;
	visibility: visible;
}

.espt-vid-lb-dialog {
	aspect-ratio: 16 / 9;
	max-height: 84vh;
	max-width: 100%;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
	width: min(1100px, 100%);
}

.espt-vid-lb-anim-fade .espt-vid-lb-dialog { transform: none; }
.espt-vid-lb-ov.is-open .espt-vid-lb-dialog { transform: none; }

.espt-vid-lb-dialog .espt-vid-el {
	border: 0;
	border-radius: 12px;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.espt-vid-lb-close {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
	color: #111827;
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 6px;
	top: 6px;
	width: 40px;
	z-index: 3;
}

.espt-vid-lb-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

html.espt-vid-lb-lock,
html.espt-vid-lb-lock body { overflow: hidden; }

/* ------------------------------------------------------------ tablet */

@media (min-width: 768px) {
	.espt-block-video .espt-vid-badge {
		font-size: 12px;
		left: 12px;
		padding: 6px 12px;
		top: 12px;
	}

	.espt-block-video.is-badge-pos-tr .espt-vid-badge { left: auto; right: 12px; }
	.espt-block-video.is-badge-pos-bl .espt-vid-badge { bottom: 12px; top: auto; }
	.espt-block-video.is-badge-pos-br .espt-vid-badge { bottom: 12px; left: auto; right: 12px; top: auto; }

	.espt-block-video .espt-vid-panel { gap: 10px; }
	.espt-block-video .espt-vid-panel-ov { padding: 22px; }
	.espt-block-video.is-template-hero .espt-vid-panel-ov { padding: 26px 26px 92px; }
	.espt-block-video.is-template-hero .espt-vid-play { bottom: 20px; }

	/* From tablet up the stage is tall enough for the full overlay copy. */
	.espt-block-video .espt-vid-stage.espt-vid-has-ovtext { min-height: 0; }
	.espt-block-video .espt-vid-panel-ov .espt-vid-title { font-size: var(--title-size, 24px); }

	.espt-block-video .espt-vid-panel-ov .espt-vid-desc {
		-webkit-line-clamp: 3;
		font-size: 15px;
		line-height: 1.65;
		line-clamp: 3;
	}

	.espt-block-video .espt-vid-panel-ov .espt-vid-note { display: block; }
	.espt-block-video .espt-vid-panel-ov .espt-vid-btn { padding: 13px 24px; }

	.espt-block-video .espt-vid-desc { font-size: 15.5px; }

	/* split layouts */
	.espt-block-video .espt-vid-lay-left,
	.espt-block-video .espt-vid-lay-right {
		align-items: center;
		display: grid;
	}

	.espt-block-video .espt-vid-lay-right {
		grid-template-columns: minmax(0, var(--split, 52%)) minmax(0, 1fr);
	}

	.espt-block-video .espt-vid-lay-left {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--split, 52%));
	}

	.espt-block-video .espt-vid-lay-left .espt-vid-panel,
	.espt-block-video .espt-vid-lay-right .espt-vid-panel { order: 0; }

	.espt-block-video.is-template-device-browser .espt-vid-stage { border-top-width: 34px; }

	.espt-block-video.is-template-device-browser .espt-vid-stage::before {
		box-shadow: 14px 0 0 #fbbf24, 28px 0 0 #34d399;
		height: 8px;
		left: 12px;
		top: -21px;
		width: 8px;
	}

	.espt-vid-lb-ov { padding: 40px; }

	.espt-vid-lb-close {
		right: 0;
		top: -50px;
	}
}

/* ----------------------------------------------------------- desktop */

@media (min-width: 1024px) {
	.espt-block-video .espt-vid-desc { font-size: 16px; }
	.espt-block-video .espt-vid-sub { font-size: 13px; }
	.espt-block-video .espt-vid-panel-ov { padding: 26px; }
}

/* --------------------------------------------------------- a11y */

@media (prefers-reduced-motion: reduce) {
	.espt-block-video .espt-vid-play,
	.espt-block-video .espt-vid-play::before,
	.espt-block-video .espt-vid-play::after,
	.espt-block-video .espt-vid-poster,
	.espt-block-video .espt-vid-panel-ov,
	.espt-block-video .espt-vid-btn,
	.espt-vid-lb-ov,
	.espt-vid-lb-dialog {
		animation: none;
		transition: none;
	}

	.espt-block-video.is-thumb-hover-zoom .espt-vid-stage:hover .espt-vid-poster { transform: none; }
	.espt-block-video.is-pb-anim-scale .espt-vid-stage:hover .espt-vid-play { transform: translate(-50%, -50%); }
	.espt-block-video.is-template-hero.is-pb-anim-scale .espt-vid-stage:hover .espt-vid-play { transform: translate(-50%, 0); }
}