/**
 * Plantilla · Índice de guías pilar.
 * Layout de /blog/guias/.
 *
 * Solo el layout. Las tarjetas se estilan en common/card-post/styles.css.
 * Tokens canónicos, sin literales de respaldo (issue #60).
 *
 * @package pfuture
 * @module contenidos
 */

/* La raíz NO acota: el canalón lo da la regla del hijo directo, como en T-06,
   T-07 y T-13 desde el #90. */
.pf-blog-guias {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-lg);
  padding-block: var(--pf-space-md);
}

.pf-blog-guias > * {
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

/* La medida de lectura va sobre los hijos del `<header>`, no sobre el
   `<header>`: la regla de canalón de arriba es (0,2,0) y se comería un
   `max-width` de una sola clase. Es la DEC-042, con la trampa que trae:
   `ch` se resuelve con el cuerpo de CADA elemento, así que el título lleva
   medida propia. */
.pf-blog-guias__header {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.pf-blog-guias__header > * {
  max-width: 60ch;
}

.pf-blog-guias__header > .pf-blog-guias__title {
  max-width: 25ch;
}

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

/* La entradilla es prosa editorial: cuerpo de prosa e interlineado holgado de
   la dirección «Expediente», igual que la descripción del término en T-13. */
.pf-blog-guias__intro {
  color: var(--pf-color-text-muted);
  font-size: var(--pf-text-prose);
  line-height: var(--pf-leading-loose);
}

.pf-blog-guias__intro > * {
  margin: 0;
}

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

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

/* Estado vacío fuera de la rejilla, para no dejar una pista abierta sin
   contenido. Con dos guías publicadas no se ve, pero se ve el día que alguien
   desmarque la casilla. */
.pf-blog-guias__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);
}

@media (min-width: 48rem) {
  .pf-blog-guias__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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