/**
 * Dish showcase strip — 1:1 tiles, seamless marquee on hover.
 */

.maxs-dish-showcase {
	--maxs-dish-duration: 40s;
	width: 100%;
}

/* ---------- Viewport ---------- */

.maxs-dish-showcase__viewport {
	--maxs-dish-visible: 6;
	container-type: inline-size;
	container-name: maxs-dish-showcase;
	overflow: hidden;
	width: 100%;
}

/* ---------- Marquee track ---------- */

.maxs-dish-showcase__track {
	display: flex;
	width: max-content;
	animation: maxs-dish-marquee var(--maxs-dish-duration) linear infinite;
	animation-play-state: paused;
	will-change: transform;
}

.maxs-dish-showcase__track.is-scrolling {
	animation-play-state: running;
}

@keyframes maxs-dish-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Lists ---------- */

.maxs-dish-showcase__list {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

.maxs-dish-showcase__item {
	flex: 0 0 auto;
	width: calc(100cqw / var(--maxs-dish-visible));
	box-sizing: border-box;
}

/* ---------- Card (1:1) ---------- */

.maxs-dish-showcase__card {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	width: 100%;
}

.maxs-dish-showcase__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------- Touch: static horizontal scroll ---------- */

@media (hover: none) {
	.maxs-dish-showcase__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.maxs-dish-showcase__viewport::-webkit-scrollbar {
		display: none;
	}

	.maxs-dish-showcase__track {
		animation: none;
		width: auto;
		will-change: auto;
	}

	.maxs-dish-showcase__list--clone {
		display: none;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.maxs-dish-showcase__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.maxs-dish-showcase__viewport::-webkit-scrollbar {
		display: none;
	}

	.maxs-dish-showcase__track {
		animation: none;
		width: auto;
		will-change: auto;
	}

	.maxs-dish-showcase__list--clone {
		display: none;
	}
}

/* ---------- Responsive (container width, not viewport) ---------- */

@container maxs-dish-showcase (max-width: 768px) {
	.maxs-dish-showcase__viewport {
		--maxs-dish-visible: 5;
	}
}

@container maxs-dish-showcase (max-width: 480px) {
	.maxs-dish-showcase__viewport {
		--maxs-dish-visible: 3;
	}
}