/* layout.css: layout primitives, section rhythm, grids. Every page.
   The three-level section model and its rules: agent/layout.md. */

.gutter {
    padding-inline: var(--gutter);
}

.gutter-max {
    width: 100%;
    max-width: var(--gutter-max, var(--container-max));
    margin-inline: auto;
    min-width: 0;
}

.gutter-max--narrow {
    --gutter-max: 78rem;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.55);
}

.section--loose {
    padding-block: calc(var(--section-y) * 1.35);
}

.section--sunken {
    background: var(--surface-sunken);
}

.section--raised {
    background: var(--surface-raised);
}

.section--ink {
    background: var(--surface-ink);
    color: var(--on-ink-soft);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 {
    color: var(--ink-on-dark);
}

/* Light type on dark needs more air (brand register). */
.section--ink p {
    line-height: 1.72;
}

/* Section headers -------------------------------------------------------- */
.section-header {
    margin-bottom: var(--space-7);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

/* A section header inside a split spans both columns as a heading row. The
   grid gap spaces it from the row below, so its own bottom margin comes off. */
.split > .section-header {
    grid-column: 1 / -1;
    margin-bottom: 0;
    text-align: center;
}

.section-header > p {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    color: var(--ink-muted);
}

.section--ink .section-header > p {
    color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   Grids. Breakpoint-free where possible. The min() wrap is required: without
   it auto-fit demands an N-wide track inside a narrower column.
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-5);
}

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}

.grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

/* Asymmetric split: content column is wider than the aside. */
.split {
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    align-items: start;
}

/* Else grid items refuse to shrink below min-content and push the page wider
   than the viewport. Any new grid needs it too; see agent/layout.md. */
.split > *,
.grid > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .split--reverse {
        grid-template-columns: 0.85fr 1.15fr;
    }

    .split--even {
        grid-template-columns: 1fr 1fr;
    }

    .split--center {
        align-items: center;
    }
}

/* Utilities, deliberately few. Inline styles are not a layout system. */
.text-center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }