/* ==========================================================================
   catalog.css — Catálogo (archivo de coches). Minimalismo Lightship.
   ========================================================================== */

.catalog { padding-top: var(--spacing-40); padding-bottom: var(--section-gap-mobile); }
@media (min-width: 768px) { .catalog { padding-bottom: var(--section-gap); } }

.catalog__kicker {
	font-size: var(--text-body-sm); letter-spacing: .18em; text-transform: uppercase;
	color: var(--color-text-muted); margin-bottom: var(--spacing-12);
}
.catalog__title { letter-spacing: var(--tracking-display); margin-bottom: var(--spacing-40); }

/* Barra de filtros */
.catalog__filters { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: center; }
.catalog__filters .pill { flex: 0 1 auto; }
.catalog__filters .pill--order { margin-left: auto; }
.catalog__reset {
	background: none; border: 0; cursor: pointer;
	color: var(--color-text-muted); font: inherit; font-size: var(--text-body-sm);
	text-decoration: underline; text-underline-offset: 4px; padding: var(--spacing-12);
}
.catalog__reset:hover { color: var(--color-pure-black); }

/* Botón para plegar/desplegar filtros (visible solo en móvil). */
.catalog__filters-toggle { display: none; }
.catalog__filters-toggle__count {
	display: inline-block; min-width: 20px; margin-left: var(--spacing-8);
	padding: 0 6px; border-radius: var(--radius-full);
	background: var(--color-pure-black); color: var(--color-bg);
	font-size: var(--text-caption); line-height: 20px; text-align: center;
}
.catalog__filters-toggle__chev {
	width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.catalog__filters-toggle[aria-expanded="true"] .catalog__filters-toggle__chev { transform: translateY(2px) rotate(-135deg); }

/* Contador */
.catalog__count {
	color: var(--color-text-muted); font-size: var(--text-body-sm);
	margin: var(--spacing-24) 0 var(--spacing-40);
	border-top: 1px solid var(--color-outline-gray); padding-top: var(--spacing-16);
}
.catalog__count [data-count] { color: var(--color-pure-black); font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; }

/* Rejilla del catálogo */
.catalog__grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .catalog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .catalog__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .catalog__grid { grid-template-columns: repeat(4, 1fr); } }

.car-card.is-hidden { display: none; }

/* Estado vacío */
.catalog__empty { color: var(--color-text-muted); text-align: center; padding: var(--section-gap-mobile) 0; }
.catalog__empty button {
	background: none; border: 0; color: var(--color-pure-black); cursor: pointer; font: inherit;
	text-decoration: underline; text-underline-offset: 4px;
}

@media (max-width: 560px) {
	.catalog__filters .pill, .catalog__filters .pill select { width: 100%; }
	.catalog__filters .pill--order { margin-left: 0; }
}

/* Móvil: filtros plegados por defecto; se abren con el botón "Filtros". */
@media (max-width: 760px) {
	.catalog__filters-toggle {
		display: inline-flex; align-items: center; justify-content: space-between;
		width: 100%; gap: var(--spacing-8); cursor: pointer; font: inherit;
		font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700;
		color: var(--color-pure-black); background: none;
		border: 1px solid var(--color-pure-black); border-radius: var(--radius-full);
		padding: var(--spacing-12) var(--spacing-20);
	}
	.catalog__filters { display: none; }
	.catalog__filters.is-open { display: flex; margin-top: var(--spacing-12); }
}