/* layout.css — container, section rhythm, section heads, grids */

.container {
    max-inline-size: var(--container-max);
    padding-inline: var(--container-pad);
    margin-inline: auto;
    inline-size: 100%;
}
.container--narrow { max-inline-size: var(--container-narrow); }
.container--wide   { max-inline-size: var(--container-wide); }

/* Sections — every section sits on one step of the black ladder */
.section {
    position: relative;
    padding-block: var(--section-pad);
}
.section--base     { background-color: var(--color-bg); }
.section--raised   { background-color: var(--color-surface); }

/* Section head — eyebrow, title, gold kicker bar under the title, lead.
   The kicker bar is the page's single separator system. */
.section-head {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    max-inline-size: 48rem;
    margin-block-end: var(--space-2xl);
}
.section-head__title::after {
    content: "";
    display: block;
    inline-size: var(--kicker-width);
    block-size: var(--rule);
    margin-block-start: var(--space-lg);
    background: var(--gradient-gold);
}
.section-head__lead {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
}
.section-head__lead + .section-head__lead { margin-block-start: calc(var(--space-sm) * -1); }

.section-head--center {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}
.section-head--center .section-head__title::after { margin-inline: auto; }

/* Grids — mobile-first (engineering §6 patterns, collapsed to 1 column by default) */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split section head — title on the start side, lead on the end side (lg and up) */
.section-head__aside { display: grid; gap: var(--space-md); }

@media (min-width: 992px) {
    .section-head--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: var(--space-4xl);
        align-items: end;
        max-inline-size: none;
    }
    .section-head--split > .eyebrow,
    .section-head--split > .section-head__title { grid-column: 1; }
    .section-head--split > .section-head__aside {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
    }
}

/* Three-up card grid for the interior list pages (3 → 2 → 1).
   A separate modifier from .grid--3 so the approved home-page grids are untouched. */
@media (min-width: 768px) {
    .grid--3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .grid--3-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}