/**
 * Upgrade Elementor Horizontal Scroller
 *
 * Selectors are structural, not class-name based:
 *   .upg-hs-horizontal-scroll            the outer wrapper (grows tall, acts as scroll runway)
 *   .upg-hs-horizontal-scroll > .e-con   the track (this is what gets translated sideways)
 *   .upg-hs-horizontal-scroll > .e-con > .e-con   the panels
 *
 * Selecting "> .e-con" matches containers only, so widgets dropped into the
 * track are never mistaken for panels.
 */

/* ---------------------------------------------------------------- wrapper */

.upg-hs-horizontal-scroll {
	overflow: hidden;
	--initial-height: var(--min-height, 100vh);
}

/* A horizontal-scroll container nested inside another (i.e. the Enable toggle
   was also switched on for the track) must never clip. Its overflow box is
   translated sideways off-screen, so overflow:hidden there would hide every
   panel and render the section black. Keep it visible. */
.upg-hs-horizontal-scroll .upg-hs-horizontal-scroll {
	overflow: visible;
}

.upg-hs-horizontal-scroll > .e-con,
.upg-hs-horizontal-scroll > .e-container {
	transition: none;
	height: var(--initial-height, 100vh);
}

.upg-hs-horizontal-scroll.upg-hs-fixed > .e-con,
.upg-hs-horizontal-scroll.upg-hs-fixed > .e-container {
	position: fixed;
	top: 0;
	left: 0;
}

.upg-hs-horizontal-scroll.upg-hs-bottom {
	justify-content: flex-end;
}

.upg-hs-horizontal-scroll > .e-con > *,
.upg-hs-horizontal-scroll > .e-container > * {
	height: var(--min-height, 100vh);
}

/* ----------------------------------------------------------- progress bar */

.upg-hs-horizontal-scroll::after {
	content: "";
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: var(--progress-bar-height, 3px);
	background: var(--progress-bar-color, #FFFF00);
	transform: scaleX(calc(var(--progress, 0) * 100%));
	transform-origin: left;
	will-change: transform;
	transition: transform 0.1s linear;
	opacity: 0;
	pointer-events: none;
	z-index: 99;
}

.upg-hs-horizontal-scroll.upg-hs-bar-yes.upg-hs-fixed::after {
	opacity: 1;
}

.upg-hs-horizontal-scroll:not(.upg-hs-bar-yes)::after {
	display: none;
}

/* --------------------------------------------- disabled / vertical fallback */

.upg-hs-horizontal-scroll.upg-hs-off {
	height: auto !important;
}

.upg-hs-horizontal-scroll.upg-hs-off::after {
	display: none;
}

.upg-hs-horizontal-scroll.upg-hs-off > .e-con,
.upg-hs-horizontal-scroll.upg-hs-off > .e-container {
	flex-direction: column;
	height: auto;
	position: relative !important;
	transform: none !important;
}

.upg-hs-horizontal-scroll.upg-hs-off > .e-con > *,
.upg-hs-horizontal-scroll.upg-hs-off > .e-container > * {
	height: auto;
}

.upg-hs-horizontal-scroll.upg-hs-off > .e-con > .e-con,
.upg-hs-horizontal-scroll.upg-hs-off > .e-container > .e-container {
	width: 100%;
}

/* ------------------------------------------------------ scroll movement fx */

.e-con[class*="upg-hs-movement"],
.e-container[class*="upg-hs-movement"],
.elementor-widget[class*="upg-hs-movement"] .elementor-widget-container {
	transform:
		translateX(calc(var(--e-transform-translateX, 0px) + var(--translateX, 0) * -1px))
		translateY(calc(var(--e-transform-translateY, 0px) + var(--translateY, 0) * 1px))
		rotate(calc(var(--rotateZ, 0deg) + var(--rotate, 0) * 1deg));
	transition: none;
}

.e-con[class*="upg-hs-movement-translate-x"],
.e-container[class*="upg-hs-movement-translate-x"],
.elementor-widget[class*="upg-hs-movement-translate-x"] .elementor-widget-container {
	--translateX: calc(var(--parallax, 0) * var(--speed-x, 10) * var(--direction-x, 1));
}

.e-con[class*="upg-hs-movement-translate-y"],
.e-container[class*="upg-hs-movement-translate-y"],
.elementor-widget[class*="upg-hs-movement-translate-y"] .elementor-widget-container {
	--translateY: calc(var(--parallax, 0) * var(--speed-y, 10) * var(--direction-y, 1));
}

.e-con[class*="upg-hs-movement-rotate"],
.e-container[class*="upg-hs-movement-rotate"],
.elementor-widget[class*="upg-hs-movement-rotate"] .elementor-widget-container {
	--rotate: calc(var(--parallax, 0) * var(--speed-r, 10) * var(--direction-r, 1));
}

/* ==========================================================================
   MOBILE — 767px and under only. Desktop and tablet keep the behaviour above.
   ========================================================================== */

@media (max-width: 767px) {

	/* THE FLICKER FIX.
	   A transition here fights the polling loop that writes the transform:
	   each tick sets a new target before the last one lands, so the track
	   never settles. Must stay `none`. */
	.upg-hs-horizontal-scroll:not(.upg-hs-off) > .e-con,
	.upg-hs-horizontal-scroll:not(.upg-hs-off) > .e-container {
		transition: none !important;
		height: var(--min-height, 100svh);
	}

	/* svh stays put while the iOS URL bar animates. vh always means the
	   URL-bar-collapsed height, so it jumps mid-scroll. */
	.upg-hs-horizontal-scroll {
		--initial-height: var(--min-height, 100svh);
	}

	.upg-hs-horizontal-scroll:not(.upg-hs-off) > .e-con > *,
	.upg-hs-horizontal-scroll:not(.upg-hs-off) > .e-container > * {
		height: var(--min-height, 100svh);
	}

	/* Vertical panning only — stops a swipe being read as a horizontal drag. */
	.upg-hs-horizontal-scroll > .e-con,
	.upg-hs-horizontal-scroll > .e-container {
		touch-action: pan-y;
		overscroll-behavior-x: none;
	}

	/* Optional: pin every panel to exactly one viewport width. Needed when a
	   panel carries large side padding, because with border-box the padding
	   sum becomes a hard floor that width and max-width cannot go below. */
	.upg-hs-fullpanels-yes > .e-con > .e-con,
	.upg-hs-fullpanels-yes > .e-container > .e-container {
		flex: 0 0 100vw !important;
		width: 100vw !important;
		min-width: 100vw !important;
		max-width: 100vw !important;
	}
}

/* ==================================================== Elementor editor mode */

/* Inside the editor the transform puts panels off-canvas and they cannot be
   clicked. Release the pinning so the section stays editable. */
body.elementor-editor-active .upg-hs-horizontal-scroll {
	height: auto !important;
	overflow-x: auto;
}

body.elementor-editor-active .upg-hs-horizontal-scroll > .e-con,
body.elementor-editor-active .upg-hs-horizontal-scroll > .e-container {
	position: static !important;
	transform: none !important;
	height: var(--min-height, 100vh);
}

body.elementor-editor-active .upg-hs-horizontal-scroll::after {
	display: none;
}