/* ==========================================================================
   NEXUS — Layout
   Containers, gutters, sections, grid. Rules: .design/DESIGN.md §5–§8, §10
   ========================================================================== */

/* --- Containers (DESIGN.md §5) ------------------------------------------
   Gutters are never zero. Only full-bleed media and band backgrounds touch
   the viewport edge — their content still respects the gutter. */
.shell {
  width: 100%;
  max-width: calc(var(--w-content) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: calc(var(--w-wide) + (var(--gutter) * 2)); }

/* Any running paragraph column. Hard rule: 720px, 68–78 characters. */
.measure { max-width: var(--w-text); }

/* --- Sections (DESIGN.md §7) -------------------------------------------- */
.section            { padding-block: var(--section-standard); }
.section--major     { padding-block: var(--section-major); }
.section--tight     { padding-block: var(--section-tight); }
.section--band      { padding-block: var(--section-band); }

/* --- Bands (DESIGN.md §2, §10, §18) — one dark band per page ------------- */
.band--mist    { background: var(--c-mist); }
.band--surface { background: var(--c-surface); }
.band--ink     { background: var(--c-ink); color: var(--c-canvas); }
.band--deep    { background: var(--c-blue-abyss); color: var(--c-canvas); }

.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4,
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4 { color: var(--c-canvas); }
.band--ink .t-label, .band--deep .t-label { color: var(--c-aluminium); }
.band--ink .t-caption, .band--deep .t-caption { color: var(--c-aluminium); }
.band--ink .t-spec-key, .band--deep .t-spec-key { color: var(--c-aluminium); }
.band--ink .t-data, .band--deep .t-data { color: var(--c-canvas); }
.band--ink .t-muted, .band--deep .t-muted { color: var(--c-aluminium); }
.band--ink .rule, .band--deep .rule,
.band--ink .spec-row, .band--deep .spec-row { border-color: var(--c-graphite); }
.band--ink a, .band--deep a {
  color: var(--c-blue-bright);
  text-decoration-color: var(--c-blue-bright);
}

/* --- Full bleed (DESIGN.md §10) — max two media moments per page ---------
   Only needed for an element that sits INSIDE a constrained container. A
   block-level <section> is already the full width of the page and must not
   use this class: 100vw includes the scrollbar, so it would push the page
   8–17px wider and break the no-horizontal-scroll rule (§20).
   `max-width: 100%` keeps that from happening if it is ever misapplied. */
.full-bleed {
  width: 100vw;
  max-width: 100%;
  margin-inline: calc(50% - 50vw);
}

/* --- Grid (DESIGN.md §8) ------------------------------------------------
   12 columns ≥1024, 8 columns 768–1023, 4 columns below. */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Editorial split — the default section layout: label + heading in columns
   1–3, content in 4–12. Stacks on tablet and mobile (DESIGN.md §8). */
.split { display: grid; gap: var(--s-6); }
.split > * { min-width: 0; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 3fr 9fr;
    gap: var(--grid-gap);
    column-gap: var(--s-8);
  }
}

/* Column spans.
   Mobile (4 columns): every item is full width.
   Tablet (8 columns): narrow items go 2-up, wide items stay full width.
   Desktop (12 columns): the spans below apply as named.
   This is what "3 across desktop, 2 tablet, 1 mobile" (DESIGN.md §8) means
   in practice, without each page inventing its own breakpoints. */
.grid > [class*="col-"] { grid-column: 1 / -1; }

@media (min-width: 768px) and (max-width: 1023px) {
  .grid > .col-3,
  .grid > .col-4 { grid-column: span 4; }   /* half of 8 → 2-up */
}

@media (min-width: 1024px) {
  /* Selectors match the default rule's specificity deliberately — a bare
     .col-4 would lose to `.grid > [class*="col-"]` regardless of breakpoint. */
  .grid > .col-3  { grid-column: span 3; }
  .grid > .col-4  { grid-column: span 4; }
  .grid > .col-5  { grid-column: span 5; }
  .grid > .col-6  { grid-column: span 6; }
  .grid > .col-7  { grid-column: span 7; }
  .grid > .col-8  { grid-column: span 8; }
  .grid > .col-9  { grid-column: span 9; }
  .grid > .col-12 { grid-column: span 12; }
  .grid > .start-4 { grid-column-start: 4; }
}

/* --- Stack: vertical rhythm from the 8px scale only --------------------- */
.stack > * + * { margin-top: var(--s-5); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }

/* Label → heading is 16px; heading → lead is 24px (DESIGN.md §7) */
.heading-block > .t-label + * { margin-top: var(--s-4); }
.heading-block > h1 + .t-lead,
.heading-block > h2 + .t-lead { margin-top: var(--s-5); }

/* --- Dividers ----------------------------------------------------------- */
.rule { border: 0; border-top: var(--hairline); margin: 0; }
.rule--dark { border-top: var(--hairline-dark); }

/* --- Main content offset ------------------------------------------------- */
#main { display: block; }

/* Contact: the form is the wider half, the heading the narrower. */
@media (min-width: 900px) {
  .split--form { grid-template-columns: 1fr 1.4fr; }
}