/* Gedeelde carrousel voor de blokken van Las Hotellas. Overgenomen uit de
   bestuurscarousel; de wortel draagt data-lh-carousel, de baan .lh-carousel en
   de kaarten .lh-slide. Kaartbreedte en randen rekent het script uit.

   Op desktop blijft de baan binnen het blok en vervagen de kaarten aan de rand
   naar doorzichtig. Alleen op mobiel loopt hij door tot de schermrand, zodat de
   volgende kaart zichtbaar naar binnen steekt. Het blok zet zelf --lh-carousel-gap. */
[data-lh-carousel] { position:relative; }
[data-lh-carousel] > .lh-carousel {
	display:flex;
	align-items:stretch;
	gap:var(--lh-carousel-gap,var(--wp--preset--spacing--30,20px));
	position:relative;
	box-sizing:border-box;
	width:calc(100% + var(--las-hotellas-carousel-bleed-left,0px) + var(--las-hotellas-carousel-bleed-right,0px));
	max-width:none;
	margin-left:calc(0px - var(--las-hotellas-carousel-bleed-left,0px));
	margin-right:calc(0px - var(--las-hotellas-carousel-bleed-right,0px));
	padding-left:0!important;
	padding-right:0!important;
	overflow-x:auto;
	scroll-padding-inline-start:var(--las-hotellas-carousel-bleed-left,0px);
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
}
.lh-carousel-spacer {
	flex:0 0 var(--las-hotellas-carousel-bleed-left,0px);
	margin-right:calc(0px - var(--lh-carousel-gap,var(--wp--preset--spacing--30,20px)));
}
.lh-carousel-spacer--end {
	flex-basis:var(--las-hotellas-carousel-bleed-right,0px);
	margin-right:0;
	margin-left:calc(0px - var(--lh-carousel-gap,var(--wp--preset--spacing--30,20px)));
}
[data-lh-carousel] > .lh-carousel.is-animating { scroll-snap-type:none; }
[data-lh-carousel] > .lh-carousel::-webkit-scrollbar { display:none; }
[data-lh-carousel] > .lh-carousel > .lh-slide {
	flex:0 0 var(--las-hotellas-carousel-card-width,min(18.5rem,72vw));
	scroll-snap-align:start;
}

.lh-carousel-controls {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--wp--preset--spacing--30,1.25rem);
	width:100%;
	max-width:none;
	margin-top:var(--wp--preset--spacing--40,2rem);
}
.lh-carousel-controls .lh-carousel-arrows {
	display:flex;
	align-items:center;
	gap:var(--wp--preset--spacing--20,.625rem);
}
/* De stippen staan absoluut in een vak met vaste breedte; het script zet per
   stip --lh-dot-w en --lh-dot-x. Zo verschuift er niets terwijl twee stippen
   tegelijk groeien en krimpen. */
.lh-carousel-controls .lh-carousel-dots {
	--lh-dot-uit:9px;
	--lh-dot-aan:28px;
	--lh-dot-gap:10px;
	display:flex;
	align-items:center;
	gap:var(--lh-dot-gap);
	flex:0 0 auto;
}
/* Zodra het script de posities zet (klasse is-los), staan de stippen absoluut.
   Zonder script blijft het een gewone rij. */
.lh-carousel-controls .lh-carousel-dots.is-los {
	position:relative;
	display:block;
	width:var(--lh-dots-w,auto);
	height:var(--lh-dot-uit);
}
.lh-carousel-controls .lh-carousel-dots > span {
	display:block;
	appearance:none;
	box-sizing:border-box;
	position:relative;
	flex:0 0 auto;
	width:var(--lh-dot-w,var(--lh-dot-uit))!important;
	min-width:0!important;
	height:var(--lh-dot-uit)!important;
	min-height:0!important;
	margin:0;
	padding:0!important;
	border:0;
	border-radius:999px;
	background:var(--wp--preset--color--accent-4,#d2e1ed);
	background:color-mix(in srgb, var(--wp--preset--color--contrast,#001722) calc(var(--lh-dot,0) * 100%), var(--wp--preset--color--accent-4,#d2e1ed));
	box-shadow:none;
	pointer-events:none;
}
.lh-carousel-controls .lh-carousel-dots.is-los > span {
	position:absolute;
	top:0;
	left:0;
	transform:translate3d(var(--lh-dot-x,0px),0,0);
	will-change:transform,width;
}
.lh-carousel-controls .lh-carousel-arrows .wp-block-button { margin:0; }
.lh-carousel-controls .lh-carousel-arrows .wp-block-button__link {
	display:grid;
	place-items:center;
	box-sizing:border-box;
	width:3rem;
	min-width:3rem;
	height:3rem;
	min-height:3rem;
	padding:0!important;
	line-height:1;
	/* Actief en inactief lopen in elkaar over, in hetzelfde tempo als de stippen. */
	transition:opacity 420ms ease,background-color 420ms ease,color 420ms ease,border-color 420ms ease;
}
.lh-carousel-controls .lh-carousel-arrows button:disabled { opacity:.35;cursor:default; }
.lh-carousel-controls .lh-carousel-arrows svg { display:block;width:1.5rem;height:1.5rem;fill:currentColor; }

@media (min-width:701px) {
	[data-lh-carousel] > .lh-carousel {
		width:100%;
		margin-left:0;
		margin-right:0;
		scroll-padding-inline-start:0;
	}
	.lh-carousel-spacer { display:none; }

	/* De randen als masker: de kaarten zelf lopen naar doorzichtig, dus wat er
	   ook achter het blok zit — een kleur, een verloop, een foto — schijnt er
	   altijd kloppend doorheen. Er hoeft geen kleur gemeten te worden.

	   De vervaging is geen toestand maar een gevolg. Per kant bepaalt het script
	   hoeveel kaart er onder de rand zit en zet dat om in een sterkte tussen 0 en
	   1: ligt een kaart strak tegen de rand, dan is er niets te verzachten en is
	   die kant scherp; zit de rand midden in een kaart, dan vervaagt hij
	   volledig. Daartussen loopt het mee met de beweging, beeldje voor beeldje.
	   Zo ontstaat de vervaging uit het schuiven in plaats van dat hij erbij wordt
	   aangezet, en verdwijnt hij op het moment dat een kaart uitlijnt.

	   --lh-fade-l en --lh-fade-r zijn de dekking aan het uiteinde van de
	   vervaging: 1 is scherp, 0 is volledig vervaagd. Het masker komt pas met
	   has-carousel-state, zodat er niets vervaagt voordat het script rekent. */
	[data-lh-carousel] > .lh-carousel {
		/* Breedte van een volle vervaging. Het verloop loopt altijd van doorzichtig
		   naar dekkend; de sterkte bepaalt hoe breed dat verloop is, niet waar het
		   begint. 1 = scherp (breedte 0), 0 = volle breedte. */
		--lh-fade:clamp(1.5rem,3vw,2.5rem);
		--lh-fade-l:1;
		--lh-fade-r:1;
	}
	[data-lh-carousel].has-carousel-state > .lh-carousel {
		--lh-fl:calc((1 - var(--lh-fade-l,1)) * var(--lh-fade));
		--lh-fr:calc((1 - var(--lh-fade-r,1)) * var(--lh-fade));
		/* Zachte in- en uitloop (smootherstep, zeventien stappen) in plaats van een
		   lineair verloop: die loopt aan beide uiteinden vlak uit, zodat er nergens
		   een knik te zien is, ook niet waar de kaart weer volledig dekt.
		   Het verloop begint 1px buiten de baan: in rust ligt het doorzichtige deel
		   dan helemaal buiten beeld. Anders vallen alle stappen samen op 0 en maakt
		   de browser de eerste pixel halfdoorzichtig, precies waar de kaartrand zit. */
		-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) calc(-1px + (var(--lh-fl) + 1px) * 0),rgba(0,0,0,0.002) calc(-1px + (var(--lh-fl) + 1px) * 0.0625),rgba(0,0,0,0.016) calc(-1px + (var(--lh-fl) + 1px) * 0.125),rgba(0,0,0,0.049) calc(-1px + (var(--lh-fl) + 1px) * 0.1875),rgba(0,0,0,0.104) calc(-1px + (var(--lh-fl) + 1px) * 0.25),rgba(0,0,0,0.18) calc(-1px + (var(--lh-fl) + 1px) * 0.3125),rgba(0,0,0,0.275) calc(-1px + (var(--lh-fl) + 1px) * 0.375),rgba(0,0,0,0.384) calc(-1px + (var(--lh-fl) + 1px) * 0.4375),rgba(0,0,0,0.5) calc(-1px + (var(--lh-fl) + 1px) * 0.5),rgba(0,0,0,0.616) calc(-1px + (var(--lh-fl) + 1px) * 0.5625),rgba(0,0,0,0.725) calc(-1px + (var(--lh-fl) + 1px) * 0.625),rgba(0,0,0,0.82) calc(-1px + (var(--lh-fl) + 1px) * 0.6875),rgba(0,0,0,0.896) calc(-1px + (var(--lh-fl) + 1px) * 0.75),rgba(0,0,0,0.951) calc(-1px + (var(--lh-fl) + 1px) * 0.8125),rgba(0,0,0,0.984) calc(-1px + (var(--lh-fl) + 1px) * 0.875),rgba(0,0,0,0.998) calc(-1px + (var(--lh-fl) + 1px) * 0.9375),rgba(0,0,0,1) calc(-1px + (var(--lh-fl) + 1px) * 1),rgba(0,0,0,1) calc(100% + 1px - (var(--lh-fr) + 1px) * 1),rgba(0,0,0,0.998) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.9375),rgba(0,0,0,0.984) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.875),rgba(0,0,0,0.951) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.8125),rgba(0,0,0,0.896) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.75),rgba(0,0,0,0.82) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.6875),rgba(0,0,0,0.725) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.625),rgba(0,0,0,0.616) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.5625),rgba(0,0,0,0.5) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.5),rgba(0,0,0,0.384) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.4375),rgba(0,0,0,0.275) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.375),rgba(0,0,0,0.18) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.3125),rgba(0,0,0,0.104) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.25),rgba(0,0,0,0.049) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.1875),rgba(0,0,0,0.016) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.125),rgba(0,0,0,0.002) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.0625),rgba(0,0,0,0) calc(100% + 1px - (var(--lh-fr) + 1px) * 0));
		mask-image:linear-gradient(to right,rgba(0,0,0,0) calc(-1px + (var(--lh-fl) + 1px) * 0),rgba(0,0,0,0.002) calc(-1px + (var(--lh-fl) + 1px) * 0.0625),rgba(0,0,0,0.016) calc(-1px + (var(--lh-fl) + 1px) * 0.125),rgba(0,0,0,0.049) calc(-1px + (var(--lh-fl) + 1px) * 0.1875),rgba(0,0,0,0.104) calc(-1px + (var(--lh-fl) + 1px) * 0.25),rgba(0,0,0,0.18) calc(-1px + (var(--lh-fl) + 1px) * 0.3125),rgba(0,0,0,0.275) calc(-1px + (var(--lh-fl) + 1px) * 0.375),rgba(0,0,0,0.384) calc(-1px + (var(--lh-fl) + 1px) * 0.4375),rgba(0,0,0,0.5) calc(-1px + (var(--lh-fl) + 1px) * 0.5),rgba(0,0,0,0.616) calc(-1px + (var(--lh-fl) + 1px) * 0.5625),rgba(0,0,0,0.725) calc(-1px + (var(--lh-fl) + 1px) * 0.625),rgba(0,0,0,0.82) calc(-1px + (var(--lh-fl) + 1px) * 0.6875),rgba(0,0,0,0.896) calc(-1px + (var(--lh-fl) + 1px) * 0.75),rgba(0,0,0,0.951) calc(-1px + (var(--lh-fl) + 1px) * 0.8125),rgba(0,0,0,0.984) calc(-1px + (var(--lh-fl) + 1px) * 0.875),rgba(0,0,0,0.998) calc(-1px + (var(--lh-fl) + 1px) * 0.9375),rgba(0,0,0,1) calc(-1px + (var(--lh-fl) + 1px) * 1),rgba(0,0,0,1) calc(100% + 1px - (var(--lh-fr) + 1px) * 1),rgba(0,0,0,0.998) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.9375),rgba(0,0,0,0.984) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.875),rgba(0,0,0,0.951) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.8125),rgba(0,0,0,0.896) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.75),rgba(0,0,0,0.82) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.6875),rgba(0,0,0,0.725) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.625),rgba(0,0,0,0.616) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.5625),rgba(0,0,0,0.5) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.5),rgba(0,0,0,0.384) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.4375),rgba(0,0,0,0.275) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.375),rgba(0,0,0,0.18) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.3125),rgba(0,0,0,0.104) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.25),rgba(0,0,0,0.049) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.1875),rgba(0,0,0,0.016) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.125),rgba(0,0,0,0.002) calc(100% + 1px - (var(--lh-fr) + 1px) * 0.0625),rgba(0,0,0,0) calc(100% + 1px - (var(--lh-fr) + 1px) * 0));
		-webkit-mask-repeat:no-repeat;
		mask-repeat:no-repeat;
		-webkit-mask-size:100% 100%;
		mask-size:100% 100%;
	}
}
@media (prefers-reduced-motion:reduce) {
	.lh-carousel-controls .lh-carousel-arrows .wp-block-button__link { transition-duration:.01ms!important; }
}