/* ============================================================================
   assets/css/hsb-beeld.css — ruimte reserveren voor afbeeldingen
   2 november 2026

   Waarom dit bestand bestaat.

   Een afbeelding zonder afmetingen neemt geen ruimte in tot hij geladen is.
   Op dat moment duwt hij alles eronder omlaag. Dat heet layout shift, en
   Google meet het als CLS -- een van de drie Core Web Vitals. Voor de
   bezoeker is het het effect dat je net op iets wilt klikken en de pagina
   verspringt.

   Je hoeft daarvoor niet overal width en height in de HTML te zetten. Het
   werkt net zo goed als de CSS de ruimte vastlegt met aspect-ratio of een
   vaste hoogte. Dat is bij het grootste deel van de site al zo: van de 113
   afbeeldingen zonder width en height hebben er 54 al een omhulsel dat de
   ruimte bepaalt, en de rest staat in mailtemplates, waar het niet uitmaakt.

   Er bleven drie gevallen over waar werkelijk niets was vastgelegd. Die
   staan hieronder. Het zijn er dus drie, geen honderd.

   Dit bestand wordt in head-base.php als laatste ingeladen, zodat het wint
   van de <style>-blokken die verderop in de pagina staan.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. De klantlogo's op de homepage

   .client-logo-img had alleen max-height: 40px. Een maximum is geen
   reservering: tot het logo binnen is, is de rij 0 pixels hoog, en daarna
   springt alles eronder 40 pixels omlaag. Met acht logo's naast elkaar
   gebeurt dat acht keer kort na elkaar.

   De hoogte staat nu op het omhulsel. Het logo zelf blijft binnen die hoogte
   passen met object-fit: contain, dus een breed en een hoog logo staan nog
   steeds netjes naast elkaar zonder vervorming.
   ---------------------------------------------------------------------------- */
body .client-logo-wrapper {
  height: 40px;              /* even hoog als de oude max-height */
  flex: 0 0 auto;
}
body .client-logo-img {
  height: 100%;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
@media (max-width: 767px) {
  body .client-logo-wrapper { height: 30px; }   /* zoals de bestaande mobiele regel */
}


/* ----------------------------------------------------------------------------
   2. De boekomslagen op de profielpagina

   .hsb-pub__cover img had max-height: 250px en width: auto, en het omhulsel
   zelf had geen hoogte. Omslagen verschillen bovendien sterk in verhouding,
   dus de sprong was per boek anders.

   Nu heeft het omhulsel een vaste hoogte van 250px en staat de omslag
   onderaan uitgelijnd. Een liggend boek en een staand boek hangen daardoor
   aan dezelfde onderlijn, wat er ook rustiger uitziet dan gecentreerd.
   object-fit: contain blijft: een omslag mag niet bijgesneden worden.
   ---------------------------------------------------------------------------- */
body .hsb-pub__cover {
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body .hsb-pub__cover img {
  max-height: 250px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


/* ----------------------------------------------------------------------------
   3. De afbeelding in het blok "Beslis samen"

   Voor .selectie-hero-img bestond helemaal geen opmaak -- de klasse stond
   alleen in de HTML. De afbeelding werd daardoor op zijn eigen formaat
   getoond en door de overflow: hidden van de kaart afgeknipt.

   Nu een vaste kolombreedte met een vaste verhouding. Op een telefoon gaat
   de kaart onder elkaar staan; daar wordt het beeld een band bovenaan.
   ---------------------------------------------------------------------------- */
body .selectie-hero-img {
  flex: 0 0 44%;
  aspect-ratio: 4 / 3;
  align-self: stretch;
  min-height: 100%;
}
body .selectie-hero-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  body .selectie-hero-img {
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}