/**
 * HappyManage — Marquee Gallery
 *
 * CSS-only : pas de JS, animation @keyframes translateX(-50%).
 * Pause au hover + désactivation auto si prefers-reduced-motion: reduce.
 *
 * Overrides exposés (à surcharger depuis le thème hôte) :
 *   --hm-marquee-height, --hm-marquee-gap, --hm-marquee-speed,
 *   --hm-marquee-radius, --hm-marquee-item-ratio, --hm-marquee-mask
 */

.hm-marquee {
	--hm-marquee-height:     320px;
	--hm-marquee-gap:        16px;
	--hm-marquee-speed:      40s;
	--hm-marquee-radius:     var(--radius-img, 6px);
	--hm-marquee-item-ratio: 4 / 3;
	--hm-marquee-mask: linear-gradient(
		to right,
		transparent 0,
		#000 80px,
		#000 calc(100% - 80px),
		transparent 100%
	);

	width: 100%;
}

.hm-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: var(--hm-marquee-mask);
	mask-image: var(--hm-marquee-mask);
}

.hm-marquee__track {
	display: flex;
	gap: var(--hm-marquee-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
	animation: hm-marquee-scroll var(--hm-marquee-speed) linear infinite;
	will-change: transform;
}

.hm-marquee[data-direction="right"] .hm-marquee__track {
	animation-direction: reverse;
}

.hm-marquee:hover .hm-marquee__track,
.hm-marquee:focus-within .hm-marquee__track {
	animation-play-state: paused;
}

.hm-marquee__item {
	flex: 0 0 auto;
	height: var(--hm-marquee-height);
	aspect-ratio: var(--hm-marquee-item-ratio);
	border-radius: var(--hm-marquee-radius);
	overflow: hidden;
	background: var(--color-cream, #f5f1e8);
}

.hm-marquee__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

@media (max-width: 768px) {
	.hm-marquee {
		--hm-marquee-height: 220px;
		--hm-marquee-gap:    12px;
		--hm-marquee-mask: linear-gradient(
			to right,
			transparent 0,
			#000 32px,
			#000 calc(100% - 32px),
			transparent 100%
		);
	}
}

/* Accessibilité : si l'utilisateur a demandé de réduire les animations,
   on coupe le défilement et on bascule sur une rangée scrollable native. */
@media (prefers-reduced-motion: reduce) {
	.hm-marquee__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: thin;
	}
	.hm-marquee__track {
		animation: none;
		width: auto;
	}
}