/*
 * ECFS Video Skin: the ECFS player look from live's ecfs-theme
 * (_gutenberg.scss .wp-block-video). White at rest, orange on hover/focus,
 * dark gradient from the bottom, timeline above a centred row of controls.
 */
.evs {
	--evs-accent: var(--bde-palette-ecfs-orange-07e58486-db63-49a9-bcca-4dc6f190492e-3, #fe5000);
	position: relative;
	container-type: inline-size;
}

.wp-block-video.evs video {
	display: block;
	width: 100%;
	height: auto;
}

.evs-ui {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(12px, 5cqw, 32px);
	background: linear-gradient(to bottom, rgba(9, 15, 17, 0), rgba(9, 15, 17, 0.85));
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.2s, color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.evs:hover .evs-ui,
.evs:focus-within .evs-ui {
	color: var(--evs-accent);
}

/* While playing, the controls fade out after a short idle (JS sets .evs-show). */
.evs.is-playing:not(.evs-show) .evs-ui {
	opacity: 0;
	cursor: none;
}

.evs-ui button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.evs-ui button:focus-visible,
.evs-seek:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.evs-ui .evs-big {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(52px, 20cqw, 100px);
	height: clamp(52px, 20cqw, 100px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

/* Short players (phones): lift the button clear of the timeline. */
@container (max-width: 480px) {
	.evs-ui .evs-big {
		top: 40%;
	}
}

.evs-big svg {
	width: 100%;
	height: 100%;
}

/* Timeline and buttons: hidden at rest, shown on hover, focus or tap. */
.evs-bar {
	position: relative;
	opacity: 0;
	transition: opacity 0.2s;
}

.evs:hover .evs-bar,
.evs:focus-within .evs-bar,
.evs.evs-show .evs-bar {
	opacity: 1;
}

.evs-seek {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 14px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background:
		linear-gradient(currentColor, currentColor) 0 50% / var(--evs-p, 0%) 4px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) 0 50% / 100% 4px no-repeat;
	color: inherit;
	cursor: pointer;
}

.evs-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: currentColor;
}

.evs-seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: currentColor;
}

.evs-seek::-moz-range-track {
	background: transparent;
}

.evs-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 3cqw, 16px);
}

.evs-time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.evs-btn svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.evs-cc[aria-pressed="true"] {
	opacity: 1;
}

.evs-cc[aria-pressed="false"] {
	opacity: 0.6;
}

/* Full screen keeps these controls; letterbox instead of cropping. */
.evs:fullscreen {
	display: flex;
	align-items: center;
	background: #000;
}

.evs:fullscreen video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.evs:-webkit-full-screen video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}