/* ==========================================================================
   MAHSEN: pagina/werkstuk.css
   Wat alleen een werkstuk draagt (/werk/van-aanvraag-tot-factuur), naast
   publiek.css (design-system.md §6 en §10). De view van het werkstuk hangt dit
   blad zelf, via partials/stijlblad in @push('stijl'), zodat het ná publiek.css
   komt en de andere pagina's het niet laden. Een tweede werkstuk hangt
   hetzelfde blad: ze delen hun partials (het voorbehoud, de feiten, de
   kruimels), en dus hun vorm.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina heeft; de paginakop, de kolommen, de
   stippen en de knop staan in publiek.css, want een andere pagina draagt ze
   ook.
   ========================================================================== */

/* De kop: onder de H1 het voorbehoud en de feiten, op een gsm onder elkaar.
   Vanaf 75rem staan ze rechts van de H1, zoals de kaart in de kop van
   /software-op-maat: anders bleef naast een H1 van hoogstens 18em de helft
   van de kop leeg, en stond het voorbehoud een scherm lager. */
.werkstuk-kop { display: grid; gap: 2.5rem; }
.werkstuk-kop > * { min-width: 0; }
@media (min-width: 75rem) {
  .werkstuk-kop { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
  .werkstuk-naast { margin-top: 1.5rem; }
}

/* Het voorbehoud: een vlak in walnoot-2, zoals de grens van het bewijs op de
   home, met de eerste zin vet (partials/werk-voorbehoud). Het staat vóór
   elk beeld (WerkLabelTest), en in de kop, zodat wie hier uit een
   zoekresultaat binnenkomt, het leest voor de rest. */
.voorbehoud { padding: 26px 24px; border-radius: var(--r-kaart); background: var(--walnoot-2); }
.voorbehoud p + p { margin-top: 0.75rem; }
@media (min-width: 56.25rem) {
  .voorbehoud { padding: 34px 32px; }
}

/* De feiten van het register, onder het voorbehoud op walnoot: de naam in
   zand (5,86:1 op walnoot, §5.1) en in 700, het feit in crème eronder. Geen
   lijnen ertussen, en geen label erboven (§1). */
.feiten { display: grid; gap: 1rem; margin-top: 2rem; }
.feiten dt { color: var(--zand); font-weight: 700; }
.feiten dd { margin: 0; }

/* Wat het programma doet: de stippen van publiek.css, met meer lucht tussen
   de regels, zoals de soorten werk op /software-op-maat, en op de leesbreedte
   (§3): zonder kolommen ernaast liep een regel op een breed scherm over de
   hele band. */
.functies { max-width: var(--maat); gap: 1rem; margin-top: 2.5rem; }

/* Het tempo en hoe het gebouwd is, naast elkaar in één walnoten band (de
   kolommen van publiek.css). Zonder de lucht die de kolommen boven zich
   houden, want hier staat er geen kop boven, en op een gsm met de lucht van
   een blok tussen de twee vragen, zodat de tweede kop niet tegen de eerste
   tekst plakt. */
.werkstuk-duo { margin-top: 0; row-gap: var(--blok); }

@media (forced-colors: active) {
  .voorbehoud { border: 2px solid CanvasText; }
}