/* MP Video v1.0.3 — facade YouTube embed
   Namespaced under .mp-video; tokens on the wrapper (no :root);
   no font-family (theme owns typography). */

.mp-video {
	--mpv-berry: #8E2C4E;
	--mpv-ink: #231C20;
	--mpv-ivory: #FCF9F7;

	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* Reserves space — zero layout shift on load and on swap. */
	margin-block-start: 0 !important;
	overflow: hidden;
	border-radius: 12px;
	background: var(--mpv-ink);
}

/* The whole facade is one button — click and keyboard both work. */
.mp-video .mp-video-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mp-video .mp-video-btn:focus-visible {
	outline: 3px solid var(--mpv-berry);
	outline-offset: -3px;
}

.mp-video .mp-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Berry play button. */
.mp-video .mp-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 10vw, 72px);
	height: clamp(48px, 10vw, 72px);
	border-radius: 50%;
	background: var(--mpv-berry);
	color: var(--mpv-ivory);
	box-shadow: 0 4px 16px rgba(35, 28, 32, 0.35);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.mp-video .mp-video-play svg {
	width: clamp(22px, 4.5vw, 32px);
	height: clamp(22px, 4.5vw, 32px);
}

/* Hover gated for true hover devices; :active covers touch. */
@media (hover: hover) {
	.mp-video .mp-video-btn:hover .mp-video-play {
		transform: translate(-50%, -50%) scale(1.08);
	}
}

.mp-video .mp-video-btn:active .mp-video-play {
	transform: translate(-50%, -50%) scale(0.96);
}

/* Injected iframe fills the same reserved box. */
.mp-video .mp-video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mp-video noscript a {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	color: var(--mpv-ivory);
}