/*
  condition-guide — de vijf conditiecodes.

  Elke regel krijgt zijn eigen kleur mee via --_grade (uit de semantische
  --cond-*), zodat de schaal in een crème band vanzelf de donkere set pakt en in
  een nachtband de lichtere. De kleur is nooit de énige drager: de code en de
  tekst staan er altijd bij (WCAG 1.4.1).
*/

/* Familie A (§3): verticaal ritme op de sectie, goot op de inner. */
.bsc-conditions {
  padding: var(--block-y, 64px) 0;
  border-top: var(--border-2) solid var(--border-hairline);
  border-bottom: var(--border-2) solid var(--border-hairline);
}

.bsc-conditions__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: start;
}

.bsc-conditions__head {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--space-9) + 44px);
}

/* Eyebrow: alles komt uit .bsc-label (§7), dit blok voegt niets toe. */

.bsc-conditions__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: .98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

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

.bsc-conditions__list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: var(--border-2) solid var(--border-strong);
}

.bsc-condition {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border-1) solid var(--border-hairline);
}

/*
  De code en de naam eronder moeten in één rechte kolom staan, over alle vijf de
  rijen heen.

  Hier stond `grid-template-columns: auto auto`, en dat is precies waarom ze dat
  níét deden. Een auto-track is flexibel: staat er ruimte over in de container
  (de dt is 13rem breed) dan verdelen de auto-kolommen die ruimte onderling. Hoe
  breed kolom 2 minimaal moet zijn hangt af van de langste tekst in die rij — en
  die verschilt per rij, want NEAR MINT is korter dan LIGHT PLAYED. Dus kreeg
  elke rij een andere verdeling en schoof de stipkolom mee.

  Gemeten op 1440px, getBoundingClientRect().left van .bsc-condition__code:
  NM 669,85 · EX 669,85 · GD 692,05 · LP 656,53 · PL 683,17 — 35,5px spreiding,
  terwijl de stip zelf op alle vijf de rijen op 593,81 stond. Code en naam
  binnen één rij stonden wél gelijk (delta 0); het was de kolom als geheel die
  per rij verschoof.

  Een vaste eerste kolom haalt de flexibiliteit eruit: de stip is 12px, dus
  kolom 2 begint overal op dezelfde x. minmax(0, 1fr) op de tweede kolom houdt
  lange namen binnen de dt in plaats van eroverheen.
*/
.bsc-condition__term {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  align-content: start;
}

.bsc-condition__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--_grade);
  /* Rand eromheen zodat de stip ook op een even lichte ondergrond afsteekt. */
  box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 3px var(--_grade);
}

.bsc-condition__code {
  font: var(--weight-bold) 22px / 1 var(--font-mono);
  color: var(--_grade);
}

.bsc-condition__name {
  grid-column: 2;
  font: var(--weight-medium) 12px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bsc-condition__desc {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  font: var(--weight-regular) 15px / 1.6 var(--font-ui);
  color: var(--text-body);
}

.bsc-condition__bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.bsc-condition__bar-fill {
  display: block;
  width: var(--_bar, 100%);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--_grade);
}

@media screen and (max-width: 1024px) {
  .bsc-conditions__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .bsc-conditions__head {
    position: static;
  }
}

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

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

  .bsc-condition {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}