/*
  sections/catalog.css
  Cada modelo se presenta como una unidad de equipo: nombre, rol,
  tabla de specs en mono, acción de cotizar. Usa .plate de
  components/card.css como base.

  Compartido por partials/_cabinet_card.html: tanto el teaser de
  Doberman en el inicio como el catálogo completo (gabinetes.html)
  usan esta misma clase, no hay una versión "mini" distinta.
*/

.catalog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.catalog_hero {
  background: linear-gradient(to bottom, var(--ink-900) 0, transparent 96px);
}

/* .catalog-card ya trae display:flex con la misma especificidad que
   la regla [hidden] del navegador; sin esto, ocultar una tarjeta
   filtrada por el buscador no tendría efecto visual. */
.catalog-card[hidden] {
  display: none;
}

/* Espacio para la foto del producto. Sangra hasta el borde de la
   placa (que tiene padding propio) para que se vea como una imagen
   real, no como un ícono flotando dentro del margen del texto. */
.product-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
  background: var(--ink-950);
  border-bottom: var(--border-hairline);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--steel-400);
}

.product-placeholder__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.product-placeholder__label {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* Foto grande de la ficha de producto (gabinete_detail.html): no
   sangra (no vive dentro del padding de una .plate) y no recorta
   solo las esquinas de arriba. */
.product-placeholder--lg {
  aspect-ratio: 1 / 1;
  margin: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.product-placeholder--lg .product-placeholder__icon {
  width: 4.5rem;
  height: 4.5rem;
}

/* Envuelve imagen + kicker + nombre + rol: la parte de la tarjeta
   que lleva a la ficha del producto. Las specs y el botón de cotizar
   quedan afuera, como hermanos, para no anidar un link dentro de un
   botón. */
.catalog-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.catalog-card__link:hover .catalog-card__name {
  color: var(--brand-green);
}

.catalog-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.catalog-card__name {
  font-size: 1.75rem;
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.catalog-card__role {
  color: var(--text-secondary);
  font-size: var(--size-small);
  margin-bottom: var(--space-6);
}

.catalog-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.catalog-card__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-small);
}

.catalog-card__spec dt {
  flex-shrink: 0;
  color: var(--text-muted);
}

.catalog-card__spec dd {
  margin: 0;
  text-align: right;
  color: var(--text-primary);
}

.catalog-card .btn {
  margin-top: auto;
}