/* ============================================================
   LAYOUT — containers, sections, grid.

   Layouts are asymmetric by default. Centred stacks are the
   fastest way to make a page look like a template.
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-wide  { max-width: var(--container-wide); }
.container-prose { max-width: var(--container-prose); }
.container-full  { max-width: none; }

/* ---------- Sections ---------- */
.section {
    position: relative;
    padding-block: var(--section-y);
    background: var(--bg);
    color: var(--fg);
}
.section-tight { padding-block: var(--section-y-tight); }
.section-flush-top { padding-top: 0; }
.section-flush-bottom { padding-bottom: 0; }

/* A hairline between adjacent same-surface sections. */
.section-ruled { border-top: 1px solid var(--line); }

/* Section header block: eyebrow + title + optional lead. */
.section-head { max-width: 46rem; }
.section-head > * + * { margin-top: var(--s-4); }
.section-head-between {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;
    max-width: none;
}

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }

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

/* Asymmetric splits — the workhorses of the editorial layout. */
.split { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) {
    .split-7-5 { grid-template-columns: 7fr 5fr; gap: var(--s-16); }
    .split-5-7 { grid-template-columns: 5fr 7fr; gap: var(--s-16); }
    .split-8-4 { grid-template-columns: 8fr 4fr; gap: var(--s-16); }
    .split-4-8 { grid-template-columns: 4fr 8fr; gap: var(--s-16); }
    /* Label column on the left, content on the right — editorial staple. */
    .split-label { grid-template-columns: minmax(8rem, 1fr) 4fr; gap: var(--s-12); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }
.stack-xl > * + * { margin-top: var(--s-16); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}

.flow-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* Sticky sidebar for article TOCs and filter rails. */
.sticky-rail {
    position: sticky;
    top: 7rem;
    align-self: start;
}

/* Full-bleed escape hatch inside a container. */
.bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.hide { display: none !important; }
@media (max-width: 639px)  { .hide-sm { display: none !important; } }
@media (max-width: 899px)  { .hide-md { display: none !important; } }
@media (min-width: 900px)  { .show-md-only { display: none !important; } }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }
.mt-20 { margin-top: var(--s-20); }
.mt-24 { margin-top: var(--s-24); }