/* ==========================================================================
   Blok: Fotostrook — doorlopend schuivende, full-bleed beeldenband
   ========================================================================== */

.marquee {
	position: relative;
	/* De strook is vele schermen breed (width: max-content). Zonder deze clip
	   duwt hij de pagina horizontaal open. `clip` in plaats van `hidden` zodat
	   de schaduw van de slides er verticaal nog uit mag steken. */
	overflow-x: clip;
	padding-block: var(--section-padding-tight);
}

/* Full-bleed: negeert de container zodat de beelden van rand tot rand lopen */
.marquee__viewport {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.marquee__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0;
}
.marquee__track::-webkit-scrollbar { display: none; }

.marquee__slide {
	flex: 0 0 auto;
	width: clamp(240px, 24vw, 340px);
	aspect-ratio: var(--marquee-ratio, 8 / 9);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	/* De tussenruimte staat op margin-right in plaats van gap: gap laat na de
	   laatste slide niets over, waardoor -50% net niet op de kopie uitkomt en
	   de lus elke ronde een sprongetje maakt. Met margin-right klopt het. */
	margin-right: clamp(12px, 1.6vw, 22px);
}
.marquee__slide picture,
.marquee__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Marquee: main-JS dupliceert de slides en zet de duur, zodat de snelheid
   gelijk blijft ongeacht de schermbreedte. Zonder JS (of bij beperkte
   bewegingsvoorkeur) blijft het gewoon een strook die je zelf kunt scrollen. */
.marquee.is-running .marquee__track {
	overflow: visible;
	width: max-content;
	animation: marquee-scroll linear infinite;
	will-change: transform;
}
/* De strook loopt bewust door bij hover: hem laten stilvallen zorgt voor een
   schokje zodra de muis er per ongeluk overheen gaat. */

@keyframes marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee.is-running .marquee__track { animation: none; width: auto; overflow-x: auto; }
}