/* Video — base styles for any <video-player> wrapper, plus chrome
   specific to the video page-module.

   Sizing: the <video-player> wrapper holds the aspect-ratio, the iframe
   (or placeholder) fills it. Default 16:9 (modern footage). Authors
   override per video via screen-type classes on the iframe (vimeoPlayer
   adds the matching class); the wrapper picks up the ratio via :has(). */

video-player {
	display: block;
	aspect-ratio: 16 / 9;
	width: 100%;
	/* --ink-primary gives a solid shape during lazy-load instead of
	   blending into the page. Reads as the expected "dark video box"
	   in light scopes; flips with the scope in inverted ones. */
	background: var(--ink-primary);

	iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.video-placeholder {
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		background-color: var(--fill-primary);
		color: var(--ink-primary);
	}

	/* Per screen-type overrides — vimeoPlayer() puts the class on the
	   iframe; :has() lets the wrapper pick up the right ratio. */
	&:has(.four-by-three) { aspect-ratio: 4 / 3; }
	&:has(.macbook-pro)   { aspect-ratio: 2560 / 1600; } /* 16:10 */
	&:has(.lg-24)         { aspect-ratio: 2688 / 1512; } /* 16:9 */
	&:has(.imac-5k)       { aspect-ratio: 5120 / 2880; } /* 16:9 */
	&:has(.ten-eighty)    { aspect-ratio: 16 / 9; }
}

page-module.video {
	border: var(--dev-border-width) solid rgb(0 0 0 / 0.1);

	text-content {
		margin-top: var(--below-block);
	}

	.warning {
		color: var(--ink-error);
	}

	.section-heading + .video-frame-placeholder {
		margin-top: var(--above-block);
	}

	.video-frame-placeholder {
		aspect-ratio: 16 / 9;
		width: 100%;
		background: var(--ink-primary);
		display: grid;
		place-items: center;

		p {
			color: var(--fill-primary);
			border: 1px dashed var(--stroke-secondary);
			padding: 0.5em 1em;
		}
	}

	.video-frame-placeholder + .warning {
		margin-top: var(--below-block);
	}

	@container (width < 500px) {
		.section-heading, text-content {
			padding-inline: var(--gutter);
		}
	}

	@container (width >= 500px) {
		padding-inline: var(--gutter);
	}
}

[data-prominence='featured'] page-module.video {
	@media (width >= 1000px) {
		grid-column: 2 / -2;
	}
}

[data-emphasis='focused'] page-module.video {
	@media (width >= 1000px) {
		padding-block: 8rem;
	}
}

[data-emphasis='immersive'] page-module.video {
	@media (width >= 1000px) {
		padding-block: 14rem;
	}
}