/***
 * Video — thumbnail and dialog
 * Markup: inc/DY/Shortcodes/Media/Video.php, behaviour: assets/js/video.js
 ***/

/***
 * Settings
 ***/

/*
 * --dy-video-accent   Play button, hover on the close button. Use the same hex
 *                     as the player colour in Vimeo (Embed → Player colour):
 *                     video.js also passes it to the player, so the controls
 *                     match wherever Vimeo allows it. Keep it a 6-digit hex.
 * --dy-video-max-h    Largest height of a thumbnail, on every screen.
 * --dy-video-corner   Darkest point of the shade in the dialog's top right
 *                     corner, behind the white close icon, so the icon stays
 *                     visible on a light video.
 *
 * Declared on body, like the colour aliases in style.css.
 */
body {
	--dy-video-accent: #683437;
	--dy-video-max-h: 75vh;
	--dy-video-corner: rgb(0 0 0 / 0.25);
}

@supports (height: 1svh) {
	body {
		/* svh ignores the mobile browser bars, so 75% is really 75% of what is visible. */
		--dy-video-max-h: 75svh;
	}
}

/***
 * Thumbnail
 ***/

/*
 * Format. Only a custom property, so it needs no extra specificity: no Kit or
 * theme rule sets it.
 */
.dy-video {
	--dy-video-ratio: 9 / 16;
}

.dy-video--landscape {
	--dy-video-ratio: 16 / 9;
}

/*
 * "body button.…" (0,1,2) outranks the Elementor Kit button rule
 * ".elementor-kit-{id} button" (0,1,1), which adds padding, a background
 * colour and a border radius. This file already loads after the Kit CSS
 * (priority 100), but the extra weight keeps it working when Elementor
 * prints its CSS later (e.g. inline or in the footer). The :hover/:focus
 * variants likewise outrank the Kit's and Hello Elementor's state rules.
 *
 * The width follows from the height cap: width = max height × ratio, never
 * wider than the column. The ratio therefore always holds; a thumbnail that
 * hits the cap is narrower than its column and is centred.
 */
body button.dy-video,
body button.dy-video:hover,
body button.dy-video:focus {
	position: relative;
	display: block;
	width: min(100%, calc(var(--dy-video-max-h) * var(--dy-video-ratio)));
	margin-inline: auto;
	aspect-ratio: var(--dy-video-ratio);
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--ground, #000);
	color: inherit;
	line-height: 0;
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
}

body button.dy-video:focus-visible {
	outline: 3px solid var(--dy-video-accent);
	outline-offset: 3px;
}

.dy-video__media,
.dy-video__image {
	display: block;
	width: 100%;
	height: 100%;
}

.dy-video__image {
	object-fit: cover;
}

/**/
/* Play button */

.dy-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: var(--dy-video-accent);
	color: var(--white, #fff);
	translate: -50% -50%;
	transition: scale 0.25s ease;
}

.dy-video:hover .dy-video__play,
.dy-video:focus-visible .dy-video__play {
	scale: 1.15;
}

/*
 * Small variant (play="small"): enough to show it is a video, without
 * covering the face in a row of thumbnails. Sits in the bottom left corner.
 */
.dy-video--play-small .dy-video__play {
	top: auto;
	bottom: 16px;
	right: 16px;
	left: auto;
	width: 40px;
	height: 40px;
	translate: none;
}

/* Solid icon: the Untitled UI outline path is filled as well as stroked. */
.dy-video__icon {
	width: 40px;
	height: 40px;
	margin-left: 5px; /* Optical centring: the triangle's visual weight sits left. */
	fill: currentColor;
	stroke: currentColor;
}

.dy-video--play-small .dy-video__icon {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}

/***
 * Dialog
 ***/

/*
 * The dialog fits a box of --dy-video-avail-w × --dy-video-avail-h: the width
 * is the smaller of the available width and the available height × ratio, so
 * the ratio always holds. On the side that does not limit, the margin grows.
 *
 *   Mobile and tablet   The whole screen minus 16px on each side.
 *   Desktop (1024px+)   85% of the screen width and height.
 *
 * video.js sets the format class per video and, when Vimeo reported it, the
 * video's exact ratio in --dy-video-ratio, which overrides the class.
 */
.dy-video-dialog {
	--dy-video-ratio: 9 / 16;
	--dy-video-avail-w: calc(100vw - 32px);
	--dy-video-avail-h: calc(100vh - 32px);
	width: min(var(--dy-video-avail-w), calc(var(--dy-video-avail-h) * var(--dy-video-ratio)));
	max-width: none;
	height: auto;
	max-height: none;
	aspect-ratio: var(--dy-video-ratio);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background-color: #000;
	opacity: 0;
	scale: 0.96;
	transition:
		opacity 0.25s ease,
		scale 0.25s ease,
		overlay 0.25s allow-discrete,
		display 0.25s allow-discrete;
}

.dy-video-dialog--landscape {
	--dy-video-ratio: 16 / 9;
}

/* dvh follows the mobile browser bars, so the 16px also holds on phones. */
@supports (height: 1dvh) {
	.dy-video-dialog {
		--dy-video-avail-h: calc(100dvh - 32px);
	}
}

@media (min-width: 1024px) {
	.dy-video-dialog {
		--dy-video-avail-w: 85vw;
		--dy-video-avail-h: 85vh;
	}

	@supports (height: 1dvh) {
		.dy-video-dialog {
			--dy-video-avail-h: 85dvh;
		}
	}
}

.dy-video-dialog[open] {
	opacity: 1;
	scale: 1;
}

/* Entry animation; browsers without @starting-style simply open without it. */
@starting-style {
	.dy-video-dialog[open] {
		opacity: 0;
		scale: 0.96;
	}
}

.dy-video-dialog::backdrop {
	background-color: rgb(0 0 0 / 0.25);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.dy-video-dialog__player {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The player is drawn 2px larger on every side than the dialog, which crops
 * it (overflow: hidden). The dialog follows the video's exact ratio, but its
 * size still lands on fractions of a pixel; Vimeo fills any gap with its own
 * black background inside the iframe, which CSS cannot reach. Cropping 2px
 * of video is not visible; a black line along the edge is.
 */
.dy-video-dialog__iframe {
	display: block;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	margin: -2px;
	border: 0;
}

/**/
/* Close button */

/*
 * A white icon without background or outline. A soft shade in the top right
 * corner of the video keeps it visible on light footage; it sits above the
 * player but lets every click through to it.
 */
.dy-video-dialog::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 96px;
	height: 96px;
	background: radial-gradient(circle at top right, var(--dy-video-corner), transparent 70%);
	pointer-events: none;
}

/*
 * Same specificity reasoning as the thumbnail. The outline is switched off
 * in every state, :focus-visible included, because showModal() moves focus
 * to this button on every open.
 */
body button.dy-video-dialog__close,
body button.dy-video-dialog__close:hover,
body button.dy-video-dialog__close:focus,
body button.dy-video-dialog__close:focus-visible {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #fff;
	line-height: 0;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

.dy-video-dialog__icon {
	width: 36px;
	height: 36px;
	fill: none;
	stroke: currentColor;
}

/**/
/* Scroll lock while the dialog is open (CSS only, no JS needed). */

html:has(.dy-video-dialog[open]) {
	overflow: hidden;
}

/***
 * Reduced motion
 ***/

@media (prefers-reduced-motion: reduce) {
	.dy-video__play,
	.dy-video-dialog {
		transition: none;
	}

	.dy-video:hover .dy-video__play,
	.dy-video:focus-visible .dy-video__play {
		scale: none;
	}
}