/* ==========================================================================
   layout.css — layout primitives, section rhythm, grids. Every page.

   Three-level section model (agency/development.md), one responsibility each,
   composable:
     section        vertical rhythm only            padding-block
     .gutter        horizontal padding              padding-inline (floors 1.6rem)
     .gutter-max    max-width + horizontal centre   max-width + margin-inline
   A content container usually carries `.gutter .gutter-max`. Either works
   alone: `.gutter` on a full-bleed band, `.gutter-max` inside an already-padded
   parent. Vary the cap with a local `--gutter-max` (see `--narrow`).
   ========================================================================== */

.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. Spacing is varied deliberately: `--section-y` is the default
   beat, `.section--tight` and `.section--loose` break it so the page breathes
   rather than marching.
   -------------------------------------------------------------------------- */
.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 (per the 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 placed directly inside a split spans both columns as a
   heading row above them, centred. 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.
   -------------------------------------------------------------------------- */
.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;
}

/* Grid items default to `min-width: auto`, so they refuse to shrink below
   their content's min-content width and push the page wider than the viewport.
   Every grid child needs this or a wide child silently breaks the layout. */
.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); }