/**
 * Plantilla T-11 · archive-portafolio.
 *
 * Clases raiz:
 *   .pf-archive-portafolio
 *   .pf-archive-portafolio__body
 *
 * Solo el layout de la pagina. El hero vive en common/hero/styles.css, la
 * rejilla en common/card-portafolio/styles.css (`.pf-card-portafolio-grid`,
 * cerrada en 3 columnas, DEC-035) y la paginacion en
 * common/pagination/styles.css.
 *
 * SIN FILTROS DESDE EL #185: la plantilla ya no pinta `common/filters`, asi que
 * se retira la regla del estado `aria-busy` del repintado por AJAX, que ya no
 * tiene nodo sobre el que actuar. Las reglas del hero de respaldo y de la
 * rejilla propia (__results, __count) se habian retirado antes (#38).
 *
 * El canalon lo da esta plantilla a sus hijos directos, no cada bloque. Ver el
 * bloque «Canalon» y el issue #84, que es el mismo defecto que el #78 cerro en
 * T-09.
 *
 * TOKENS: nombres canonicos de style.css, sin literal de respaldo (issue #60).
 */

.pf-archive-portafolio {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-xl);
    padding-block: var(--pf-space-lg);
}

/* Canalon ----------------------------------------------------------------- */

/*
 * El canalon lo da la plantilla a sus hijos directos, no cada bloque
 * (issue #84). Es el mismo defecto y la misma regla que el #78 cerro en T-09:
 * la contencion se decidia en cada bloque, asi que cada uno la resolvia a su
 * manera y el borde del contenido no era uno solo.
 *
 * Medido en navegador antes de tocar, sobre /portafolio/, tema claro forzado en
 * cliente. Borde izquierdo del contenido de cada bloque:
 *
 *   ventana   <h1> del hero   __body   panel del CTA
 *   400       24              12       24
 *   768       24              12       24
 *   1024      24              12       24
 *   1280      64              40       40
 *   1440      144             120      120
 *
 * O sea dos desajustes distintos: hasta 1024 el panel del CTA si coincide con
 * el <h1> y es `__body` quien se va 12px a la izquierda; a partir de 1280 se
 * van los dos, 24px.
 *
 * La causa del 12px es el idiom de `min()` que tenia `__body`:
 * `width: min(var(--pf-container), 100% - var(--pf-gutter))` descuenta el
 * canalon UNA vez del total y luego lo reparte entre los dos lados, asi que
 * deja medio canalon en cada uno. El idiom canonico de `.pf-container`
 * —style.css seccion 5— pone el canalon ENTERO en cada lado, que es lo que
 * hacen `.pf-hero__inner` y `.pf-cta-box--section`.
 *
 * Va sobre el hijo directo y no sobre cada bloque a proposito: `common/pagination`
 * y `common/cta-box` son de `shell` y los consumen otras plantillas (la
 * paginacion T-06, T-13 y T-16; la cta-box casi todas), asi que no se tocan ni
 * su hoja ni su firma.
 *
 * El selector lleva dos clases (0,2,0) para ganar a `.pf-cta-box--section`
 * (0,1,0) sin depender del orden de carga: los componentes encolan su hoja al
 * pintarse, o sea DESPUES de esta.
 *
 * El hero se excluye porque va a sangre a proposito: su fondo ocupa el ancho de
 * la ventana y el canalon lo pone dentro `.pf-hero__inner`.
 */
.pf-archive-portafolio > :not(.pf-hero) {
    width: 100%;
    max-width: var(--pf-container);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

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

/*
 * Sin `width` ni `margin-inline` propios: los pone la regla de canalon de
 * arriba, que es la misma para los dos bloques no-hero. Tenerlos aqui ademas
 * dejaria dos declaraciones compitiendo por la misma propiedad.
 */
.pf-archive-portafolio__body {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-lg);
}