/* =============================================================================
   HAI X-Scroll: gepinde horizontale strip.

   Twee toestanden. Onder de breekpunt-breedte, en zonder JS, is dit gewoon een
   strip die je opzij veegt: geen pinning, geen transform, alles blijft werken.
   Boven de breekpunt-breedte zet de JS de klasse `is-pinned` en wordt de sectie
   zo hoog gemaakt dat er verticale scroll is om de horizontale beweging mee aan
   te sturen.
   ============================================================================= */

.hai-xscroll {
	--hai-xs-gap: 24px;
	--hai-xs-progress: #2f5d43;
	--hai-xs-progress-track: rgba(24, 26, 22, 0.12);
}

/* --- Veegstrip: de basis, ook zonder JS ---------------------------------- */

.hai-xscroll .hai-xs-track,
.hai-xscroll [class*="listing-grid__items"] {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hai-xs-gap);
}

.hai-xscroll:not(.is-pinned) [class*="listing-grid__items"] {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Ruimte voor de scrollbar zodat die de kaarten niet overlapt. */
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}

.hai-xscroll:not(.is-pinned) [class*="listing-grid__item"] {
	scroll-snap-align: start;
}

/* JetEngine zet zijn kolombreedtes als percentage op de items (grid-col-desk-N).
   In een `width: max-content` rij is een percentagebreedte circulair: de rij
   krimpt tot niets en er valt niets meer te schuiven. Die breedtes moeten hier
   dus wijken. Het is een gerichte overschrijving van een plugin-regel binnen
   deze ene component, geen algemene !important-gewoonte. */
.hai-xscroll .jet-listing-grid__items > .jet-listing-grid__item,
.hai-xscroll [class*="listing-grid__items"] > [class*="listing-grid__item"] {
	flex: 0 0 auto !important;
	width: clamp(240px, 74vw, 420px) !important;
	max-width: none !important;
}

/* --- Gepinde toestand ----------------------------------------------------- */

/* De container zelf is de aandrijving: de JS geeft hem een hoogte gelijk aan de
   horizontale afstand plus een schermhoogte. De stage blijft plakken terwijl je
   die hoogte doorscrolt.

   `display: block` is hier essentieel. Elementor-containers zijn flex, en een
   sticky kind van een flexcontainer wordt standaard uitgerekt over de volle
   hoogte van de flexregel. Dan is er niets meer om binnen te plakken en scrollt
   de inhoud gewoon weg: de sectie blijft leeg achter terwijl de aandrijfhoogte
   doorloopt. Als block is de stage een gewoon blokkind en werkt sticky wel. */
.hai-xscroll.is-pinned {
	display: block;
}

.hai-xscroll.is-pinned > .e-con-inner,
.hai-xscroll.is-pinned > .hai-xs-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.hai-xscroll.is-pinned [class*="listing-grid__items"] {
	overflow: visible;
	width: max-content;
	scroll-snap-type: none;
	padding-bottom: 0;
	will-change: transform;
}

.hai-xscroll.is-pinned .jet-listing-grid__items > .jet-listing-grid__item,
.hai-xscroll.is-pinned [class*="listing-grid__items"] > [class*="listing-grid__item"] {
	width: clamp(320px, 26vw, 440px) !important;
}

/* --- Voortgangsbalk ------------------------------------------------------- */

.hai-xs-progress {
	position: relative;
	height: 2px;
	background: var(--hai-xs-progress-track);
	margin-top: 32px;
	flex: 0 0 auto;
}

.hai-xs-progress span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var(--hai-xs-progress);
	transform-origin: left center;
	transform: scaleX(0.08);
	will-change: transform;
}

.hai-xscroll:not(.is-pinned) .hai-xs-progress {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	/* Scroll-gestuurde zijwaartse beweging is precies het soort effect waar
	   deze voorkeur over gaat. Terugvallen op de veegstrip. */
	.hai-xscroll.is-pinned > .e-con-inner,
	.hai-xscroll.is-pinned > .hai-xs-stage {
		position: static;
		height: auto;
		overflow: visible;
	}

	.hai-xscroll.is-pinned [class*="listing-grid__items"] {
		overflow-x: auto;
		width: auto;
		transform: none !important;
	}

	.hai-xs-progress {
		display: none;
	}
}