/**
 * Self-hosted background-video component (v1.4.69).
 *
 * Layering: video (z 0, behind) → optional overlay (z 1) → content (z 2). The
 * video layer never intercepts pointer events, so links/buttons/text in the
 * content stay clickable. The section wrapper's own background-color /
 * background-image is the fallback when the video is absent or fails to paint.
 *
 * Used directly by patterns/hero.php (the `.tma-bg-video` layer is injected
 * into `.tma-hero--has-video`) and by tma_background_video_section() for
 * standalone sections elsewhere.
 */

.tma-bg-video-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Full-bleed video layer, behind content, non-interactive. max-width:none
   defeats the constrained-layout cap that would otherwise hold the absolute
   layer to the parent's content width (e.g. the hero's 880px), so the video
   fills the whole section once the section itself is full-width. */
.tma-bg-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	pointer-events: none;
	background: var(--tma-black, #0A0A0A);
}

.tma-bg-video__media {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%); /* cover fallback for browsers without object-fit */
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Optional dark overlay for text readability (opacity set inline per call). */
.tma-bg-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--tma-black, #0A0A0A);
	pointer-events: none;
}

/* Content sits above the video/overlay and remains interactive. */
.tma-bg-video-section__content {
	position: relative;
	z-index: 2;
	width: 100%;
}