/*
  prose — lopende tekst tussen full-bleed secties.

  De leestypografie zelf staat in dev/css/components/_page.scss (.bsc-prose),
  want die geldt ook op de gewone subpagina-template. Hier alleen de sectie
  eromheen.
*/

/*
  Familie A (ontwerpbesluit §3): de sectie draagt alléén het verticale ritme,
  de goot zit op de inner. Zo valt de tekst op dezelfde rooilijn als nav, hero,
  masthead en footer. Stond de goot op de sectie (familie B), dan telde hij
  bovenop de centrering van de 1280px-inner en liep dit blok 28px naar binnen.
*/
.bsc-prose-section {
  padding: var(--block-y, 64px) 0;
  background: var(--surface-page);
  color: var(--text-body);
}

.bsc-prose-section__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
}

.bsc-prose-section .bsc-prose {
  max-width: var(--measure);
}

/* Breed: voor tabellen die op 62ch geplet worden. */
.bsc-prose-section--wide .bsc-prose {
  max-width: 90ch;
}

/*
  ── Twee kolommen ─────────────────────────────────────────────────────────

  Voor het staartje van een pagina: twee of drie korte kopjes met elk één
  alinea. In één kolom werd dat een reeks van 128px lucht (de h2-margin uit
  components/_page.scss) met steeds dezelfde lege rechterhelft ernaast — de
  vorm die de audit op vier pagina's terugvond.

  Multicol en geen grid, omdat de inhoud een platte stroom uit de editor is:
  er is geen wrapper per kop+alinea om grid-cellen van te maken. `break-after:
  avoid` op de kop en `break-inside: avoid` op de alinea houden een paar bij
  elkaar; de h2-margin gaat omlaag omdat 128px binnen een kolom van een halve
  pagina niet meer als ritme leest maar als een gat.

  Bewust niet voor doorlopend verhaal: dan moet je onderaan kolom één weer naar
  boven, en dat is op een breed scherm een slechte leeservaring.
*/
.bsc-prose-section--split .bsc-prose {
  max-width: min(100%, 1040px);
  column-count: 2;
  column-gap: var(--space-9);
}

.bsc-prose-section--split .bsc-prose > * + * {
  margin-top: var(--space-4);
}

.bsc-prose-section--split .bsc-prose h2 {
  margin-top: var(--space-7);
  break-after: avoid;
}

.bsc-prose-section--split .bsc-prose > h2:first-child {
  margin-top: 0;
}

.bsc-prose-section--split .bsc-prose p,
.bsc-prose-section--split .bsc-prose ul,
.bsc-prose-section--split .bsc-prose ol {
  break-inside: avoid;
}

/* Onder tablet is er geen ruimte voor twee kolommen; terug naar één. */
@media screen and (max-width: 900px) {
  .bsc-prose-section--split .bsc-prose {
    column-count: 1;
    max-width: var(--measure);
  }
}

/*
  Maat, tracking, kleur en gewicht komen uit .bsc-label (§7). Hier alleen wat
  echt van dit blok is: dat de eyebrow een eigen regel vormt en hoeveel lucht er
  onder staat.
*/
.bsc-prose-section__eyebrow {
  display: block;
  margin-bottom: var(--space-5);
}

@media screen and (max-width: 600px) {
  /* Contentblok: 64 desktop → 40 mobiel (§4). */
  .bsc-prose-section {
    padding: var(--block-y, 40px) 0;
  }

  .bsc-prose-section__inner {
    padding: 0 var(--gutter-x, 20px);
  }
}