/* T-02 · Página genérica (paginas; v3 #69). Solo tokens de style.css.
 * Arriba, la banda de la cabecera a todo el ancho (`seccion` suave con los
 * anillos del ERP): título y entradilla alineados a la izquierda, en el borde
 * del contenedor, como el blog (T-06) y el logo (#111). Debajo, el cuerpo, que
 * arranca en el mismo borde:
 *  - sin índice, el contenido lo maquetan las reglas de `.pf-bloques`
 *    (bloques.css), salvo que el texto no se centra: va a la izquierda del
 *    contenedor, a su ancho (720px); «Ancho» llena el contenedor;
 *  - con índice, el texto a la medida de lectura (--pf-measure) desde el borde
 *    izquierdo del contenedor y, desde 1025px, el índice fijo de 16rem en el
 *    borde derecho (`.pf-con-toc`, de common/toc). Los bloques «Ancho» llenan
 *    el contenedor y los «Ancho completo» van de borde a borde, por encima del
 *    índice: miden contra el cuerpo, que es contenedor (100cqi = el ancho de la
 *    página, sin la barra de desplazamiento);
 *  - con todos los H2 en bloques anchos (#103), como sin índice, y el plegable
 *    arriba solo en el móvil. */

.pf-pagina {
    padding-bottom: var(--pf-space-section);
}

/* -------------------------------------------------------------------------
 * Cabecera: banda a todo el ancho
 * ---------------------------------------------------------------------- */

.pf-seccion.pf-pagina__banda {
    padding-block: var(--pf-space-xl);
    border-bottom: var(--pf-rule);
}

/* Título y entradilla en el borde izquierdo del contenedor de la banda, a
 * 720px como mucho (#111). */
.pf-pagina__columna {
    max-width: var(--pf-container-narrow);
}

.pf-pagina__titulo {
    margin: 0;
}

.pf-pagina__entradilla {
    max-width: var(--pf-measure);
    margin: var(--pf-space-sm) 0 0;
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-soft);
}

/* -------------------------------------------------------------------------
 * Cuerpo
 * ---------------------------------------------------------------------- */

/* El recorte horizontal no crea caja de desplazamiento: el índice sigue fijo. */
.pf-pagina__cuerpo {
    container-type: inline-size;
    margin-top: var(--pf-space-xl);
    overflow-x: clip;
}

/* Sin índice: la hoja de bloques centra cada hijo a su ancho; aquí el texto
 * (lo que no es «Ancho», «Ancho completo» ni flotante) arranca en el borde
 * izquierdo del contenedor, como la cabecera (#111). */
.pf-pagina__articulo:not(.pf-pagina__articulo--con-indice) .pf-pagina__contenido > :not(.alignwide, .alignfull, .alignleft, .alignright) {
    margin-inline: max(var(--pf-gutter), (100% - var(--pf-container)) / 2) auto;
}

/* Con índice: texto e índice dentro del contenedor de la página. El texto
 * arranca en su borde izquierdo y el índice fijo va al derecho (#111). */
.pf-pagina__articulo--con-indice .pf-pagina__marco {
    max-width: calc(var(--pf-container) + 2 * var(--pf-gutter));
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* El plegable de `toc` (hasta 1024px), a la anchura de la columna de texto. */
.pf-pagina__articulo--con-indice .pf-pagina__marco > .pf-toc {
    max-width: var(--pf-container-narrow);
}

/* La hoja de bloques centra cada hijo a su propio ancho; aquí manda la
 * columna. --pf-pagina-amplio es el ancho del contenedor de la página, que es
 * también el del marco (texto e índice). */
.pf-pagina__articulo--con-indice .pf-pagina__contenido {
    --pf-bloques-ancho: 100%;
    --pf-bloques-ancho-amplio: 100%;
    --pf-pagina-amplio: min(100cqi - 2 * var(--pf-gutter), var(--pf-container));

    max-width: var(--pf-measure);
}

/* Ancho y completo, centrados en la página (no en la columna) y por encima
 * del índice fijo, que pasa por detrás mientras cruzan. */
.pf-pagina__articulo--con-indice .pf-pagina__contenido > :is(.alignwide, .alignfull) {
    position: relative;
    z-index: 1;
    max-width: none;
    background-color: var(--pf-color-bg);
}

.pf-pagina__articulo--con-indice .pf-pagina__contenido > .alignwide {
    width: var(--pf-pagina-amplio);
    margin-inline: 0;
}

.pf-pagina__articulo--con-indice .pf-pagina__contenido > .alignfull {
    width: 100cqi;
    margin-inline: calc((var(--pf-pagina-amplio) - 100cqi) / 2) 0;
}

/* Su contenido, dentro del contenedor (bloques.css lo mide contra `.pf-bloques`). */
.pf-pagina__articulo--con-indice .pf-pagina__contenido > .alignfull:is(.wp-block-group, .wp-block-cover):not(.pf-landing-cabecera),
.pf-pagina__articulo--con-indice .pf-pagina__contenido > .alignfull > figcaption {
    padding-inline: max(var(--pf-gutter), (100cqi - var(--pf-container)) / 2);
}

/* Índice solo en el móvil (#103): todos los H2 van en bloques anchos o
 * completos, así que la página se maqueta sin índice y el plegable va arriba,
 * a la anchura del texto y en el borde izquierdo del contenedor (#111). Desde
 * 1025px (donde `toc` pasa a fijo) no sale. */
.pf-pagina__indice-movil {
    width: min(100% - 2 * var(--pf-gutter), var(--pf-container-narrow));
    margin: 0 auto var(--pf-space-lg) max(var(--pf-gutter), (100% - var(--pf-container)) / 2);
}

@media (min-width: 1025px) {
    .pf-pagina__indice-movil {
        display: none;
    }

    /* Con el foco dentro, el índice pasa por delante de los bloques anchos. */
    .pf-pagina .pf-toc:focus-within .pf-toc__fijo {
        z-index: 2;
        background-color: var(--pf-color-bg);
    }
}