/* ==========================================================================
   RUT — TINTA Y SOL · eventos-pasados.css
   Página de listado: el archivo de la agenda (§4.4). Estilo agenda impresa:
   numeración de archivo protagonista en Fraunces (el original no publica
   fechas de los eventos), carteles en duotono tinta pregenerado y filas
   asimétricas alternadas con solape del folio sobre la foto.
   Requiere tokens.css + base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecera tipo portada de revista
   -------------------------------------------------------------------------- */
.masthead {
  padding-top: calc(var(--header-h) + clamp(36px, 7vh, 80px));
  padding-bottom: clamp(28px, 5vh, 56px);
}
.masthead__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px var(--gutter);
}
.masthead__row--top {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.masthead__row--foot {
  margin-top: clamp(16px, 3vh, 28px);
  padding-top: 12px;
  border-top: var(--rule-ink);
}
.masthead__title {
  font-size: var(--step-6);
  margin-top: clamp(18px, 4vh, 40px);
  max-width: 14ch;
}

/* --------------------------------------------------------------------------
   2. Filas de archivo (agenda impresa)
   Retícula de 12 columnas: folio grande + cartel duotono + texto.
   Las filas pares (--alt) invierten la composición: ritmo asimétrico.
   -------------------------------------------------------------------------- */
.arch-list { display: flex; flex-direction: column; }

.arch {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-block: clamp(28px, 5vh, 56px);
  border-top: var(--rule-ink);
}
.arch:first-child { border-top: 2px solid var(--ink); }

/* Folio de archivo: el protagonista tipográfico (Fraunces a gran cuerpo) */
.arch__num {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 2;                       /* solape: el folio monta sobre el cartel */
  justify-self: start;
  align-self: start;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--step-6);
  line-height: 0.9;
  color: var(--indigo);
  user-select: none;
}
.arch__media {
  grid-column: 2 / 5;               /* pisa la columna del folio: solape */
  grid-row: 1;
  max-width: 340px;
  width: 100%;
}
.arch__body { grid-column: 5 / 12; grid-row: 1; }

/* Filas alternas: cartel a la derecha, texto a la izquierda */
.arch--alt .arch__num  { grid-column: 11 / 13; justify-self: end; }
.arch--alt .arch__media { grid-column: 9 / 12; justify-self: end; }
.arch--alt .arch__body { grid-column: 2 / 9; }

.arch__title { font-size: var(--step-3); margin-top: 8px; }
.arch__desc {
  margin-top: 10px;
  color: var(--gray-text);
  font-size: var(--step-0);
  max-width: 52ch;
}
.arch__more { margin-top: 16px; font-weight: 600; }
.arch__more a { color: var(--ink); }

@media (max-width: 860px) {
  .arch { display: block; position: relative; }
  .arch__num {
    position: absolute;
    top: clamp(12px, 3vw, 20px);
    right: 0;
    font-size: var(--step-5);
    color: var(--indigo);
  }
  .arch--alt .arch__num { right: 0; }
  .arch__media { max-width: 260px; margin-bottom: 16px; }
  .arch--alt .arch__media { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   3. Cierre de tinta (hacia la agenda viva)
   -------------------------------------------------------------------------- */
.cierre-archivo { padding-block: var(--space-section); }
.cierre-archivo__inner { max-width: 62rem; }
.cierre-archivo h2 { font-size: var(--step-5); margin-top: 14px; }
.cierre-archivo .lead { margin-top: 18px; color: var(--white); }
.cierre-archivo__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 40px);
}