/**
 * Plantilla T-13 · Archivo de entradas.
 * Layout de /categorias/{slug}/ y /etiquetas/{slug}/.
 *
 * Solo el layout de la plantilla. Las tarjetas se estilan en
 * common/card-post/styles.css y la paginación en common/pagination/.
 *
 * Tokens canónicos, sin literales de respaldo: la capa de alias de style.css
 * es transitoria y esta hoja ya no depende de ella (issue #60).
 *
 * @package pfuture
 * @module contenidos
 */

/* La raíz NO acota: quien da el canalón es la regla de abajo, sobre el hijo
   directo. Mismo reparto que T-07 y que las catorce plantillas del #90. */
.pf-archive-post {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-lg);
  padding-block: var(--pf-space-md);
}

/* -------------------------------------------------------------------------
 * Canalón — issue #90. Idiom canónico de la DEC-027 de `portafolio`.
 *
 * T-13 no está entre las cuatro urgentes: sus cuatro hijos comparten ya un solo
 * borde. Lo que cambia es el VALOR, que era 16 y 56 y 136 según el ancho, o sea
 * 8px a la izquierda del resto del sitio, porque la raíz daba `--pf-space-sm`
 * donde el tema da `--pf-gutter`.
 *
 * Aquí no hay `cta-box`, pero la regla se escribe igual que en las otras
 * quince: el día que esta plantilla monte un bloque a sangre, el canalón ya
 * está donde tiene que estar y no hay que volver a razonarlo.
 * ---------------------------------------------------------------------- */
.pf-archive-post > :not(.pf-hero):not(.pf-form-newsletter) {
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

/* El panel de newsletter se mide por su caja y no por su relleno, así que el
 * canalón va por fuera. Explicado entero en `templates/single/styles.css`. */
.pf-archive-post > .pf-form-newsletter {
  width: calc(100% - var(--pf-gutter) * 2);
  max-width: calc(var(--pf-container) - var(--pf-gutter) * 2);
  margin-inline: auto;
}

/* La medida de lectura de la cabecera son 60ch, y desde el #90 va sobre sus
 * hijos y no sobre el `<header>`. Motivo medido: la regla de canalón es
 * (0,3,0) y `.pf-archive-post__header` era (0,1,0), así que un `max-width` aquí
 * lo pisaba la regla y la cabecera pasaba de 605px a 1200px; y devolvérselo con
 * más especificidad tampoco vale, porque el `margin-inline: auto` del canalón
 * centraría una caja de 60ch en vez de dejarla a la izquierda. Sobre los hijos
 * de un flex en columna el resultado es el de antes: 60ch, pegados al borde de
 * contenido. */
.pf-archive-post__header {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.pf-archive-post__header > * {
  max-width: 60ch;
}

/* Rótulo de taxonomía: etiqueta en versalitas según la regla de uso de la
 * dirección «Expediente», el mismo tratamiento que la categoría de T-07 y de
 * `card-post`: 13px, peso 500, el tracking común y `text-muted` (5.30:1 sobre
 * `bg` en claro, 7.18:1 en oscuro). No va en `brand`, que desde el #111 es
 * navy y competía con el `<h1>`; ni en `accent`, que no es color de texto
 * (DEC-022 de core). Issue #116. */
.pf-archive-post__eyebrow {
  margin: 0;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-color-text-muted);
}

/* El título necesita medida propia y no es un capricho: va a 38,4px, así que
 * sus 60ch son 1473px. Con el `max-width: 60ch` en el `<header>` la unidad se
 * resolvía UNA vez con el cuerpo de 16px y daba 605px para el bloque entero;
 * al bajarla a los hijos, `ch` pasa a resolverse con el cuerpo de cada uno y el
 * título se iría a línea larguísima. 25ch son ~614px, los mismos de antes, y es
 * lo que ya hace `.pf-single__title` en T-07 con su 24ch. Selector de dos
 * clases para no depender del orden con `.pf-archive-post__header > *`. */
.pf-archive-post__header > .pf-archive-post__title {
  max-width: 25ch;
}

.pf-archive-post__title {
  margin: 0;
  font-size: var(--pf-text-2xl);
  line-height: var(--pf-leading-tight);
}

/* La descripción es prosa editorial —`term_description()`, 3385 caracteres en
 * un término—, así que lleva el cuerpo de prosa y el interlineado holgado de
 * la dirección «Expediente», como el contenido de T-07. Sus enlaces no se
 * redeclaran: son de la base de `a` en style.css (core). Consecuencia
 * esperada de la DEC-042: `ch` se resuelve con el cuerpo de cada hijo, así
 * que sus 60ch crecen en proporción (de ~477px a ~537px a 1280); no es una
 * regresión. Issue #116. */
.pf-archive-post__description {
  color: var(--pf-color-text-muted);
  font-size: var(--pf-text-prose);
  line-height: var(--pf-leading-loose);
}

.pf-archive-post__description > * + * {
  margin-top: var(--pf-space-xs);
}

.pf-archive-post__count {
  margin: 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-color-text-muted);
}

.pf-archive-post__grid {
  display: grid;
  gap: var(--pf-space-sm);
  grid-template-columns: 1fr;
}

/* Estado vacío. Va FUERA de la rejilla: con el grid sin abrir no hay pistas
 * vacías que dejen hueco. Dos de los diez términos de `category` no tienen ni
 * una entrada, así que este bloque se ve de verdad. */
.pf-archive-post__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md) 0;
  color: var(--pf-color-text-muted);
}

.pf-archive-post__empty-text {
  margin: 0;
}

.pf-archive-post__empty-link {
  color: var(--pf-color-link);
}

.pf-archive-post__empty-link:hover,
.pf-archive-post__empty-link:focus-visible {
  color: var(--pf-color-link-hover);
}

@media (min-width: 40rem) {
  .pf-archive-post__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .pf-archive-post__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}