/**
 * Video Modal — окно с роликом YouTube (пакет правок №2, п. 2.1).
 *
 * Значения — из прототипа пакета `hero-полоса-новинка-видео.html`:
 * окно до 1100, кадр 16:9 со скруглением 12, крестик 40 над кадром.
 *
 * @package AJ1MOTO.COM
 */

.video-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-24);
}

.video-modal[hidden] {
	display: none;
}

.video-modal__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-black-85);
}

.video-modal__box {
	position: relative;
	width: calc(1100 / var(--vw-base) * 100vw);
	max-width: 100%;
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-12);
	background: var(--color-black);
	overflow: hidden;
}

.video-modal__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	top: calc(-48 / var(--vw-base) * 100vw);
	right: 0;
	width: calc(40 / var(--vw-base) * 100vw);
	height: calc(40 / var(--vw-base) * 100vw);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: var(--fs-26);
	line-height: var(--lh-100);
	color: var(--color-white);
	background: var(--color-white-10);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.video-modal__close:hover {
	background: var(--color-accent);
}

@media (max-width: 767px) {
	.video-modal {
		padding: var(--space-16);
	}

	.video-modal__box {
		width: 100%;
	}
}