/*
  price-sheet — de optelsom.

  De vorm is die van een kassabon: posten links, bedragen rechts uitgelijnd in
  mono, een streep, en de som eronder. De + in de linkermarge is het enige
  decoratieve element en zegt in één blik dat deze regels bij elkaar opgeteld
  moeten worden — precies wat een gewone prijslijst niet doet.

  Bedragen staan in --font-mono met tabular-nums (via .bsc-num) en zijn
  rechts uitgelijnd, zodat de komma's onder elkaar staan en de som visueel
  klopt met de posten erboven.
*/

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

.bsc-pricesheet__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-pricesheet__head {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

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

.bsc-pricesheet__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-pricesheet__intro {
  margin: 0;
  max-width: 42ch;
  font: var(--weight-regular) 15px / 1.6 var(--font-ui);
  color: var(--text-body);
}

.bsc-pricesheet__sheet {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--border-2) solid var(--border-hairline);
  border-top-width: var(--border-heavy);
  border-top-color: var(--border-brand);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

/*
  De voorwaarde. Zelfde vorm als de voetnoot van contrast-pair (gele kopse rand
  op een verzonken vlak) omdat het dezelfde soort mededeling is: iets dat je moet
  weten voordat de rest betekenis krijgt. Alleen staat hij hier bóven de inhoud
  in plaats van eronder, want hij bepaalt of de bedragen je überhaupt aangaan.
*/
.bsc-pricesheet__requirement {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-heavy) solid var(--bsc-yellow-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-sunken);
}

.bsc-pricesheet__requirement p {
  margin: 0;
  font: var(--weight-medium) clamp(16px, 1.5vw, 18px) / 1.5 var(--font-ui);
  color: var(--text-strong);
}

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

.bsc-pricesheet__rows {
  margin: 0;
  display: grid;
  gap: 0;
}

.bsc-pricesheet__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-1) solid var(--border-hairline);
}

.bsc-pricesheet__row:first-child {
  padding-top: 0;
}

.bsc-pricesheet__op {
  font: var(--weight-bold) 18px / 1 var(--font-mono);
  color: var(--text-faint);
}

.bsc-pricesheet__label {
  display: grid;
  gap: var(--space-1);
}

.bsc-pricesheet__name {
  font: var(--weight-semibold) 17px / 1.3 var(--font-ui);
  color: var(--text-strong);
}

/*
  "Altijd" / "Alleen als …" — dit is de enige plek waar staat of een post
  meetelt, dus het is inhoud en geen bijschrift. Vandaar 13px en --text-muted
  (4,5:1 op beide banden) in plaats van iets nog zachters.
*/
.bsc-pricesheet__when {
  font: var(--weight-regular) 13px / 1.4 var(--font-ui);
  color: var(--text-muted);
}

.bsc-pricesheet__amount {
  margin: 0;
  justify-self: end;
  font: var(--weight-bold) clamp(20px, 2.2vw, 26px) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
}

/*
  De somregel. Zwaardere streep erboven, geen streep eronder: dat is de
  kassabon-conventie en het maakt zonder woorden duidelijk dat dit geen vierde
  post is maar het resultaat van de drie erboven.
*/
/*
  De rij vóór de somregel geeft zijn onderrand op. Anders staan er twee strepen
  op elkaar: de 1px van de laatste post en de 3px van de som, met een paar
  pixels ertussen. Op een kassabon hoort daar één zwaardere streep te staan.
*/
.bsc-pricesheet__row:has(+ .bsc-pricesheet__row--total) {
  border-bottom: 0;
}

.bsc-pricesheet__row--total {
  margin-top: var(--space-2);
  padding-bottom: 0;
  border-top: var(--border-3) solid var(--border-strong);
  border-bottom: 0;
  padding-top: var(--space-5);
}

.bsc-pricesheet__row--total .bsc-pricesheet__op {
  color: var(--text-brand);
}

.bsc-pricesheet__row--total .bsc-pricesheet__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.bsc-pricesheet__row--total .bsc-pricesheet__amount {
  font-size: clamp(26px, 3vw, 34px);
  color: var(--text-brand);
}

.bsc-pricesheet__note {
  margin: 0;
  font: var(--weight-regular) 14px / 1.6 var(--font-ui);
  color: var(--text-muted);
}

/*
  De uitzonderingen.

  Ondergeschikt in élke as tegelijk, want één signaal is te makkelijk te missen:
  ze staan onder de som in plaats van erin, achter een streep, in kleinere letter,
  zonder de + van de optelling, en met een bedrag dat een derde kleiner is dan de
  posten erboven. Wat NIET gebeurt is ze wegstoppen achter een uitklap of in
  grijs-op-grijs — de prijs moet vindbaar en leesbaar blijven (--text-body haalt
  4,5:1 op beide banden).
*/
.bsc-pricesheet__extras {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-1) dashed var(--border-strong);
}

.bsc-pricesheet__extra-rows {
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.bsc-pricesheet__extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.bsc-pricesheet__extra-label {
  display: grid;
  gap: var(--space-1);
}

.bsc-pricesheet__extra-name {
  font: var(--weight-semibold) 15px / 1.3 var(--font-ui);
  color: var(--text-body);
}

.bsc-pricesheet__extra-note {
  max-width: 58ch;
  font: var(--weight-regular) 13px / 1.5 var(--font-ui);
  color: var(--text-muted);
}

.bsc-pricesheet__extra-amount {
  margin: 0;
  justify-self: end;
  font: var(--weight-bold) 17px / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
  white-space: nowrap;
}

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

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

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

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

  .bsc-pricesheet__requirement {
    padding: var(--space-4);
  }

  /*
    De operator-kolom verdwijnt op mobiel niet: hij is smal genoeg (1rem) en
    zonder + valt de optelling uit elkaar in drie losse prijzen — precies het
    misverstand dat dit blok moet voorkomen.
  */
  .bsc-pricesheet__row {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
  }
}