/* PIEZA: la pagina de seccion
 * ---------------------------------------------------------------------------
 * DOS COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTO
 *
 * 1. Las tarjetas NO las pinta el tema. Las pinta una plantilla de
 *    GenerateBlocks («dynamic content template») guardada en la base de datos:
 *    `article.dynamic-content-template > .inside-article > .gb-container >
 *    .gb-inside-container > figure.gb-block-image + h3.gb-headline`. Por eso
 *    aqui no se puede anadir autor ni fecha desde el tema: habria que editar
 *    esa plantilla en el panel. Lo que si se puede es darle forma.
 *
 * 2. Las clases con hash (`gb-container-4983cdaf`) cambian si alguien toca la
 *    plantilla. Todo lo de aqui apunta a las clases ESTRUCTURALES, nunca a un
 *    hash, o el dia que se edite la plantilla el diseno se cae solo.
 *
 * Colores y tipografia, de `tokens.css`.
 * --------------------------------------------------------------------------- */

/* --- La cabecera de la seccion --------------------------------------------
   Sin el filete azul debajo del titulo: era el gesto de marca del H1 de los
   articulos, pero aqui, con una descripcion larga justo detras, partia la
   cabecera en dos trozos y el titulo quedaba flotando encima de una raya.
   El azul se queda donde si dice algo, en la seccion activa del menu. */

.archive .page-header {
  padding-bottom: var(--dl-esp-lg);
  border-bottom: 1px solid var(--dl-linea);
}

.archive .page-header .page-title {
  margin: 0 0 var(--dl-esp-sm);
  padding: 0;
  border: 0;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--dl-tinta);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* La descripcion ocupa el ancho del contenedor. Antes iba a 68ch, la medida
   de lectura de un articulo, y en una cabecera de tres lineas eso se ve como
   un texto cortado a la mitad con un hueco blanco al lado. */
.archive .taxonomy-description {
  max-width: none;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--dl-tinta-suave);
  text-wrap: pretty;
}
.archive .taxonomy-description p:last-child { margin-bottom: 0; }

/* --- Las tarjetas ---------------------------------------------------------- */

/* La rejilla de GeneratePress va con FLOTANTES (`grid-33` = ancho en % y
   `float: left`), y con flotantes las tarjetas de una fila no se igualan de
   alto: cada una acaba donde acaba su titular, y una de tres lineas deja a las
   otras dos cortadas a distinta altura. Se cambia por una rejilla CSS de
   verdad, que iguala las filas sola.
   La paginacion es hermana de las tarjetas dentro del mismo contenedor, asi
   que se le dice que ocupe la fila entera o se colocaria como una tarjeta
   mas. */
.archive .generate-columns-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dl-esp-xl) var(--dl-esp-lg);
  margin-left: 0;
}
.archive .generate-columns-container > .generate-columns {
  float: none;
  width: auto;
  padding-left: 0;
  margin-bottom: 0;
}
/* La cabecera de la seccion y la paginacion son HERMANAS de las tarjetas
   dentro del mismo contenedor. Al pasar el contenedor a rejilla, las dos se
   colocaban como una tarjeta mas: el titulo de la seccion aparecia en la
   primera columna con dos articulos al lado. Ocupan la fila entera. */
.archive .generate-columns-container > .page-header,
.archive .generate-columns-container > .paging-navigation {
  grid-column: 1 / -1;
  margin-left: 0;
  margin-bottom: 0;
}

/* La cadena de alturas tiene que ir COMPLETA hasta la tarjeta: article →
   .inside-article → .gb-container → .gb-inside-container. Si falta un eslabon,
   la tarjeta se queda a la altura de su texto y las de una fila acaban a
   distinto nivel aunque la rejilla si este igualada. */
.archive .dynamic-content-template .inside-article,
.archive .dynamic-content-template .gb-container { height: 100%; }

/* La tarjeta: superficie, filete y esquina. Antes las imagenes y los titulares
   flotaban sueltos sobre el papel y no se sabia donde acababa uno y empezaba
   el siguiente. */
.archive .dynamic-content-template .gb-inside-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--dl-superficie);
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  overflow: hidden;
  transition: border-color var(--dl-dur) var(--dl-ease);
}
.archive .dynamic-content-template .gb-inside-container:hover { border-color: var(--dl-azul-700); }

.archive .dynamic-content-template figure { margin: 0; }
.archive .dynamic-content-template figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Todas iguales: las originales van de 3:2 a 16:9 y sin esto la fila queda
     con las tarjetas descuadradas. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--dl-azul-100);
}

.archive .dynamic-content-template .gb-headline {
  margin: 0;
  padding: var(--dl-esp-md) var(--dl-esp-md) 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Autoría y fecha: texto, no enlace. Va al final de la tarjeta, así que el
   `margin-top: auto` la pega abajo y todas las firmas de una fila quedan a la
   misma altura aunque los titulares midan distinto. */
.dl-cat-firma {
  margin: var(--dl-esp-sm) 0 0;
  padding: 0 var(--dl-esp-md) var(--dl-esp-md);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--dl-tinta-suave);
}
.archive .dynamic-content-template .gb-inside-container > .dl-cat-firma { margin-top: auto; }
.archive .dynamic-content-template .gb-headline a {
  color: var(--dl-tinta);
  text-decoration: none;
}
.archive .dynamic-content-template .gb-headline a:hover { color: var(--dl-azul-500); }
.archive .dynamic-content-template .gb-headline a:focus-visible {
  outline: 2px solid var(--dl-foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- La paginación --------------------------------------------------------- */

.archive .paging-navigation {
  margin-top: var(--dl-esp-lg);
  padding-top: var(--dl-esp-lg);
  border-top: 1px solid var(--dl-linea);
}
.archive .paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dl-esp-sm);
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.archive .paging-navigation .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0 0.6em;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
  color: var(--dl-tinta);
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color var(--dl-dur) var(--dl-ease), color var(--dl-dur) var(--dl-ease);
}
.archive .paging-navigation a.page-numbers:hover {
  border-color: var(--dl-azul-700);
  color: var(--dl-azul-700);
}
.archive .paging-navigation .page-numbers.current {
  background: var(--dl-azul-700);
  border-color: var(--dl-azul-700);
  color: #fff;
  font-weight: 600;
}
.archive .paging-navigation .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--dl-tinta-suave);
  min-width: 0;
  padding: 0 0.2em;
}

/* --- Móvil ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .archive .generate-columns-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .archive .page-header .page-title { font-size: 26px; padding-bottom: 14px; }
}

/* Por debajo de 560px la tarjeta se tumba: miniatura a la izquierda y titular
   a la derecha, en fila. Con la tarjeta de pie, cada articulo ocupaba media
   pantalla de alto y ver seis titulares eran tres pantallas de scroll.
   Medido dentro de un iframe a 375 y 320 px, no con capturas: Chrome sin
   ventana miente por debajo de ~485 px. */
@media (max-width: 560px) {
  .archive .generate-columns-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Dos filas y la foto ocupando las dos: si no, la firma se iria a una
     tercera fila DEBAJO de la miniatura en vez de quedarse con su titular. */
  .archive .dynamic-content-template .gb-inside-container {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--dl-esp-md);
    align-content: center;
    padding: var(--dl-esp-md) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--dl-linea);
    border-radius: 0;
  }
  .archive .dynamic-content-template .gb-inside-container > figure {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .archive .dynamic-content-template .gb-inside-container > .gb-headline { grid-column: 2; grid-row: 1; }
  .archive .dynamic-content-template .gb-inside-container > .dl-cat-firma { grid-column: 2; grid-row: 2; }
  .archive .dynamic-content-template .gb-inside-container:hover { border-color: var(--dl-linea); }

  .archive .dynamic-content-template figure img {
    aspect-ratio: 320 / 187;
    border-radius: var(--dl-radio);
  }

  .archive .dynamic-content-template .gb-headline {
    padding: 0;
    font-size: 0.97rem;
  }

  .dl-cat-firma {
    margin-top: 0.25rem;
    padding: 0;
    font-size: 0.78rem;
  }
  .archive .dynamic-content-template .gb-inside-container > .dl-cat-firma { margin-top: 0.25rem; }
}