/* ==================================================

	Video modal

================================================== */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 200;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.5);

	--plyr-color-main: var(--blue);
}

/* --deel-purple is declared on :root, so it resolves under either skin */
.has-skin-deel .video-modal,
.has-skin-bombay .video-modal {
	--plyr-color-main: var(--deel-purple);
}

/* base display beats the [hidden] UA style */
.video-modal[hidden] {
	display: none;
}

.video-modal__frame {
	position: relative;

	/* @match video_modal_ratio - 16:9 default aspect ratio, the player's default and the CSS var fallback */
	width: min(74vw, calc(80vh * var(--video-modal-ratio, 16 / 9)));
}

/* frame qualifier outranks plyr.css's `.plyr button { width: auto }` reset */
.video-modal__frame .video-modal__close {
	position: absolute;
	top:   10px;
	right: 10px;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	width:  32px;
	height: 32px;

	border-radius: 3px;
	/* background-color: rgba(0, 0, 0, 0.55); */
	/* opacity timing matches the .plyr__controls fade */
	transition: .05s background-color linear, opacity .4s ease-in-out;

	color: var(--white);
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
	background-color: var(--plyr-color-main);
}

/* page ring sinks into the video; white like the glyph */
.video-modal__close:focus-visible {
	outline-color: var(--white);
}

/* fades with Plyr's idle chrome; focus holds it; pointer off while faded so an approaching mouse revives the chrome instead of clicking it */
.plyr--hide-controls .video-modal__close:not(:focus-visible) {
	opacity: 0;
	pointer-events: none;
}

.video-modal__close-icon {
	width: 16px;
	height: 16px;
}

.video-modal__frame .plyr {
	width: 100%;
}

/* -------------------------------------
	=Mobile
------------------------------------- */

@media ( max-width: 1076px ) {

	.video-modal__frame {
		width: 100%;
	}

}