/**
 * YouTube video trigger + modal (shared).
 *
 * @package ALW
 * @since   1.0.0
 */

.alw-video-trigger {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--alw-radius-card);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.alw-video-trigger:focus-visible {
	outline: 2px solid var(--alw-primary);
	outline-offset: 4px;
}

.alw-video-trigger__poster {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--alw-transition);
}

.alw-video-trigger:hover .alw-video-trigger__poster,
.alw-video-trigger:focus-visible .alw-video-trigger__poster {
	transform: scale(1.02);
}

.alw-video-trigger__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--alw-white);
}

.alw-video-trigger__play::before {
	content: "";
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--alw-foreground-80);
	transition: background-color var(--alw-transition);
}

.alw-video-trigger:hover .alw-video-trigger__play::before,
.alw-video-trigger:focus-visible .alw-video-trigger__play::before {
	background-color: var(--alw-primary);
}

.alw-video-trigger__play svg {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
	margin-inline-start: 4px;
}

.alw-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

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

.alw-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(10 30 40 / 0.72);
}

.alw-video-modal__dialog {
	position: relative;
	width: min(960px, 100%);
}

.alw-video-modal__close {
	position: absolute;
	top: -48px;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--alw-white);
	color: var(--alw-foreground);
	cursor: pointer;
	transition: background-color var(--alw-transition);
}

.alw-video-modal__close:hover,
.alw-video-modal__close:focus-visible {
	background-color: var(--alw-gold);
	color: var(--alw-gold-foreground);
}

.alw-video-modal__close svg {
	display: block;
	width: 20px;
	height: 20px;
}

.alw-video-modal__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--alw-radius-card);
	overflow: hidden;
	background-color: var(--alw-foreground);
}

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

body.alw-video-modal-open {
	overflow: hidden;
}