/**
 * ScrollScrub for Elementor — Frontend Styles
 *
 * These rules establish the outer/sticky layout and position
 * the video + overlay behind the container's Elementor content.
 * All of this is scoped to .scrollscrub-outer so it never bleeds
 * into other containers.
 */

/* ── Outer container (the tall scroll range box) ──────────────────────── */
.scrollscrub-outer {
	/* height is set inline via data attribute in PHP */
	position: relative;
	overflow: visible !important; /* must not clip the sticky child */
}

/* ── Sticky stage (locks to viewport while outer scrolls past) ─────────── */
.scrollscrub-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;

	/* Stack children: video behind, content on top */
	display: flex;
	flex-direction: column;
}

/* ── Video element (fullscreen, behind everything) ─────────────────────── */
.scrollscrub-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	/* Never let the browser try to show controls or interact */
	pointer-events: none;
	user-select: none;
}

/* ── Overlay (sits above video, below content) ──────────────────────────── */
.scrollscrub-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ── Fallback image (mobile) ────────────────────────────────────────────── */
.scrollscrub-fallback {
	display: none; /* shown via JS on touch devices */
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	pointer-events: none;
}

/* ── Content layer (Elementor widgets, nested containers) ───────────────── */
.scrollscrub-sticky > .elementor-container,
.scrollscrub-sticky > .e-con-inner {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* ── Mobile: hide section entirely ─────────────────────────────────────── */
@media (max-width: 767px) {

	.scrollscrub-outer[data-scrollscrub-mobile="hide"] {
		display: none;
	}

	/* Loop mode: restore normal height, disable sticky */
	.scrollscrub-outer[data-scrollscrub-mobile="loop"] {
		height: 100vh !important;
	}

	.scrollscrub-outer[data-scrollscrub-mobile="loop"] .scrollscrub-sticky {
		position: relative;
	}

	.scrollscrub-outer[data-scrollscrub-mobile="loop"] .scrollscrub-video {
		display: block;
	}

	/* Fallback image mode */
	.scrollscrub-outer[data-scrollscrub-mobile="fallback"] {
		height: 100vh !important;
	}

	.scrollscrub-outer[data-scrollscrub-mobile="fallback"] .scrollscrub-sticky {
		position: relative;
	}

	.scrollscrub-outer[data-scrollscrub-mobile="fallback"] .scrollscrub-video {
		display: none;
	}

	.scrollscrub-outer[data-scrollscrub-mobile="fallback"] .scrollscrub-fallback {
		display: block;
	}
}