/* ============================================================
   CARTA — el catálogo de vinos
   Dirección: una carta de imprenta, no una tienda. Rejilla
   editorial, filete de 1px entre tarjetas, cero radios, cero
   sombras. La foto es un marco 4:5; sin foto, el marco lleva
   el nombre en display, que es una etiqueta de por sí.
   ============================================================ */

.carta {
  background: var(--paper);
  border-top: var(--keyline) solid var(--line);
}

.carta__head {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure-wide);
  margin-bottom: var(--space-2xl);
}

.carta__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.carta__intro {
  max-width: var(--measure);
  color: var(--ink-2);
}

/* --- Filtros -------------------------------------------------- */

.carta__filtros[hidden] {
  display: none;
}

.carta__filtros {
  margin-bottom: var(--space-xl);
  padding-block: var(--space-m);
  border-block: var(--keyline) solid var(--line);
}

.filtros {
  display: grid;
  gap: var(--space-s);
}

.filtros__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  gap: var(--space-s);
}

.filtros__legend {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.filtros__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

/* --- Chip ----------------------------------------------------- */

/* 44px es el objetivo tactil de Apple y el minimo de WCAG 2.5.8
   cuando hay espacio. Un chip de 36px se ve igual de bien y es
   mas dificil de acertar con el dedo. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 2.75rem;
  padding: var(--space-3xs) var(--space-xs);
  border: var(--keyline) solid var(--line);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: transparent;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

/* El punto de color va DENTRO del chip y solo existe para los
   tipos de vino: la parcela no tiene tono, es un suelo. */
.chip[data-punto]::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--vino-500);
}

.chip[data-punto][data-facet="tipo"]::before {
  background: currentColor;
}

.chip[data-facet="tipo"] {
  color: var(--ink-2);
}

.chip[data-facet="tipo"][data-value="tinto"] { --punto: var(--vino-700); }
.chip[data-facet="tipo"][data-value="blanco"] { --punto: var(--vino-300); }
.chip[data-facet="tipo"][data-value="rosado"] { --punto: var(--vino-400); }

.chip[data-facet="tipo"]::before {
  background: var(--punto, var(--vino-500));
}

@media (hover: hover) {
  .chip:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--paper-sunk);
  }
}

.chip:active {
  transform: translateY(1px);
}

/* `aria-pressed` es el estado real, no una clase: el filtro
   vive en el DOM y el AT lo lee. */
.chip[aria-pressed="true"] {
  color: var(--paper);
  background: var(--vino-700);
  border-color: var(--vino-700);
}

.chip[aria-pressed="true"]::before {
  background: var(--vino-200);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Barra de conteo ------------------------------------------ */

.carta__barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--keyline) solid var(--line);
}

.carta__conteo {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--vino-700);
  font-variant-numeric: tabular-nums;
}

/* --- Rejilla --------------------------------------------------- */

.carta__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wine-min), 1fr));
  gap: var(--wine-gap);
}

.carta__lista[hidden] {
  display: none;
}

/* --- Tarjeta --------------------------------------------------- */

.wine {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--space-xs);
  align-content: start;
}

.wine[hidden] {
  display: none;
}

/* Marco de la foto. 4:5 es la proporción de una etiqueta de
   botella vista de frente.

   El marco es OSCURO a propósito: cinco de las seis fotos tienen
   luminancia media por debajo de 70/255. Sobre papel crema
   (#f7f4ee) una foto de Yavg 19 se lee como un agujero negro, no
   como una imagen. El marco oscuro las vuelve placas de
   catálogo, que es justo el registro visual de una carta de
   vinos. El texto de la tarjeta sigue sobre papel: el contraste
   del texto no depende del fondo de la foto. */
.wine__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--noche-2);
  border: var(--keyline) solid var(--line-dark);
}

/* `cover` y no `contain`: las fotos vienen en ratios de 0.56 a
   0.80, y un `contain` en un marco de 0.80 pone barras de hasta
   el 42% de la altura. `cover` recorta, y recortar una foto
   oscura no pierde nada: solo sombra.

   Va DEBAJO del respaldo, no encima, y por una razon concreta:
   `loading="lazy"` con `display: none` no carga nunca. Chrome
   difiere la peticion de un lazy que no esta en el flujo, y como
   el evento `load` no llega, el respaldo nunca se aparta. La
   foto se queda en 0x0 para siempre.

   En su lugar el respaldo va ENCIMA (z-index 1), opaco, y se
   aparta con `data-vacio`. Asi:
     · cargando -> se ve la etiqueta, que es lo que hay que ver
     · cargado  -> la foto ocupa el marco
     · fallido  -> la etiqueta sigue, y el `alt` roto queda
                  DETRAS de ella, sin texto duplicado
   Y el `background` oscuro cubre el caso de un `alt` que se
   llegara a ver. */
.wine__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--noche-2);
  /* Si la foto falla, el navegador pinta el `alt` DENTRO de la
     caja. Este color es el que hace legible ese texto sobre el
     fondo oscuro, en vez de un texto crema invisible. */
  color: var(--hueso-2);
}

/* El respaldo es la etiqueta. Solo se ve si la foto no carga, y
   en ese caso es lo mejor que hay que mostrar.

   Hereda el fondo oscuro del marco a proposito: el respaldo tiene
   que leerse como la MISMA pieza que la foto, no como un mensaje
   de error. Nombre en hueso sobre noche es el negativo de una
   etiqueta de botella, que es literalmente de donde viene el
   nombre. Va ENCIMA de la foto; ver `.wine__img`. */
.wine__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  padding: var(--space-s);
  text-align: center;
  background: var(--noche-2);
  border: var(--keyline) solid var(--line-dark-soft);
}

.wine__frame:not([data-vacio]) .wine__fallback {
  display: none;
}

.wine__fallback-nombre {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.1;
  color: var(--hueso);
}

/* `--hueso-3` daba 4,49:1 sobre `--noche-2`, es decir, 0,01 por
   debajo del mínimo. `--hueso-2` lo deja en 7,1:1. */
.wine__fallback-ano {
  font-family: var(--font-text);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  color: var(--hueso-2);
  font-variant-numeric: tabular-nums;
}

/* --- Cabecera de la tarjeta ------------------------------------ */

.wine__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  padding-bottom: var(--space-3xs);
  border-bottom: var(--keyline) solid var(--line);
}

.wine__tipo {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--vino-700);
}

/* Los tres tipos tienen que distinguirse por el tono Y cumplir
   4,5:1 sobre papel. Con vino-400 el rosado se quedaba en
   3,93:1, así que el trío baja un escalón: tinto 700, blanco
   600, rosado 500. Sigue siendo la misma rampa y los tres siguen
   siendo distinguibles entre sí. */
.wine__tipo[data-tipo="blanco"] { color: var(--vino-600); }
.wine__tipo[data-tipo="rosado"] { color: var(--vino-500); }

.wine__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.wine__ano {
  margin-left: auto;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.wine__nota {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Ficha ----------------------------------------------------- */

.wine__specs {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: var(--keyline) solid var(--line);
}

.wine__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-3xs);
  border-bottom: var(--keyline) solid var(--line);
}

.wine__spec dt {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.wine__spec dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink);
  text-align: right;
}

.wine__facts {
  font-size: var(--step--2);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* --- Nota al pie de la carta ----------------------------------- */

.carta__nota {
  max-width: var(--measure);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: var(--keyline) solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.carta__nota a {
  color: var(--vino-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .carta__nota a:hover {
    color: var(--vino-900);
  }
}

/* --- Responsive ------------------------------------------------ */

@media (max-width: 48rem) {
  .filtros__row {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }

  .carta__lista {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--wine-min), 100%), 1fr));
  }
}