/**
 * Click-to-play facade for YouTube embeds. See assets/js/youtube-facade.js.
 *
 * The box is a fixed 333px tall because that is the height the original <iframe> was hard-coded
 * to. Keeping it identical means swapping the iframe for the facade causes no layout shift —
 * CLS on the front page is currently 0.024 and should stay there.
 */
.af-yt-facade {
	position: relative;
	display: block;
	width: 100%;
	height: 333px;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
	background-color: #000;
	cursor: pointer;
}

.af-yt-facade__poster {
	display: block;
	width: 100%;
	height: 100%;
	/* Thumbnails are 4:3 while the box is wider — crop rather than letterbox. */
	object-fit: cover;
	/* Pointer events land on the button, not the image, so closest() finds the facade. */
	pointer-events: none;
}

.af-yt-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 68px;
	height: 48px;
	pointer-events: none;
	transition: opacity 0.15s ease-in-out;
	opacity: 0.85;
}

.af-yt-facade:hover .af-yt-facade__play,
.af-yt-facade:focus-visible .af-yt-facade__play {
	opacity: 1;
}

.af-yt-facade:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.af-yt-facade__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.af-yt-facade__play {
		transition: none;
	}
}