/* OMA Marquee Slider - Frontend */

.oma-ms {
	--oma-ms-slide-width: 200px;
	--oma-ms-gap: 16px;
	width: 100%;
	overflow: hidden;
	padding: 40px 0;
	position: relative;
}

.oma-ms__track {
	display: flex;
	gap: var(--oma-ms-gap);
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

.oma-ms__slide {
	width: var(--oma-ms-slide-width);
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.oma-ms__img,
.oma-ms__slide img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	object-fit: cover;
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
}

/* Speels hoogteverschil */
.oma-ms.is-staggered .oma-ms__slide:nth-child(odd) img {
	transform: translateY(15px);
}
.oma-ms.is-staggered .oma-ms__slide:nth-child(even) img {
	transform: translateY(-15px);
}

/* Pauze bij hover (alleen wanneer attribuut staat) */
.oma-ms[data-pause-hover="1"]:hover .oma-ms__track {
	animation-play-state: paused;
}

/* Toegankelijkheid: stop animatie als gebruiker dit aangeeft */
@media (prefers-reduced-motion: reduce) {
	.oma-ms__track {
		animation: none !important;
		transform: none !important;
	}
}

/* Responsief */
@media (max-width: 1024px) {
	.oma-ms { --oma-ms-slide-width: 160px; }
}
@media (max-width: 768px) {
	.oma-ms {
		--oma-ms-slide-width: 130px;
		padding: 30px 0;
	}
}