/**
 * VM Video Block
 *
 * @package club-garrigue
 * @since 1.0.0
 */

/* ─── Block — full bleed, full viewport height ───────────────────── */

.vm-video-block {
	position: relative;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	height: calc(100vh - 91.75px);
	overflow: hidden;
	background-color: #000;
}

/* ─── Self-hosted <video> ────────────────────────────────────────── */

.vm-video-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Overlay (thumbnail + play button) ─────────────────────────── */

.vm-video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(28, 26, 23, 0.45);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: opacity 0.4s ease;
}

.vm-video-overlay--has-thumb {
	background-color: transparent; /* thumb handles background, dim via ::after */
}

.vm-video-overlay--has-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(28, 26, 23, 0.35);
	pointer-events: none;
}

/* Thumbnail-only: still image + dim, no play / no video — not interactive */
.vm-video--thumbnail-only .vm-video-overlay {
	cursor: default;
	pointer-events: none;
}

/* Fade out overlay when video is playing (self-hosted) */
.vm-video-block.is-playing .vm-video-overlay {
	opacity: 0;
	pointer-events: none;
}

/* ─── Play button ────────────────────────────────────────────────── */

.vm-video-play-btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition:
		background  0.25s ease,
		border-color 0.25s ease,
		transform   0.25s ease;
}

.vm-video-play-btn:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: #fff;
	transform: scale(1.08);
}

.vm-video-play-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* Triangle icon — pure CSS */
.vm-video-play-icon {
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px; /* optical centre offset */
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 22px solid #fff;
}

/* ─── Editor placeholder ─────────────────────────────────────────── */

.vm-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-style: italic;
	background: #1a1a1a;
}

/* ─── Lightbox ───────────────────────────────────────────────────── */

.vm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vm-lightbox[hidden] {
	display: none;
}

/* Dark backdrop */
.vm-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 9, 8, 0.92);
	cursor: pointer;
}

/* Centred content */
.vm-lightbox-content {
	position: relative;
	z-index: 1;
	width: min(90vw, 1100px);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	animation: vm-lightbox-in 0.3s ease;
}

@keyframes vm-lightbox-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* Close button */
.vm-lightbox-close {
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.vm-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: rotate(90deg);
}

/* 16:9 iframe wrapper */
.vm-lightbox-iframe-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}

.vm-lightbox-iframe-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ─── Scroll lock helpers (applied to html + body by JS) ────────── */

html.vm-scroll-locked,
html.vm-scroll-locked body {
	overflow: hidden;
}

/* ─── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vm-video-overlay,
	.vm-video-play-btn,
	.vm-lightbox-content {
		transition: none;
		animation: none;
	}
}