/* ==========================================================================
   Ovation — video dialog
   The player that opens over the page when a video link is pressed. Shared
   by the Testimonials widget and the Videos section: the markup comes from
   ovation_video_dialog() and the behaviour from js/video-modal.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The video dialog
   A native <dialog>, so the top layer, the inert page behind it and Escape
   come from the browser. The player fits the viewport at 16:9 by width or by
   height, whichever runs out first, and the close button sits above it.
   -------------------------------------------------------------------------- */
.o-video-modal {
	width: min(1280px, calc(100vw - (var(--o-gutter) * 2)), calc((100svh - 7rem) * 16 / 9));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	overflow: visible;
	background-color: var(--o-navy-ink);
	color: var(--o-white);
	box-shadow: var(--o-shadow-modal);
}

/* ::backdrop only inherits custom properties in recent browsers, hence the fallback. */
.o-video-modal::backdrop {
	background-color: var(--o-scrim, rgba(15, 31, 64, 0.55));
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
}

.o-video-modal[open] {
	animation: o-video-modal-in var(--o-transition-slow) both;
}

@keyframes o-video-modal-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.985);
	}
}

.o-video-modal__stage {
	aspect-ratio: 16 / 9;
}

.o-video-modal__stage iframe,
.o-video-modal__stage video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.o-video-modal__close {
	position: absolute;
	right: 0;
	bottom: 100%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--o-space-xs);
	padding: 0;
	border: 0;
	background: none;
	color: var(--o-white);
	transition: color var(--o-transition);
}

.o-video-modal__close:hover,
.o-video-modal__close:focus-visible {
	color: var(--o-orange);
}

.o-video-modal__close-glyph {
	width: 28px;
	height: 28px;
}