/* ==========================================================================
   RUT — TINTA Y SOL · blog.css
   Página de listado: El diario de la RUT (ART-DIRECTION §4.4).
   Requiere tokens.css + base.css. Solo estilos propios de esta plantilla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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. Pieza destacada: apertura de periódico con solape asimétrico
   -------------------------------------------------------------------------- */
.feature {
  display: block;
  color: inherit;
  text-decoration: none;
}
.feature__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.feature__media {
  grid-column: 1 / 9;
  grid-row: 1;
}
.feature__panel {
  grid-column: 8 / 13;      /* monta sobre la foto vecina: solape editorial */
  grid-row: 1;
  align-self: end;
  z-index: 2;
  background: var(--paper);
  border-top: 4px solid var(--sol);
  padding: clamp(20px, 2.6vw, 40px);
  margin-bottom: clamp(28px, 4vh, 52px);
}
.feature__title {
  font-size: var(--step-4);
  margin-top: 10px;
}
.feature:hover .feature__title { color: var(--indigo); }
.feature__excerpt {
  margin-top: 12px;
  color: var(--gray-text);
  font-size: var(--step-1);
  line-height: 1.45;
}
.feature__more { margin-top: 18px; font-weight: 600; }
.feature:hover .feature__more .link-hl { background-size: 100% 2px; }

@media (max-width: 860px) {
  .feature__media { grid-column: 1 / -1; }
  .feature__panel {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: calc(-1 * clamp(28px, 8vw, 56px)); /* el solape pasa a vertical */
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Retícula editorial de 3 columnas con ritmo roto
      (alturas de imagen alternadas 4:5 / 3:2 vía .ratio-* en el HTML)
   -------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-block) var(--gutter);
  align-items: start;
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

/* Tarjeta "solo texto" sobre tinta: rompe la monotonía de la retícula */
.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: 340px;
}
.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); }

/* Breve a lo ancho: la última entrada cruza las 3 columnas */
.card-breve {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  border-top: var(--rule-ink);
  padding-top: var(--space-cluster);
}
.card-breve__media { grid-column: 1 / 4; }
.card-breve__body { grid-column: 4 / 12; }
.card-breve__body .card-ed__meta { margin-top: 0; }
.card-breve__arrow {
  grid-column: 12 / 13;
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--indigo);
  transition: transform var(--dur-fast) var(--ease-editorial);
}
.card-breve:hover .card-breve__arrow { transform: translateX(6px); }
@media (max-width: 860px) {
  .card-breve { grid-template-columns: 1fr; row-gap: 14px; }
  .card-breve__media { grid-column: 1 / -1; max-width: 340px; }
  .card-breve__body, .card-breve__arrow { grid-column: 1 / -1; justify-self: start; }
}

/* --------------------------------------------------------------------------
   4. Paginación con folios grandes (01 / 02 / 03…)
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(18px, 3vw, 40px);
  margin-top: var(--space-block);
  padding-top: var(--space-cluster);
  border-top: 2px solid var(--ink);
}
.pagination__label { flex: none; }
.pagination__list {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 36px);
}
.pagination__num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1;
  text-decoration: none;
  color: var(--gray-text);
  transition: color var(--dur-fast) ease;
}
a.pagination__num:hover, a.pagination__num:focus-visible { color: var(--indigo); }
.pagination__num--current {
  color: var(--ink);
  font-weight: 550;
  background-image: linear-gradient(var(--sol), var(--sol));
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 88%;
  padding-inline: 0.06em;
}
.pagination__next {
  margin-left: auto;
  font-weight: 600;
  color: var(--ink);
}