/**
 * Plantilla T-06 · Índice del blog.
 * Layout de /blog-growth-marketing-para-negocios-online/.
 *
 * Solo el layout de la plantilla. El hero lo estila common/hero, las tarjetas
 * common/card-post, y el filtro, la rejilla y la paginación common/filters.
 *
 * Tokens: solo nombres canónicos de style.css sección 1, y SIN literal de
 * respaldo (issue #60). `var(--x, 3rem)` se queda con el literal siempre que el
 * token falte, que es como el andamiaje dejó de consumir la escala de verdad
 * sin que se notara. Los tres nombres que esta hoja pasaba por la capa de alias
 * —`--pf-space-N`, `--pf-font-size-*` y `--pf-container-width`— se traducen a su
 * canónico conservando el valor que ya servía el alias, no el del respaldo.
 *
 * @package pfuture
 * @module contenidos
 */

/* La raíz NO acota: el hero es `cover` y va a sangre. Quien acota es el
   envoltorio de abajo, igual que en T-01. */
.pf-blog-page {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-lg);
}

/* Canalón — issue #90. T-06 no está en el censo del issue, que midió quince
 * plantillas y no ésta, pero tiene el mismo defecto que el #90 le encontró a
 * T-12: es coherente por dentro —un solo hijo— y está a la izquierda de su
 * propio hero. Medido en navegador, borde de contenido del cuerpo contra el
 * `__inner` del hero: 16 contra 24 hasta 1024, 56 contra 64 en 1280 y 136
 * contra 144 en 1440. Ocho píxeles, siempre los mismos, y la causa es la misma
 * que en T-13: la raíz daba `--pf-space-sm` donde el tema da `--pf-gutter`.
 * Dicho en el #90. */
.pf-blog-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-lg);
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-block: var(--pf-space-md);
  padding-inline: var(--pf-gutter);
  width: 100%;
}

.pf-blog-page__section-title {
  margin: 0 0 var(--pf-space-sm);
  font-size: var(--pf-text-xl);
}