/* ==========================================================================
   MahaWeb: pagina/prijzen.css
   Wat alleen /prijzen draagt, naast publiek.css (design-system.md §6 en §10).
   pages/prijzen hangt dit blad zelf, via partials/stijlblad in
   @push('stijl'), zodat het ná publiek.css komt en de andere pagina's het
   niet laden.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Een component dat
   een tweede pagina nodig heeft, gaat terug naar publiek.css, in de PR van
   die pagina.
   ========================================================================== */

/* De kolommen per sectie stonden hier tot /software-op-maat ze ook droeg, de
   prijskaart in de paginakop (prijskaart--kop) tot /website-onderhoud ze ook
   droeg, en alleen-breed (de afdruk van het akkoord pas vanaf 43.75rem) tot
   de home haar prijsblok ook zo toonde; ze staan sindsdien in publiek.css,
   want een component van twee pagina's hoort daar (§6, "Het blad van één
   pagina").

   Elke selector hier draagt een klasse die alleen deze pagina heeft: een
   regel op wat publiek.css al draagt, zou een gedeeld component op één pagina
   anders maken, en dat verandert in publiek.css, voor elke pagina
   (Ontwerpregels). */

/* De betaalbalk: drie vlakken in de verhouding 30, 40 en 30 als inline svg,
   in blauw, blauw-diep en nacht, met de percentages als tekst erover, elk in
   de kleur die op zijn vlak het best afsteekt: nacht op blauw (5,28:1),
   papier op blauw-diep (6,57:1) en crème op nacht (15,53:1). Twee keer
   hetzelfde blauw las als 70 en 30, en geen drie betalingen. */
.balk-delen { position: relative; overflow: hidden; border-radius: var(--r-beeld); }
.balk-vlak { display: block; width: 100%; height: 64px; }
.deel-blauw { fill: var(--blauw); }
.deel-blauw-diep { fill: var(--blauw-diep); }
.deel-nacht { fill: var(--nacht); }
.balk-cijfers { position: absolute; inset: 0; display: grid; grid-template-columns: 30fr 40fr 30fr; }
.balk-cijfers span { display: grid; place-items: center; font-size: 1.375rem; font-weight: 800; }
.balk-cijfers span:nth-child(2) { color: var(--papier); }
.balk-cijfers span:nth-child(3) { color: var(--creme); }
.balk-cijfers span:first-child::selection { background: var(--nacht); color: var(--creme); }
.betaalbalk figcaption { margin-top: 1.25rem; }
@media (min-width: 56.25rem) {
  .balk-vlak { height: 76px; }
  .balk-cijfers span { font-size: 1.625rem; }
}

/* In Windows-hoogcontrast vallen de vlakken weg, zoals in publiek.css: de balk
   houdt een rand. */
@media (forced-colors: active) {
  .balk-delen { border: 2px solid CanvasText; }
}