/* Veiligheidssignalisatie.

   Alles wat Bootstrap of Quarto zelf kan, gebeurt in de .qmd met hun eigen
   klassen (.card, .grid, .border, .badge, layout-ncol, list-table). Hier
   staat alleen wat daar niet in zit. Vijf blokken, elk met een reden. */

/* 1. De bordengalerij. Bootstrap's .g-col-* springt op vaste breekpunten
      (576/768/992px) en laat de tegels daartussen uitrekken; auto-fill houdt
      elk bordje op elke schermbreedte even groot. Dat is de reden dat deze
      grid met de hand geschreven is en niet met .grid/.g-col-*. */
.borden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1.1rem .7rem;
  margin: 1.5rem 0;
}

/* 2. Elk bord staat op een witte tegel, ook op een donkere pagina: zo blijft
      een zwart pictogram leesbaar en hoeft geen enkele tekening omgekleurd te
      worden. Als losse Bootstrap-klassen (.bg-white .p-2 .rounded) stond dit
      75 keer in de .qmd; hier staat het één keer. De hoekstraal komt uit het
      thema, zodat ze mee verandert als dat ooit bijgesteld wordt. */
.borden img,
.tegel {
  background: #fff;
  padding: .5rem;
  border-radius: var(--bs-border-radius);
}

/* 3. Ronde, driehoekige en rechthoekige borden hebben elk een andere
      verhouding. In een vierkant vakje met object-fit staan ze allemaal even
      groot en vallen de bijschriften op één lijn. Bootstrap heeft
      .object-fit-contain, maar .ratio-1x1 werkt op een wikkel-div en niet op
      de <img> zelf, en dat zou 50 extra divs kosten.

      .tegel-blok doet hetzelfde buiten een galerij, voor rijen waarin een bord
      naast een productfoto staat (de ketting gevaar-bord-PBM in pbm.qmd). Daar
      verschillen de verhoudingen het sterkst en zouden de bijschriften anders
      op drie hoogtes landen. Anders dan in de galerij blijft de breedte uit de
      .qmd staan: die rijen hebben maar twee of drie tegels, en over een halve
      kolom uitgerekt wordt een handschoen belachelijk groot. Losse .tegel
      blijft ongemoeid: die staat ook onder brede borden zoals een
      nooduitgangbord, en die wil je niet vierkant. */
.borden img {
  width: 100%;
}

.borden img,
.tegel-blok {
  aspect-ratio: 1;
  object-fit: contain;
}

/* 4. Quarto zet elke afbeelding in een <figure> met 1em ondermarge. In een
      grid met een eigen gap staat die marge er dubbel bij. */
.borden figure {
  margin-bottom: 0;
}

/* 5. De vijf ISO-kleuren, gemeten uit de pictogrammen zelf (niet gekozen).
      Bootstrap's eigen .bg-danger/.bg-warning/.bg-success zijn de kleuren van
      het flatly-thema — oranje en turkoois — en die zouden op deze pagina iets
      anders leren dan wat er op een echt bord staat. Naamgeving en het
      !important volgen Bootstrap's eigen .bg-*-hulpklassen; zonder dat wint
      `.table > * > *` in de tabel van @sec-matrix. Gebruikt in de
      soortenkaarten en in die tabel. */
.bg-verbod       { background-color: #a81728 !important; color: #fff !important; }
.bg-waarschuwing { background-color: #f0b816 !important; color: #111 !important; }
.bg-gebod        { background-color: #244a84 !important; color: #fff !important; }
.bg-eerstehulp   { background-color: #237c4d !important; color: #fff !important; }
.bg-brand        { background-color: #9a1a1d !important; color: #fff !important; }