/* ============================================================
   FUNDACIÓN BANÚS · AGENDA (página completa)
   La home muestra un teaser en carrusel (.agenda + .evento). Esta
   es la agenda entera: cada cita en una fila ancha editorial. Solo
   maquetación; ni un color ni un cuerpo se definen aquí.
   ============================================================ */

/* ---------- Lista de citas ----------
   Una columna de filas anchas. El aire entre filas lo da el gap;
   cada fila es una ficha con su filete, como las tarjetas de la home
   pero tumbada. */
.citas {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* La cita: imagen a un lado, contenido al otro. El filete hace el
   trabajo editorial; se refuerza al pasar el ratón sin mover la ficha. */
.cita {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border: var(--linea) solid var(--borde);
  transition: border-color var(--dur-media) var(--ease);
}

.cita:hover { border-color: var(--borde-fuerte); }

.cita__media {
  margin: 0;
  overflow: hidden;
  background: var(--surface-panel);
  /* La proporción la fija el contenedor, no el archivo: las imágenes
     cuadran entre sí aunque lleguen a tamaños distintos. */
  aspect-ratio: 4 / 3;
}

.cita__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}

.cita:hover .cita__media img { transform: scale(1.03); }

/* Cartel aún no entregado: misma trama que el briefing y que la home.
   Comunica "falta una pieza", no "está roto". */
.cita__media--pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--borde) 6px 7px
  );
}

.cita__media--pendiente span {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.cita__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl);
}

/* La fecha manda: es una agenda. Acento de rótulo, cifra no texto. */
.cita__fecha {
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

.cita__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-titulo);
  line-height: var(--lh-titulo);
  margin: 0;
}

.cita__enlace {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

/* El enlace se estira sobre toda la ficha: se pulsa en cualquier punto,
   pero el lector de pantalla anuncia un solo enlace con el título. */
.cita__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cita:hover .cita__enlace { color: var(--acento-texto); }

.cita__extracto {
  font-size: var(--text-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-tenue);
  margin: 0;
  max-width: var(--medida);
}

/* Ficha de datos, anclada al fondo y separada por una regla fina.
   <dl> porque es una lista de pares etiqueta-valor. */
.cita__datos {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--linea) solid var(--borde);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  font-size: var(--text-micro);
}

.cita__dato {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
}

.cita__datos dt {
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.cita__datos dd {
  margin: 0;
  color: var(--texto);
}

/* Botón dentro de la cita: separado de la ficha de datos por su gap.
   Va sobre el enlace estirado, así que se sube por encima con z-index
   y posición relativa para que siga siendo pulsable por sí mismo. */
.cita__accion {
  position: relative;
  z-index: 1;
  margin-top: var(--space-md);
}

/* ---------- Etiqueta de categoría ----------
   La categoría (música, arte, deportes, concurso) va en una pastilla
   neutra: NO estrena color. La disciplina del sistema reserva el verde
   para "abierta" y el rosa/vino para el acento; una categoría es
   metadato, así que se queda en el gris tenue de cada superficie. */
.etiqueta--cat {
  color: var(--texto-tenue);
  /* Más pequeña y ligera que la fecha: es un metadato discreto, no debe
     competir con el título del evento. */
  font-weight: var(--fw-regular);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 2px var(--space-2xs);
}

/* ---------- Archivo de celebrados ----------
   Formato compacto: fecha · título · categoría, en filas con filete,
   del más reciente al más antiguo. Sin imagen —no la hay para casi
   ninguno— y sin enlace: son citas ya pasadas, no fichas navegables. */
.archivo {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
}

.archivo__item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: var(--space-sm) var(--space-lg);
  /* Centrado, no baseline: cuando la fecha envuelve a dos líneas
     («20 diciembre / 2025»), baseline la anclaba por la primera línea y
     quedaba más alta que el título y la etiqueta de una sola línea. Con
     center los tres comparten eje vertical, envuelva la fecha o no. */
  align-items: center;
  padding-block: var(--space-md);
  border-top: var(--linea) solid var(--borde);
}

.archivo__item:last-child {
  border-bottom: var(--linea) solid var(--borde);
}

.archivo__fecha {
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

.archivo__titulo {
  font-family: var(--font-texto);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-titulo);
  color: var(--texto);
  margin: 0;
  /* Versalitas de verdad: all-small-caps dibuja también las mayúsculas
     a la altura de la versalita, así que no asoma ninguna capital alta.
     Un pelo de tracking para que respiren. */
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
}

/* Nota discreta para una cita que no llegó a celebrarse. */
.archivo__nota {
  margin-left: var(--space-xs);
  font-family: var(--font-texto);
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* La categoría se alinea a la derecha de la fila; en su ausencia, el
   hueco de la tercera columna simplemente queda vacío. */
.archivo__cat {
  justify-self: end;
}

/* ---------- Tableta y móvil ----------
   Sin dos columnas, la imagen pasa a banda completa arriba y el
   contenido debajo. */
@media (max-width: 760px) {
  .cita {
    grid-template-columns: 1fr;
  }
  .cita__media {
    aspect-ratio: 3 / 2;
  }
  .cita__cuerpo {
    padding: var(--space-lg);
  }

  /* El archivo pasa a una columna: fecha y categoría arriba, título
     debajo, sin la rejilla de tres columnas que aquí ya no cabe. */
  .archivo__item {
    grid-template-columns: 1fr auto;
    gap: var(--space-2xs) var(--space-md);
  }
  .archivo__titulo {
    grid-column: 1 / -1;
  }
}