/*
	--video-aspect-ratio is set inline per instance (video.php), from the
	Aspect Ratio select field — genuinely per-editor-choice data, same
	reasoning as the focal point clone's inline object-position.

	position: absolute + inset: 0 on the actual <video>/<iframe>, not just
	object-fit on its own — iframes don't reliably respect aspect-ratio/
	object-fit sizing the way replaced elements like <video>/<img> do, so
	both sources get the same absolute-fill treatment. Same pattern as
	.banner__media in components.css.
*/
.video-block__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--video-aspect-ratio, 16 / 9);
}

.video-block__media-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/*
	Only rendered when Controls and Autoplay are both off (video.php) — the
	one configuration with no other way to start or stop playback. Covers the
	whole video so a click anywhere toggles play/pause, not just the icon
	itself. video.js swaps the opacity by toggling .is-playing on the parent.
*/
.video-block__play-toggle {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--color-dark-fg);
	opacity: 0.5;
	transition: opacity var(--transition);

	& svg {
		width: 4rem;
		height: 4rem;
	}

	&:hover,
	&:focus-visible {
		opacity: 0.8;
	}
}

.video-block__media.is-playing .video-block__play-toggle {
	opacity: 0;

	&:hover,
	&:focus-visible {
		opacity: 0.3;
	}
}