/* ==========================================================================
   MAHSEN: 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, en
   de prijskaart in de paginakop (prijskaart--kop) tot /website-onderhoud ze
   ook droeg; ze staan sindsdien in publiek.css, want een component van twee
   pagina's hoort daar (§6, "Het blad van één pagina"). De afdruk van het
   akkoord staat er pas vanaf 43.75rem (alleen-breed): smaller werd haar tekst
   6px (§6, Uitsnede). Zonder de afdruk verliezen de vragen eronder hun regel
   lucht, want die hoort tussen twee dingen en er staat er dan maar één. Alleen
   bij een kind van een kolom, en niet dieper: in een kader gevolgd door een
   bijschrift hoort die lucht er wel.

   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). */
@media (max-width: 43.6875rem) {
  .alleen-breed { display: none; }
  .kolommen > * > .alleen-breed + * { margin-top: 0; }
}

/* De betaalbalk: drie vlakken in de verhouding 30, 40 en 30 als inline svg,
   met de percentages als tekst erover, elk in de kleur die op zijn vlak de
   meeste afstand houdt (walnoot op zand, ebben op koper, crème op walnoot). */
.balk-delen { position: relative; overflow: hidden; border-radius: var(--r-beeld); }
.balk-vlak { display: block; width: 100%; height: 64px; }
.deel-zand { fill: var(--zand); }
.deel-koper { fill: var(--koper); }
.deel-walnoot { fill: var(--walnoot); }
.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(--ebben); }
.balk-cijfers span:nth-child(3) { 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; }
}