/*
|--------------------------------------------------------------------------
| AMOREA — "Encuentra el detalle perfecto" (portada)
|--------------------------------------------------------------------------
| Grilla adaptable de círculos de categoría que se convierte en carrusel
| accesible SÓLO cuando hay más elementos de los que caben en el ancho
| actual (la clase `.is-carousel` la pone assets/js/home-detail-carousel.js).
| Sin carrusel: no hay flechas ni espacio reservado.
|
| Elementos visibles por ancho (coinciden con el JS):
|   >=1280 -> 8 · 1024-1279 -> 6 · 768-1023 -> 4 · 480-767 -> 3 · <480 -> 2
|
| Se carga como archivo propio (cache-buster por filemtime) para no tocar
| la versión de style.css.
*/

.home-detail {
	position: relative;
}

.home-detail__viewport {
	/* Recorta el desborde del track cuando NO es carrusel; en modo
	   carrusel el propio track scrollea. */
	overflow: hidden;
}

.home-detail__track {
	--hd-gap: var(--space-6);
	--hd-visible: 8;
	display: grid;
	grid-template-columns: repeat(var(--hd-shown, var(--hd-visible)), minmax(0, 1fr));
	gap: var(--hd-gap);
	margin: 0;
}

/* Fallback sin JavaScript: los mismos cortes por ancho. */
@media (max-width: 1279px) {
	.home-detail__track { --hd-visible: 6; }
}

@media (max-width: 1023px) {
	.home-detail__track { --hd-visible: 4; }
}

@media (max-width: 767px) {
	.home-detail__track {
		--hd-visible: 3;
		--hd-gap: var(--space-4);
	}
}

@media (max-width: 479px) {
	.home-detail__track { --hd-visible: 2; }
}

/* ---------- Modo carrusel ---------- */
.home-detail__track.is-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.home-detail__track.is-carousel::-webkit-scrollbar {
	display: none;
}

.home-detail__track.is-carousel > .category-card {
	flex: 0 0 calc((100% - (var(--hd-visible) - 1) * var(--hd-gap)) / var(--hd-visible));
	scroll-snap-align: start;
}

/* ---------- Flechas ---------- */
.home-detail__arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 2;
}

.home-detail__arrow--prev {
	left: calc(-1 * var(--space-12));
}

.home-detail__arrow--next {
	right: calc(-1 * var(--space-12));
}

.home-detail__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.home-detail__arrow[hidden] {
	display: none;
}

@media (max-width: 1200px) {
	.home-detail__arrow--prev { left: calc(-1 * var(--space-6)); }
	.home-detail__arrow--next { right: calc(-1 * var(--space-6)); }
}

@media (max-width: 900px) {
	.home-detail__arrow--prev { left: -6px; }
	.home-detail__arrow--next { right: -6px; }
}