/* DE OPMAAK VAN DE BEELDEN.
   ==============================================================================================
   Eén bestand voor alle sites. De kleuren staan er niet in: die zitten in de SVG zelf, en die
   komt uit merk.js. Hier staat alleen hoe een beeld zich in een pagina gedraagt.

   DE BELANGRIJKSTE REGEL STAAT BOVENAAN: een beeld mag nooit breder worden dan zijn kader en
   nooit de pagina laten schuiven. Dat is de fout die op een telefoon het hardst aankomt en op
   een ontwerpscherm nooit te zien is. */

.beeld {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* De hero. Naast de tekst op een breed scherm, eronder op een smal.
   De verhouding staat vast (aspect-ratio) zodat de pagina niet verspringt terwijl het beeld
   binnenkomt -- verspringende tekst is de meest irritante vorm van traag. */
.beeld-hero {
  aspect-ratio: 660 / 348;
  margin: 0 auto;
}

/* De dashboard-preview. Volgens de opdracht het belangrijkste beeld van de ronde, dus hij krijgt
   ruimte: een eigen blok met lucht eromheen, en een zachte schaduw zodat hij als een venster
   voor de pagina lijkt te liggen in plaats van erin geplakt. */
.beeld-dashboard {
  aspect-ratio: 660 / 420;
  margin: 28px auto;
  border-radius: 10px;
  box-shadow: 0 18px 42px -22px rgba(0, 0, 0, .35);
  max-width: 720px;
}

/* Het stappendiagram en zijn labels. Die twee hóren bij elkaar en moeten dus op dezelfde
   kolombreedte staan -- vandaar dat ze hetzelfde grid gebruiken. Loopt dat uiteen, dan staat een
   label onder de verkeerde bol, en dat is erger dan geen labels. */
.beeld-stappen { aspect-ratio: 600 / 80; }

.stappen-labels {
  display: grid;
  grid-template-columns: repeat(var(--stappen, 4), 1fr);
  gap: 0;
  list-style: none;
  margin: 4px 0 0;
  padding: 0 20px;
}
.stappen-labels li {
  text-align: center;
  padding: 0 8px;
  font-size: .88rem;
  line-height: 1.4;
}
/* Het nummer staat er als tekst bij, niet in het beeld. Zie de kop van lib/beeld/componenten.js:
   ook een cijfer is tekst, en in het Arabisch of Hindi ziet een "3" er anders uit. */
.stappen-labels .stap-nr {
  display: block;
  font-weight: 700;
  color: var(--accent, var(--bordeaux-deep));
  margin-bottom: 2px;
}
.stappen-labels .stap-tekst { color: var(--inkt-zacht, var(--muted)); }

/* Het themabeeld bij een artikelcategorie. */
.beeld-thema {
  aspect-ratio: 320 / 180;
  border-radius: 8px;
}

/* Een beeld naast tekst. Op smalle schermen stapelt het, en dan gaat de TEKST voor: wie op een
   telefoon binnenkomt, wil eerst weten waar hij is. */
.beeld-naast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .beeld-naast { grid-template-columns: 1fr 1fr; gap: 40px; }
  .beeld-naast.omgekeerd .beeld-kolom { order: -1; }
}

/* Bewegingsgevoeligheid: er beweegt hier niets, en dat blijft zo. Deze regel staat er als
   herinnering voor wie later een animatie wil toevoegen -- doe dat dan binnen deze query. */
@media (prefers-reduced-motion: reduce) {
  .beeld, .beeld * { animation: none !important; transition: none !important; }
}

/* HET WATERMERK ACHTER DE HERO.
   ==============================================================================================
   Het staat ACHTER de tekst, gecentreerd, en de kop loopt er dwars overheen. Daarmee is er meteen
   bij het openen van de site een beeld te zien zonder dat er iets naar beneden wordt geduwd — dat
   is de hele reden dat het een watermerk is en geen plaatje in de tekst.

   Eerste poging stond rechts (width 56%, right -6%). Dan valt de tekst er niet overheen maar
   ernaast, en dat is precies wat een watermerk níet is.

   DE KLEUREN ZITTEN IN DE SVG, NIET IN EEN OPACITY. Opacity werkt door op wat eronder ligt, dus de
   uitkomst zou per pagina verschillen en niemand kan dan zeggen wat het eigenlijk moet zijn. Nu is
   het uitgerekend en meetbaar: het contrast van de lopende tekst over de donkerste plek van het
   watermerk is 8,7 : 1, terwijl de eis 4,5 is. Zie WATERMERK_MENGING in lib/beeld/motieven.js.

   z-index 0 en de inhoud op 1: het watermerk hoort nooit over een knop te liggen. */
.heeft-watermerk { position: relative; overflow: hidden; }
.heeft-watermerk > * { position: relative; z-index: 1; }

.beeld-watermerk {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 1060px);
  height: auto;
  pointer-events: none;
}

/* Op een smal scherm staat de tekst over de volle breedte en zou het watermerk er middenin liggen.
   Daar mag het weg: een sfeerbeeld is nooit belangrijker dan leesbaarheid. */
@media (max-width: 900px) {
  .beeld-watermerk { display: none; }
}

/* EEN FOTO ALS WATERMERK.
   ==============================================================================================
   Vult de hele hero in plaats van er als plaatje in te zweven. Dat is het verschil tussen een
   watermerk en een afbeelding: een watermerk heeft geen rand waar hij ophoudt.

   De wassing zit IN het bestand en niet in een opacity — zie scripts/watermerk-maken.mjs. Dat is
   niet alleen netter maar ook meetbaar: de donkerste plek van dit bestand is #C1C0C7, en de
   lopende tekst daarover haalt 8,88 : 1. De eis is 4,5.

   Een foto is geen tekening: hij heeft duizenden kleuren en de donkerste plek bepaalt of de tekst
   leesbaar blijft. Daarom wordt die plek gemeten op een tot 40x27 verkleinde versie — tekst staat
   over een vlak, niet over één pixel. */
.beeld-watermerk-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: none;
}

@media (max-width: 900px) {
  .beeld-watermerk-foto { display: none; }
}

/* EEN WATERMERKBAND BUITEN DE HERO.
   ==============================================================================================
   De hero is vanzelf hoog genoeg; een gewone sectie is dat niet, en dan wordt de foto tot een
   smalle strook geknepen die er niet uitziet als hetzelfde beeld. Deze klasse geeft zo'n sectie
   dezelfde ademruimte, zodat de prijspagina er hetzelfde uitziet als de startpagina.

   min-height en geen vaste hoogte: staat er veel tekst in, dan groeit de band gewoon mee. */
.watermerk-band {
  /* Laag genoeg dat de inhoud eronder boven de vouw blijft. Op 520px stond de eerste
     prijskaart op 989 pixels terwijl het venster 900 hoog is — dan moet je scrollen om te zien
     wat iets kost, en dat is precies de klacht waarmee deze hele ronde begon. */
  min-height: clamp(190px, 22vw, 300px);
  display: flex;
  align-items: center;
}
.watermerk-band > .wrap { width: 100%; }