/* PrettyWellFit Elements — Horizontal Scroll Slides
   Structure:
   .pwf-hslides           tall scroll track (height set inline from slide count x distance)
   .pwf-hslides__sticky   pinned viewport
   .pwf-hslides__rail     flex row of slides, translated horizontally by scroll
   .pwf-hslides__slide    one full-viewport slide holding a nested container
*/

.pwf-hslides {
	position: relative;
	width: 100%;
}

.pwf-hslides__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.pwf-hslides--blend .pwf-hslides__sticky {
	overflow: visible;
	overflow-x: clip;
}

/* Only the slide holding the finale releases vertically: the extended
   video leaves through its bottom while every other slide, and the
   horizontal axis everywhere, stays contained. */
.pwf-hslides--blend .pwf-hslides__slide:has(.pwf-reveal) {
	overflow: visible;
	overflow-x: clip;
}

.pwf-hslides__rail {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	will-change: translate;
}

.pwf-hslides__slide {
	flex: 0 0 100vw;
	width: 100vw;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/* A slide holding a finale is always full bleed. */
.pwf-hslides .pwf-hslides__slide--finale {
	padding: 0 !important;
}

/* The nested container fills its slide, whatever Elementor generation
   produced it. */
.pwf-hslides__slide > * {
	height: 100%;
	max-width: none;
}

/* ---------- Elementor editor: stacked, freely editable ----------
   In the editor, slide containers are mounted directly into the rail (no
   .pwf-hslides__slide wrappers), so the stacked layout targets them. */

.elementor-editor-active .pwf-hslides {
	height: auto !important;
}

.elementor-editor-active .pwf-hslides__sticky {
	position: static;
	height: auto;
	overflow: visible;
}

.elementor-editor-active .pwf-hslides__rail {
	display: block;
	translate: none !important;
}

.elementor-editor-active .pwf-hslides__rail > .e-con,
.elementor-editor-active .pwf-hslides__rail > .elementor-element,
.elementor-editor-active .pwf-hslides__slide {
	width: 100%;
	flex: none;
	height: auto;
	min-height: 30vh;
	overflow: visible;
	outline: 1px dashed rgba(255, 255, 255, 0.25);
	outline-offset: -1px;
	margin-bottom: 12px;
}


/* Mobile stack mode: below the breakpoint the section is normal vertical
   flow — no pin, no rail travel. The reveal finale inside a slide rests
   on its composed frame; the takeover is desktop behavior. */
@media ( max-width: 1024px ) {
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet {
		height: auto !important;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet .pwf-hslides__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet .pwf-hslides__rail {
		display: block;
		width: auto;
		transform: none !important;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet .pwf-hslides__slide {
		flex: none;
		width: 100%;
		height: auto;
		overflow: visible;
	}
	/* Slide containers are authored as viewport-filling rail panels;
	   in flow those heights are dead space, so each stacked slide
	   sizes to its content. Inner containers keep their settings. */
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet .pwf-hslides__slide > .e-con,
	.pwf-hslides--mb-stack.pwf-hslides--sbp-tablet .pwf-hslides__rail > .e-con {
		min-height: 0 !important;
		height: auto !important;
	}
}


/* Mobile stack mode: below the breakpoint the section is normal vertical
   flow — no pin, no rail travel. The reveal finale inside a slide rests
   on its composed frame; the takeover is desktop behavior. */
@media ( max-width: 767px ) {
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile {
		height: auto !important;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile .pwf-hslides__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile .pwf-hslides__rail {
		display: block;
		width: auto;
		transform: none !important;
	}
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile .pwf-hslides__slide {
		flex: none;
		width: 100%;
		height: auto;
		overflow: visible;
	}
	/* Slide containers are authored as viewport-filling rail panels;
	   in flow those heights are dead space, so each stacked slide
	   sizes to its content. Inner containers keep their settings. */
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile .pwf-hslides__slide > .e-con,
	.pwf-hslides--mb-stack.pwf-hslides--sbp-mobile .pwf-hslides__rail > .e-con {
		min-height: 0 !important;
		height: auto !important;
	}
}

/* Chrome's scroll anchoring silently adjusts the scroll position when
   content near its anchor node moves — and a scroll-driven engine
   moves content every frame, so anchoring fires exactly when the
   choreography starts and reads as a sudden jog. Standard equipment
   for scroll-linked work: disable it while this widget is on the
   page. */
html:has(.pwf-hslides) {
	overflow-anchor: none;
}