/* ── CFA Video Preview Shortcode ──────────────────────────────────────────── */

/*
 * The component uses two stacked layers inside a 16:9 container:
 *
 *  z-index 1 │ .cfa-video-preview__poster  (featured image — always present)
 *  z-index 2 │ .cfa-video-preview__player  (iframe / <video> — injected by JS)
 *
 * The poster provides the visual fallback while the video is loading or when it
 * is out of view. Once the player element is active (.is-active) the poster
 * fades out but stays in the DOM so it is instantly visible again when the
 * player is removed (item leaves the viewport).
 */

.cfa-video-preview {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
}

/* ── Poster (fallback image) ────────────────────────────────────────────────── */

.cfa-video-preview__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: opacity 0.4s ease;
}

/* ── Player slot ────────────────────────────────────────────────────────────── */

.cfa-video-preview__player {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.cfa-video-preview__player iframe,
.cfa-video-preview__player video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000;
	/* Prevent any click from reaching the iframe / video element */
	pointer-events: none;
}

/* ── Click-blocker overlay ─────────────────────────────────────────────────── */

.cfa-video-preview__overlay {
	position: absolute;
	inset: 0;
	z-index: 3; /* above player (2), below mute btn (10) */
	cursor: default;
}

/* ── Active state — fade out poster once the player is injected ─────────────── */

.cfa-video-preview.is-active .cfa-video-preview__poster {
	opacity: 0;
	pointer-events: none;
}

/* ── Mute / unmute toggle button ────────────────────────────────────────────── */

.cfa-video-preview__mute-btn {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba( 0, 0, 0, 0.55 );
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	/* Hidden until the video becomes active */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, background 0.15s ease;
}

.cfa-video-preview.is-active .cfa-video-preview__mute-btn {
	opacity: 1;
	pointer-events: auto;
}

.cfa-video-preview__mute-btn:hover {
	background: rgba( 0, 0, 0, 0.8 );
}

/* Default state = muted → show the muted icon, hide the unmuted icon */
.cfa-video-preview__icon-unmuted {
	display: none;
}

/* Unmuted state → swap icons */
.cfa-video-preview.is-unmuted .cfa-video-preview__icon-muted {
	display: none;
}

.cfa-video-preview.is-unmuted .cfa-video-preview__icon-unmuted {
	display: block;
}