/**
 * SF Elementor Addons — Scroll effect (two widgets).
 *
 *   SF Scroll IMAGE   (.sfea-root.sfea-img-widget > .sfea-overlay > .sfea-img/.sfea-scrim)
 *       Front end: JS measures the overlay's rest box, then MOVES .sfea-overlay into
 *       the trigger container (tagged '.sfea-stage' by JS, made position:relative +
 *       overflow:hidden). The overlay becomes absolute inset:0 and grows via
 *       --sfea-progress (scale or reveal mode) + --sfea-radius. The original
 *       .sfea-img-widget root is then display:none (occupies no space).
 *
 *   SF Scroll CONTENT (.sfea-content-root > .sfea-content-inner > user content)
 *       Front end: hidden entirely by default. JS adds '.sfea-content-connected' only
 *       when it sits inside a '.sfea-stage' (an image's container) and that stage has
 *       not already taken a content widget. Connected content is an absolute overlay
 *       above the image (z-index 20), fading in purely off the container's 'sfea-open'
 *       class (set by the image's scroll-hold in JS). No separate progress.
 */

/* ------------------------------------------------------------------ *
 * STICKY-SCRUB scaffold (added by JS on the front end): the stage is moved into a
 * '.sfea-track' and PINNED (position:sticky, top set inline = centred) while you scroll
 * through the track; the '.sfea-spacer' provides the extra scroll height. The track must
 * NOT clip (sticky needs a non-clipping containing block).
 * ------------------------------------------------------------------ */
.sfea-track {
	position: relative;
	width: 100%;
	overflow: visible;
}
.sfea-spacer {
	width: 100%;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * IMAGE — rest box. The widget FILLS its container's height when the container
 * is given one (so making the container taller grows the image, like a normal
 * Elementor element). When the container has no explicit height, height:100%
 * resolves to auto and the aspect-ratio takes over as the natural rest size.
 * Propagate height down the Elementor wrapper chain so the % heights resolve.
 * ------------------------------------------------------------------ */
.elementor-widget-sf-scroll-image,
.elementor-widget-sf-scroll-video {
	align-self: stretch;   /* fill the container's cross axis (e.g. width in a column) */
	flex-grow: 1;          /* fill the container's main axis (e.g. height) so a tall column is filled */
}
.elementor-widget-sf-scroll-image > .elementor-widget-container,
.elementor-widget-sf-scroll-image .sfea-img-widget,
.elementor-widget-sf-scroll-video > .elementor-widget-container,
.elementor-widget-sf-scroll-video .sfea-video-widget {
	height: 100%;
	width: 100%;
}
.sfea-img-widget .sfea-overlay,
.sfea-video-widget .sfea-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--sfea-rest-aspect, 3 / 2);
}

/* VIDEO media layer (.sfea-media) plays the same role as .sfea-img — the engine animates its
 * box; the <video>/<iframe> inside covers it. Critical sizing is also inlined by PHP/JS. */
.sfea-media {
	overflow: hidden;
}

/* Mobile (plain video): the widget normally FILLS its container's height (height:100% down the
 * chain). With the section's min-height removed (theme side) we let the height resolve to auto so
 * the 16:9 aspect-ratio takes over — a clean, CONTAINED video the same proportion as the archive
 * main video (instead of a 700px-tall box that overflowed the section). */
@media (max-width: 767px) {
	.elementor-widget-sf-scroll-video > .elementor-widget-container,
	.elementor-widget-sf-scroll-video .sfea-video-widget,
	.sfea-video-widget .sfea-overlay {
		height: auto !important;
	}
	/* Stop the widget stretching to fill a tall flex container, so the 16:9 aspect-ratio decides
	   the height (otherwise it stayed 700px tall and overflowed the section). */
	.elementor-widget-sf-scroll-video .sfea-video-widget {
		flex-grow: 0 !important;
		align-self: auto !important;
	}
	.sfea-video-widget .sfea-overlay {
		aspect-ratio: 16 / 9 !important;
	}
}

.sfea-media .sfea-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.sfea-media .sfea-embed {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border: 0;
}

/* After reparent, JS sets position:absolute; inset:0 inline. These rules give
 * the overlay its stacking + clipping inside the '.sfea-stage' container. */
.sfea-overlay {
	z-index: 10;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image/video media fills the overlay (= the container). Grows FROM the origin box (set by JS
 * as % of the container) out to the full box. Two modes: SCALE zooms the box up; REVEAL uses a
 * clip-path window. Cover keeps aspect (no squish). Including .sfea-media gives the video layer
 * the same position base (the engine also inlines this on the front end). */
.sfea-img,
.sfea-media {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Radius interpolates initial → full-scaled with progress (JS inlines the same on the
	 * front end; this covers the editor, where progress is unset = 0 = the initial radius). */
	border-radius: calc(var(--sfea-radius, 0px) + (var(--sfea-radius-end, var(--sfea-radius, 0px)) - var(--sfea-radius, 0px)) * var(--sfea-progress, 0));
	box-shadow: var(--sfea-shadow, none);
	will-change: transform, clip-path;
}

/* SCALE: the image's BOX grows from the origin box (ow×oh at ol,ot) to the full container.
 * background-size:cover re-fits the image to each box → it keeps aspect and NEVER stretches,
 * and the rest size is exactly the placed origin box. JS inlines the same on the front end. */
.sfea-overlay.sfea-mode-scale .sfea-img,
.sfea-overlay.sfea-mode-scale .sfea-media {
	inset: auto;
	left: calc(var(--sfea-ol, 22%) * (1 - var(--sfea-progress, 1)));
	top: calc(var(--sfea-ot, 16%) * (1 - var(--sfea-progress, 1)));
	width: calc(var(--sfea-ow, 56%) + (var(--sfea-fw, 100%) - var(--sfea-ow, 56%)) * var(--sfea-progress, 1));
	height: calc(var(--sfea-oh, 68%) + (var(--sfea-fh, 100%) - var(--sfea-oh, 68%)) * var(--sfea-progress, 1));
	transform: translate(calc(-1 * var(--sfea-pin-gap-x, 0px) * var(--sfea-progress, 1)), calc(-1 * var(--sfea-pin-gap-y, 0px) * var(--sfea-progress, 1)));
}

/* REVEAL: keep the image full-cover and reveal it via a clip-path window growing
 * from the origin box to the full box. */
.sfea-overlay.sfea-mode-reveal .sfea-img,
.sfea-overlay.sfea-mode-reveal .sfea-media {
	inset: 0;
	clip-path: inset(
		calc((1 - var(--sfea-progress, 1)) * var(--sfea-rt, 16%))
		calc((1 - var(--sfea-progress, 1)) * var(--sfea-rr, 22%))
		calc((1 - var(--sfea-progress, 1)) * var(--sfea-rb, 16%))
		calc((1 - var(--sfea-progress, 1)) * var(--sfea-rl, 22%))
		round var(--sfea-radius, 0px)
	);
}

/* Optional darkening tint above the image, below any content overlay. */
.sfea-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--sfea-scrim, transparent);
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * CONTENT — separate widget. Hidden entirely unless JS connects it to a
 * stage. Connected = absolute overlay above the image, faded in by the
 * container's 'sfea-open' class.
 * ------------------------------------------------------------------ */
/* The container holding an SF Scroll Content is the positioning context so the
 * absolute content fills it. On the front end the image JS also sets the stage
 * container relative; this :has rule additionally covers the Elementor editor
 * (where the effect JS does not run). */
.e-con:has(.sfea-content-root),
.elementor-widget-wrap:has(.sfea-content-root),
.elementor-column:has(.sfea-content-root) {
	position: relative;
}

/* The SF Scroll Content widget WRAPPER itself is the absolute overlay that fills the
 * stage container — applied AUTOMATICALLY so no per-widget custom CSS is needed. (The
 * positioning must live on the Elementor widget element, not the inner .sfea-content-root,
 * or it only fills the thin in-flow widget box instead of the parent container.) Applied
 * only when the content is actually shown — connected on the front end, or "Show in editor"
 * on — so when hidden/unconnected the widget stays in normal flow and never blocks editing
 * the container's other content. The parent is the positioning context (image JS sets the
 * stage relative on the front end; the :has rule above covers the editor). */
.elementor-widget-sf-scroll-content:has(.sfea-content-connected),
.elementor-widget-sf-scroll-content:has(.sfea-content-editmode.sfea-content-editor-show) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	pointer-events: none;
}

.sfea-content-root {
	display: none;
}

/* Connected (front end): fills the absolute wrapper; revealed only when the image opens.
 * Must be absolute (not height:100%) — Elementor's auto-height .elementor-widget-container
 * sits between the wrapper and this root, so height:100% collapses to the content height (a
 * thin band). inset:0 anchors directly to the absolute wrapper = the full stage section. */
.sfea-content-root.sfea-content-connected {
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.sfea-stage.sfea-open .sfea-content-root.sfea-content-connected {
	opacity: 1;
	pointer-events: auto;
}

/* Inner wrapper fills the overlay and centres the user's content (without forcing
 * text alignment — the user controls their own content's alignment). */
.sfea-content-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------ *
 * Reduced motion: image static open (JS sets progress 1 + container 'sfea-open');
 * connected content shown.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.sfea-img,
	.sfea-media {
		clip-path: none;
	}
	.sfea-content-root.sfea-content-connected {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Elementor EDIT MODE — JS does NOT run / reparent. Render in place + editable.
 * ------------------------------------------------------------------ */

/* IMAGE: static look, image visible, no pin/scroll-hold. Fills the container's height
 * (so a taller container grows the image, matching the live behaviour); falls back to the
 * image aspect-ratio when the container has no explicit height. min-height keeps it
 * editable if it would otherwise collapse. */
.sfea-root.sfea-editmode .sfea-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--sfea-rest-aspect, 3 / 2);
	min-height: 120px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sfea-root.sfea-editmode .sfea-img,
.sfea-root.sfea-editmode .sfea-media {
	clip-path: none;
}

/* CONTENT: editor toggles. The editor JS bails — these are pure CSS so the drop
 * zone is editable when shown, hidden when toggled off (so the user can edit the
 * container's other content). */
.sfea-content-root.sfea-content-editmode {
	display: block;
}

.sfea-content-root.sfea-content-editmode.sfea-content-editor-show {
	display: block;
	position: absolute;
	inset: 0;
	opacity: 1;
	pointer-events: auto;
	/* EDITOR ONLY backdrop — the colour comes inline from the widget (default white),
	   or the synced scroll image is painted inline by the editor JS. inset:0 makes the
	   backdrop fill the whole stage section (cover) instead of a thin content-height band.
	   The live front end stays transparent. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sfea-content-root.sfea-content-editmode.sfea-content-editor-hide {
	display: none;
}

/* Nice-to-have: hint when the connected content drop zone is empty in the editor. */
.sfea-content-root.sfea-content-editmode .sfea-content-inner:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 6px;
}

.sfea-content-root.sfea-content-editmode .sfea-content-inner:empty::before {
	content: "SF Scroll Content — drop content here";
	color: rgba(0, 0, 0, 0.45);
	font-size: 13px;
}