/*
  contrast-pair — "wel / niet".

  Twee panelen die elkaars tegenbeeld zijn: het bevestigende paneel krijgt een
  groene rand aan de kopse kant, het ontkennende een rode. De tekens (✓ en ✕)
  staan er altijd bij, dus wie geen kleur ziet mist niets.
*/

/* Familie A (§3): verticaal ritme op de sectie, goot op de inner. */
.bsc-contrast {
  padding: var(--block-y, 64px) 0;
}

.bsc-contrast__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  /*
    Expliciet twee kolommen, geen auto-fit. De voetnoot spant 1/-1, en daardoor
    kan auto-fit de lege tracks niet opruimen: je kreeg vier kolommen waarvan er
    twee leeg bleven en de panelen half zo breed werden als bedoeld.
  */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

@media screen and (max-width: 768px) {
  .bsc-contrast__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
  Introzin boven de twee kolommen (wave B). Spant beide kolommen, want anders
  zou hij als een derde paneel lezen. Grotere maat dan bodytekst: dit is de
  openingszin van de pagina waar dit blok bovenaan staat.
*/
.bsc-contrast__intro {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-3);
  max-width: 62ch;
  font: var(--weight-regular) clamp(17px, 1.6vw, 20px) / 1.6 var(--font-ui);
  color: var(--text-body);
}

.bsc-contrast__col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  border: var(--border-2) solid var(--border-hairline);
  border-top-width: var(--border-heavy);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.bsc-contrast__col--yes { border-top-color: var(--status-success); }
.bsc-contrast__col--no  { border-top-color: var(--status-danger); }

.bsc-contrast__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.bsc-contrast__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    font: var(--weight-regular) 15px / 1.55 var(--font-ui);
    color: var(--text-body);
  }
}

.bsc-contrast__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  font: var(--weight-bold) 12px / 1 var(--font-ui);
}

.bsc-contrast__col--yes .bsc-contrast__mark {
  background: var(--status-success);
  color: var(--bsc-navy-900);
}

/*
  Donkere inkt op het rood, niet wit. Wit haalde 3,27:1 en dat is te weinig voor
  een 12px-glyph. Je kunt tegenwerpen dat het teken aria-hidden is en de kolomkop
  hetzelfde zegt — maar de héle reden dat dit teken er staat is 1.4.1: het is de
  drager voor wie het kleurverschil tussen de twee kolommen niet ziet. Een drager
  die zelf slecht leesbaar is doet dat werk niet.

  Het vlak blijft red-500: dat houdt 4,99:1 tegen het paneel, terwijl red-700 als
  vlak naar 2,53:1 zou zakken en de chip in het donkere paneel zou verdwijnen.
  night-000 op red-500 = 5,72:1. Meteen ook symmetrisch met de ja-chip, die al
  donkere inkt op een fel vlak zet.
*/
.bsc-contrast__col--no .bsc-contrast__mark {
  background: var(--status-danger);
  color: var(--bsc-night-000);
}

/*
  De mededeling onder beide kolommen.

  Was een grijze voetnoot van 15px waarin de belangrijkste zin van de pagina als
  bijzin stond. Op /custom-slabs/ draagt die zin het hele verhaal — er gaan
  alleen fanmade kaarten in, en het cijfer op het label is een fun grade — dus
  hij is nu het zwaarst gezette stuk lopende tekst van het blok, groter dan de
  intro en groter dan de lijstregels. De toelichting eronder blijft op
  bodygrootte, zodat er binnen de mededeling nog een rangorde zit.

  Het gele vlak is bewust niet omgezet naar een felle waarschuwingskleur: dit
  is geen fout en geen gevaar, het is een spelregel. De opmaak moet hem
  onmisbaar maken, niet alarmerend.
*/
.bsc-contrast__note {
  grid-column: 1 / -1;
  display: grid;
  /*
    Twee kolommen op breed: de kernzin links, de toelichting rechts. In één
    kolom houden de leesbreedtes (52ch / 68ch) de rechterhelft van het vlak leeg,
    en dan leest de mededeling als een half gevulde doos in plaats van als een
    bewust blok. De kolommen zijn ongelijk verdeeld zodat de kernzin ook in
    breedte de zwaarste van de twee blijft.
  */
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: var(--border-2) solid var(--border-hairline);
  border-left: var(--border-heavy) solid var(--bsc-yellow-500);
  background: var(--surface-sunken);
  /* Half afgerond blijft een bewuste vorm; basiswaarde --radius-md staat al
     in het vier-waardensysteem (§1), dus hier verandert niets. */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.bsc-contrast__note-lead {
  margin: 0;
  max-width: 52ch;
  font: var(--weight-bold) clamp(19px, 2.1vw, 24px) / 1.35 var(--font-ui);
  color: var(--text-strong);
  text-wrap: balance;
}

.bsc-contrast__note-body {
  margin: 0;
  max-width: 68ch;
  font: var(--weight-regular) 15px / 1.6 var(--font-ui);
  color: var(--text-body);
}

/* Op crème haalt yellow-500 geen 3:1 als begrenzing; zie de meting bij
   --border-brand in _tokens.scss. */
.bsc-paper .bsc-contrast__note {
  border-left-color: var(--bsc-yellow-800);
}

/*
  Onder 900px past de tweekolomsmededeling niet meer: de kernzin zou op vier of
  vijf woorden per regel uitkomen. Zelfde grens als waar de twee panelen
  hierboven al onder elkaar staan is niet mogelijk (768px), want de kernzin komt
  eerder in de knel dan de lijstjes — dus een eigen breekpunt.
*/
@media screen and (max-width: 900px) {
  .bsc-contrast__note {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

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

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

  .bsc-contrast__col {
    padding: var(--space-5);
  }
}