/* ==========================================================================
   RUT — TINTA Y SOL · eventos-proximos.css
   Página de listado: La agenda de la RUT / eventos próximos (§4.4).
   El listado original está vacío ("No items found"): estado vacío editorial
   sobre bloque de tinta + calendario mensual real + cruces de lectura.
   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. Estado vacío editorial (bloque de tinta, cero gigante como "fecha")
   -------------------------------------------------------------------------- */
.empty { padding-block: var(--space-section); }
.empty__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.empty__zero {
  grid-column: 1 / 5;
  grid-row: 1;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--step-7);
  line-height: 0.85;
  color: var(--sol);
  user-select: none;
}
.empty__body {
  grid-column: 4 / 12;   /* solape asimétrico sobre el cero */
  grid-row: 1;
  z-index: 2;
}
.empty__body h2 { font-size: var(--step-5); margin-top: 14px; max-width: 18ch; }
.empty__body .lead { margin-top: 18px; color: var(--white); }
.empty__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 40px);
}
@media (max-width: 860px) {
  .empty__grid { display: block; }
  .empty__zero { font-size: var(--step-6); margin-bottom: -0.35em; }
}

/* --------------------------------------------------------------------------
   3. Calendario de actividades (figura editorial asimétrica)
   -------------------------------------------------------------------------- */
.calendario__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-cluster);
  align-items: end;
}
.calendario__media { grid-column: 1 / 10; }
.calendario__aside {
  grid-column: 10 / 13;
  padding-top: var(--space-cluster);
  border-top: 3px solid var(--sol);   /* filete firma */
}
.calendario__aside .text-2 { margin-top: 10px; font-size: var(--step-0); }
@media (max-width: 860px) {
  .calendario__media { grid-column: 1 / -1; }
  .calendario__aside { grid-column: 1 / -1; max-width: 46ch; }
}

/* --------------------------------------------------------------------------
   4. Cruces editoriales: sigue leyendo (tarjetas + tarjeta de tinta)
   -------------------------------------------------------------------------- */
.cruces__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-block) var(--gutter);
  align-items: start;
}
@media (max-width: 960px) { .cruces__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cruces__grid { grid-template-columns: 1fr; } }

.card-quote {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-s);
  padding: clamp(24px, 2.6vw, 40px);
  min-height: 320px;
}
.card-quote__q p {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--white);
  text-wrap: balance;
}
.card-quote__link { font-weight: 600; }
.card-quote__link a { color: var(--white); }
.card-quote__link a:hover, .card-quote__link a:focus-visible { color: var(--white); }