/* Frontend + editor styles for omg/video-embed. */

.omg-video-embed {
	--omg-video-embed-bleed: 0;

	/* Mobile: animate from a reduced load width up to the pre-change width
	 * (a space-20 gutter each side), which is the expanded maximum.
	 * The scroll animation drives --omg-video-embed-bleed from 0 to 1. */
	--omg-video-embed-content-max: calc( 100vw - 96px );
	--omg-video-embed-bleed-max: calc( 100vw - ( var( --wp--preset--spacing--space-20, 20px ) * 2 ) );
	--omg-video-embed-radius: 16px;

	--omg-video-embed-play-size: 64px;
	--omg-video-embed-play-bg: var( --wp--preset--color--primary, #3354ff );

	box-sizing: border-box;
	margin-block: 0;

	/* Full-bleed escape: collapses to 0 in unconstrained parents. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

@media (min-width: 768px) {

	.omg-video-embed {

		/* Content size intentionally narrower than the global content size
		 * (1240px) so the scroll-driven bleed animation has room to expand. */
		--omg-video-embed-content-max: 810px;
		--omg-video-embed-bleed-max: var( --wp--custom--grid--content--xl, 1240px );
		--omg-video-embed-radius: 36px;
	}
}

.omg-video-embed__frame {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: calc(
		var( --omg-video-embed-content-max ) +
			(
				var( --omg-video-embed-bleed-max ) -
					var( --omg-video-embed-content-max )
			) * var( --omg-video-embed-bleed )
	);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var( --omg-video-embed-radius );
	background: #000;
}

.omg-video-embed__facade {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;

	/* Transparent so the frame's black backdrop shows when no poster is set,
	 * keeping the primary play button readable instead of blue-on-blue. */
	background-color: transparent;
	cursor: pointer;
}

.omg-video-embed__facade:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.omg-video-embed__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.omg-video-embed__play {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --omg-video-embed-play-size, 64px );
	height: var( --omg-video-embed-play-size, 64px );
	border-radius: 50%;
	background-color: var( --omg-video-embed-play-bg, var( --wp--preset--color--primary, #3354ff ) );
	color: #fff;
	transition: transform 200ms ease;
}

.omg-video-embed__facade:hover .omg-video-embed__play,
.omg-video-embed__facade:focus-visible .omg-video-embed__play {
	transform: scale(1.06);
}

.omg-video-embed__play svg {

	/* Nudge the triangle to optical centre inside the square. */
	width: 34%;
	height: auto;
	margin-left: 4%;
	display: block;
}

.omg-video-embed__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

video.omg-video-embed__player {
	object-fit: cover;
	background: #000;
}

/* Inside a carousel slide: drop the full-bleed escape and fill the slide. */
.omg-video-embed.is-in-carousel {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.omg-video-embed.is-in-carousel .omg-video-embed__frame {
	max-width: 100%;
}

/* Editor canvas: neutralise the full-bleed escape so the block sits inside the
 * editor frame and reads at its default (content) width. */
.editor-styles-wrapper .omg-video-embed {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.omg-video-embed__editor-note {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	opacity: 0.7;
}