/*
 * 03, slider met nieuwe binnenkomers.
 *
 * De band is gewoon een rij die horizontaal kan scrollen. Daardoor kun je er
 * met een vinger doorheen slepen zonder dat we daar iets voor hoeven te
 * verzinnen: dat kan de browser zelf. Het javascript hoogt de scrollpositie
 * een klein beetje op per beeldje, dat is het doorschuiven.
 */

.swipe-nieuw {
	overflow-x: auto;
	overflow-y: hidden;

	/*
	 * Belangrijk: het javascript zet de scrollpositie tientallen keren per
	 * seconde. Staat scroll-behavior ergens op smooth, dan gaat de browser
	 * elke stap zitten animeren en komt de band niet vooruit.
	 */
	scroll-behavior: auto;

	/* Verticaal scrollen door de pagina blijft gewoon werken. */
	touch-action: pan-x pan-y;
	overscroll-behavior-x: contain;

	cursor: grab;

	/* Slepen mag geen tekst selecteren. */
	-webkit-user-select: none;
	user-select: none;

	/* De schuifbalk zelf hoeft niet in beeld, de band beweegt al. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* En het mag ook geen foto oppakken om ergens naartoe te slepen. */
.swipe-nieuw img {
	-webkit-user-drag: none;
	user-drag: none;
}

.swipe-nieuw::-webkit-scrollbar {
	display: none;
}

.swipe-nieuw:active {
	cursor: grabbing;
}

.swipe-nieuw__spoor {
	display: flex;
	gap: 20px;
	width: max-content;
}

/*
 * De kaartjes houden een vaste breedte, anders rekt flex ze uit tot de rij
 * het scherm vult en valt het doorschuiven weg.
 */
.swipe-nieuw__item {
	flex: none;
	width: var(--swipe-nieuw-breedte, 220px);
}

@media (max-width: 767px) {
	.swipe-nieuw__item {
		width: 62vw;
		max-width: 260px;
	}

	.swipe-nieuw__spoor {
		gap: 14px;
	}
}

/*
 * Wie beweging heeft uitgezet krijgt een stilstaande rij. Slepen en vegen
 * blijft werken, dat is geen animatie maar de bezoeker zelf.
 */
@media (prefers-reduced-motion: reduce) {
	.swipe-nieuw {
		scroll-snap-type: x proximity;
	}

	.swipe-nieuw__item {
		scroll-snap-align: start;
	}
}