/**
 * Video modal — the play control a Cover draws, the Button play icon, and the
 * stage of the shared video dialog (inc/video-modal.php).
 *
 * Glass is settings.custom.glass, shared with the Glass button style
 * (styles/blocks/button-glass.json). --video-play-size on any ancestor
 * resizes the disc. Glyphs are a CSS mask of assets/icons/play.svg, so they
 * take the text colour; this file is never inlined, so the url() stays
 * relative to it.
 */

/* ── Cover trigger ───────────────────────────────────────────── */

/* A link over the whole Cover, above the inner container (core's z-index 1). */
.video-modal__trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.video-modal__trigger:focus-visible {
	outline: none;
}

.video-modal__trigger:focus-visible .video-modal__play {
	outline: 2px solid var(--wp--custom--glass--text);
	outline-offset: 4px;
}

/* The label names the link; only the glass pill shows it. */
.video-modal__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Icon only (default): light disc, dark glyph. The scheme is pinned, since
   Raised and Foreground are light-dark() and the disc sits on photos. */
.video-modal__play {
	color-scheme: light;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--video-play-size, 4.5rem);
	block-size: var(--video-play-size, 4.5rem);
	border-radius: var(--wp--preset--border-radius--circle);
	background-color: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--l);
	transition:
		transform var(--wp--custom--transition--fast),
		opacity var(--wp--custom--transition--fast),
		background-color var(--wp--custom--transition--fast);
}

/* The triangle sits a little right of centre in play.svg itself, where it
   looks centred. 0.5 because it fills half of its 24-unit box. */
.video-modal__glyph {
	flex-shrink: 0;
	inline-size: calc(var(--video-play-size, 4.5rem) * 0.5);
	block-size: calc(var(--video-play-size, 4.5rem) * 0.5);
}

.video-modal__trigger:hover .video-modal__play {
	transform: scale(1.08);
}

/* Glass: a frosted pill with the glyph and the label. */
.video-play--glass .video-modal__play {
	inline-size: auto;
	block-size: auto;
	gap: 0.6em;
	padding: 1em 1.75em 1em 1.5em;
	background-color: var(--wp--custom--glass--background);
	backdrop-filter: blur(var(--wp--custom--glass--blur));
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur));
	color: var(--wp--custom--glass--text);
	box-shadow: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1;
	text-shadow: var(--wp--custom--glass--shadow);
}

.video-play--glass .video-modal__glyph {
	inline-size: 1.375em;
	block-size: 1.375em;
	filter: drop-shadow(var(--wp--custom--glass--shadow));
}

.video-play--glass .video-modal__trigger:hover .video-modal__play {
	transform: none;
	background-color: var(--wp--custom--glass--background-hover);
}

.video-play--glass .video-modal__play .video-modal__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
	.video-modal__play {
		transition: none;
	}

	.video-modal__trigger:hover .video-modal__play {
		transform: none;
	}
}

/* ── Button play icon ────────────────────────────────────────── */

/* An inline SVG, added at render (inc/video-modal.php). Not drawn in the
   editor: the trigger and glyph exist only in the rendered HTML, and the
   framework never imitates rendered markup with editor-only CSS (rules.md §5). */

.wp-block-button.has-play-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.wp-block-button.has-play-icon .play-icon {
	flex-shrink: 0;
	inline-size: 1.375em;
	block-size: 1.375em;
}

.wp-block-button.is-style-button-glass .play-icon {
	filter: drop-shadow(var(--wp--custom--glass--shadow));
}

/* ── Dialog stage ────────────────────────────────────────────── */

/* Sized by blocks/modal/style.css (dialog.modal--video .modal__body > *),
   the same box as a Video-width wage/modal. */
.video-modal__stage {
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--preset--border-radius--m);
	overflow: clip;
	background: #000;
}

.video-modal__stage > :is(iframe, video) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (width <= 48rem) {
	.video-modal__stage {
		border-radius: 0;
	}
}