/*
 * Video facade (G-05; Phase 9): core Image with the block style `video` or
 * `video-short`, linked to YouTube. Ported from the redesign PoC
 * (css/site.css @ ed0ab9f7, "Media / video facade") using theme.json tokens and
 * base.css aliases only. The poster, play button and caption sit on the image
 * link; inc/enhancements.php adds the play icon and the accessible name.
 *
 * The caption rules carry the Image class so they beat the global caption
 * style (theme.json `elements.caption`, one class).
 *
 * Hover only highlights the link (G-12); the zoom runs only when motion is
 * allowed. Literal values kept from the PoC: 1px and 2px borders, the round
 * play button (50%) and the image dimming (0.85).
 */

.wp-block-image:where(.is-style-video, .is-style-video-short) {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--c-black);
}

/* The figure carries the aspect ratio (border included, as the PoC's
   button); the link fills it. */
:where(.is-style-video, .is-style-video-short) > a {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
}

.wp-block-image.is-style-video-short {
	aspect-ratio: 16 / 10;
}

/* With the Image class, so it beats core's `.wp-block-image img` height
   and a 4:3 poster is cropped as the PoC (Phase 12; Phase 9 defect). */
.wp-block-image:where(.is-style-video, .is-style-video-short) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.sc-video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.sc-video-play::before {
	content: "";
	width: var(--wp--custom--video--play-size);
	height: var(--wp--custom--video--play-size);
	border: 2px solid var(--c-orange);
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-black) 55%, transparent);
	backdrop-filter: blur(4px);
}

.sc-video-play::after {
	content: "";
	position: absolute;
	width: var(--wp--custom--video--play-icon-size);
	height: var(--wp--custom--video--play-icon-size);
	margin-left: var(--wp--custom--video--play-icon-offset);
	background-color: var(--c-text);
	mask: var(--sc-icon-play) center / contain no-repeat;
}

.wp-block-image:where(.is-style-video, .is-style-video-short) figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: var(--wp--custom--video--caption-padding);
	background: linear-gradient(0deg, color-mix(in srgb, var(--c-black) 90%, transparent), transparent);
	color: var(--c-muted);
	font-size: var(--wp--custom--font-size--label);
	text-align: left;
	pointer-events: none;
}

.wp-block-image:where(.is-style-video, .is-style-video-short) figcaption strong {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--video-title);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-text);
}

:where(.is-style-video, .is-style-video-short):hover {
	border-color: var(--c-orange);
}

:where(.is-style-video, .is-style-video-short) > a:hover img {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	:where(.is-style-video, .is-style-video-short) img {
		transition: transform 0.5s, opacity var(--motion-slow);
	}

	:where(.is-style-video, .is-style-video-short) > a:hover img {
		transform: scale(1.03);
	}
}