/* ============================================================
   layout.css — containers, grid, section rhythm, page skeleton.
   ============================================================ */

.container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }
.container--reading { max-width: var(--container-reading); }
.container--wide { max-width: var(--container-wide); }

/* --- 12-column grid --------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.cards {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.cards--2 { --cols: 2; }
.cards--3 { --cols: 3; }
.cards--4 { --cols: 4; }

/* --- Section rhythm --------------------------------------- */
.section {
    padding-block: var(--section-pad);
}
.section--alt {
    background: var(--c-bg-alt);
    border-block: 1px solid var(--c-border);
}
.section--invert { background: var(--c-bg-invert); color: var(--c-text-invert); }
.section--tight { padding-block: calc(var(--section-pad) * 0.83); }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
    margin-bottom: var(--section-head-gap);
}
.section__head-left { min-width: 0; }
.section__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--c-heading);
    max-width: 28ch;
}
.section__title--sm { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.section__eyebrow { margin-bottom: var(--s-2); }
.section__rule {
    width: 40px;
    height: 3px;
    background: var(--c-accent);
    margin-top: var(--s-4);
    border-radius: 2px;
}
.section--invert .section__rule { background: var(--c-white); }

.section__head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section__head--center .section__title { max-width: 20ch; }
.section__head--center .section__rule { margin-inline: auto; }
.section__subtitle {
    margin-top: var(--s-4);
    max-width: 480px;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
}
.section__head--center .section__subtitle { margin-inline: auto; }

/* --- Page head band --------------------------------------- */
.page-head {
    background: var(--c-bg-alt);
    padding: 72px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--c-border);
}
.page-head__title { color: var(--c-heading); }
.page-head__title { max-width: 640px; margin-inline: auto; }
.page-head__sub {
    margin-top: var(--s-4);
    color: var(--c-text-soft);
    max-width: 560px;
    margin-inline: auto;
}
.page-head__controls {
    margin-top: var(--s-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* --- Listing shell (main + sidebar) ----------------------- */
.listing {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--s-8);
    padding-block: 72px;
    align-items: start;
}
.listing__main { min-width: 0; }
.listing__aside {
    min-width: 0;
    position: sticky;
    top: 120px;
    display: grid;
    gap: var(--s-6);
    align-content: start;
}

/* --- Main / page skeleton --------------------------------- */
.site-main { display: block; min-height: 40vh; }

/* Space the fixed compact header reserves once it detaches. */
.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }