/**
 * Video popup dialog.
 *
 * Two things this file must not rely on:
 *
 * 1. The UA stylesheet centres a modal <dialog> with `margin: auto`. The site's
 *    reset zeroes margins, which pins the dialog to the top-left corner, so the
 *    centring is set again here explicitly.
 * 2. A <dialog> defaults to `overflow: auto`. Anything positioned outside its
 *    box (a close button on a negative offset, say) produces a scrollbar inside
 *    the dialog, so the close control sits within the frame.
 */

.mj-video-dialog {
	background: transparent;
	block-size: fit-content;
	border: 0;
	box-sizing: border-box;
	margin: auto;
	max-block-size: none;
	max-inline-size: none;
	overflow: hidden;
	padding: 0;

	/* Cap the width so a 16:9 video fits the viewport on both axes, leaving a
	   1rem gutter. The third term is the width implied by the height limit. */
	inline-size: min(64rem, calc(100vw - 2rem), calc((100vh - 2rem) * 16 / 9));
}

@supports (inline-size: 1dvh) {
	.mj-video-dialog {
		inline-size: min(64rem, calc(100dvw - 2rem), calc((100dvh - 2rem) * 16 / 9));
	}
}

.mj-video-dialog::backdrop {
	background: rgb(32 26 18 / 88%);
}

.mj-video-dialog__frame {
	display: block;
	inline-size: 100%;
	position: relative;
}

.mj-video-dialog__player {
	aspect-ratio: 16 / 9;
	background: #000;
	block-size: auto;
	border-radius: 1rem;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
}

/* Two classes so this outranks ACSS's bare `button:not(...)` rule, which would
   otherwise impose the global button font, weight and transform. */
.mj-video-dialog .mj-video-dialog__close {
	align-items: center;
	background: rgb(255 255 255 / 92%);
	block-size: 2.5rem;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 .25rem 1rem rgb(0 0 0 / 28%);
	color: #201a12;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 400;
	inline-size: 2.5rem;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0;
	position: absolute;
	text-transform: none;
	z-index: 2;
}

.mj-video-dialog .mj-video-dialog__close:hover {
	background: #fff;
}

.mj-video-dialog .mj-video-dialog__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 30rem) {
	.mj-video-dialog .mj-video-dialog__close {
		block-size: 2.25rem;
		font-size: 1.25rem;
		inline-size: 2.25rem;
		inset-block-start: .5rem;
		inset-inline-end: .5rem;
	}

	.mj-video-dialog__player {
		border-radius: .625rem;
	}
}