/**
 * Adams Hero Video — Frontend Styles
 *
 * Units: em throughout (1em = 16px in body context per site convention).
 * Controls hiding: extra height + negative margin-top pushes the YouTube
 * branding strip below the visible edge, matching the xten-sections approach.
 *
 * @package AdamsBlocks
 * @since   1.0.0
 */

.adams-hero-video {
	position: relative;
	overflow: hidden;
	/* Dark fallback color while image/video loads */
	background-color: #1a1a2e;

	/* ── Fallback image ── */
	.adams-hero-video__fallback {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	/* ── Video wrapper ──
	   Starts invisible; JS sets data-loaded="true" on iframe load
	   which triggers the opacity transition.
	*/
	.adams-hero-video__video-wrap {
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow: hidden;
		opacity: 0;
		transition: opacity 0.8s ease;

		&[data-loaded="true"] {
			opacity: 1;
		}
	}

	/* ── YouTube iframe ──
	   CSS-only full coverage:
	   • min-width  = cover when container is taller than 16:9
	   • min-height = cover when container is wider than 16:9
	   Extra height + negative margin hides YouTube controls/branding strip.
	   (Pattern adapted from xten-sections: 110px = 6.875em, 55px = 3.4375em)
	*/
	.adams-hero-video__iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* Default fills container */
		width: 100%;
		height: 100%;
		/* Ensure 16:9 coverage in both axis */
		min-width: calc(100vh * 16 / 9);
		min-height: calc(100vw * 9 / 16);
		/* Push controls below visible edge */
		height: calc(100% + 6.875em);
		margin-top: -3.4375em;
		border: 0;
		pointer-events: none;
		height: 100%;
	}

	/* ── Color overlay ── */
	.adams-hero-video__overlay {
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
	}

	/* ── InnerBlocks content ── */
	.adams-hero-video__content {
		position: relative;
		z-index: 3;
		width: 100%;
	}
}

/* ── Mobile layout (≤ 48em / 768px) ─────────────────────────────────────────
   Pull the video out of absolute/background mode and display it inline at
   16:9 above the content. The fallback image acts as a poster underneath
   until the iframe loads, then fades out as the video fades in.
*/
@media (max-width: 48em) {
	.adams-hero-video {
		flex-direction: column;
		min-height: auto !important;

		/* ── 16:9 container holds both fallback + video ── */
		.adams-hero-video__fallback,
		.adams-hero-video__video-wrap {
			position: relative;
			inset: auto;
			width: 100%;
		}

		.adams-hero-video__video-wrap {
			aspect-ratio: 16 / 9;
			/* aspect-ratio: 2.39 / 1; */
			overflow: hidden;
			z-index: 1;
			.adams-hero-video__iframe {
				/* Start transparent so fallback shows as poster, fade in on load */
				opacity: 0;
				transition: opacity 0.6s ease;
			}

			&[data-loaded="true"] {
				.adams-hero-video__iframe{
					opacity: 1;
				}
			}
		}

		.adams-hero-video__fallback {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		/* Reset all background-video sizing tricks */
		.adams-hero-video__iframe {
			position: absolute;
			transform: none;
			inset: 0;
			width: 100%;
			height: 100%;
			min-width: 100%;
			min-height: 100%;
			margin-top: 0;
			aspect-ratio: 16 / 9;
			height: auto;
			width: auto;
		}

		.adams-hero-video__overlay {
			display: none;
		}

		.adams-hero-video__content {
			padding: 1.5em;
		}
	}
}