/* Homepage (/ en /voorbeeld/home-glimlach/). Geladen via `styles` in de front matter,
   ná site.css, layout.css, aanvullingen.css, ux.css en responsive.css. */

/* ===== Opening: alle vier de gezichten vrij van de witte kaart (feedback praktijk, 14 okt) =====
   Probleem: de kaart linksonder viel op veel schermen over het gezicht van Eli (tweede van links),
   o.a. 1024×768 (30%), 1280×720 (24%), 1366×768 (21%), 1920×1080 (10%) en 2560×1440 (63%).
   Oorzaak: de foto (3:2) en de kaart (~320–370 px hoog) passen op die verhoudingen niet onder elkaar.

   Oplossing
   - Vanaf 1100 px: de kaart staat onderaan in de normale opbouw en het podium krijgt bovenin altijd
     zoveel ruimte dat de strook met gezichten erboven past: ruimte boven de hoofden (--kop) +
     gezichtenstrook (van de bovenkant van het haar van Melco op 22,5% tot de kin van Eli op 51,7%
     van de fotohoogte = 29,2% × 66,667vw = 19,47vw) + ruimte tot de kaart (--kin). De kaart reikt
     vanaf 1100 px nooit tot onder de derde persoon, dus diens (lagere) kin telt niet mee.
     Is het scherm daarvoor te laag, dan wordt het podium iets hoger (min-height i.p.v. vaste hoogte).
     De foto schuift zo dat de hoofden op --kop onder de bovenrand staan; als het podium hoger is
     dan dat toelaat, ligt de foto onderaan (100%), zodat er nooit een lege strook ontstaat.
     Voorwaarde: kaarthoogte + 32 px + marge ≤ 48,3% van de fotohoogte (= 32,2vw). Daarom is de
     kaart tussen 1100 en 1199 px en op lage schermen iets compacter.
   - 861–1099 px (tablet liggend, kleine laptop): foto en podium zijn daar bijna even hoog (3:2),
     dus er is geen ruimte om te schuiven. Daar staat de kaart boven de foto, net als op tablet
     staand en mobiel.
   - De langzame zoom (kenburns) zoomt hier rond het midden van de gezichtenstrook en minder ver
     (6% i.p.v. 12%), zodat hoofden niet uit beeld en kinnen niet achter de kaart schuiven. */
@media (min-width:1100px){
  .hero-v .hero-v-stage{
    /* marges groeien mee met de breedte, net als de zoombeweging (6% van de halve strook) */
    --kop:calc(8px + .8vw);
    --kin:calc(8px + .8vw);
    height:auto;
    min-height:min(clamp(560px,100svh - 88px,820px),66.667vw - 48px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:calc(var(--kop) + var(--kin) + 19.47vw) 0 32px;
  }
  .hero-v .hero-card{position:relative;top:auto;bottom:auto;flex:none}
  .hero-v .hero-v-img{object-position:50% max(calc(var(--kop) - 15vw),100%)}
  /* "Scroll" niet meer half over de kaart, maar rechtsonder op de paginamarge */
  .hero-v .scroll-cue{left:auto;right:max(40px,calc((100% - 1160px)/2));bottom:32px;transform:none}
}
@media (min-width:1100px) and (max-width:1199px),(min-width:1100px) and (max-height:820px){
  .hero-v .hero-card{padding:36px 48px 32px}
  .hero-v .hero-card .h1{font-size:clamp(36px,3.4vw,46px)}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  /* draaipunt: midden van de gezichtenstrook (37,1% van de fotohoogte) */
  .hero-v .hero-v-img.kenburns{animation-name:homeZoom;transform-origin:50% max(calc(var(--kop) + 9.73vw),calc(100% - 41.93vw))}
}
@keyframes homeZoom{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1%)}}

@media (min-width:861px) and (max-width:1099px){
  .hero-v .hero-v-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero-v .hero-card{position:relative;top:auto;bottom:auto;left:auto;transform:none;box-shadow:none;width:100%;order:1;padding:44px 40px 36px}
  .hero-v .hero-card .h1{font-size:40px}
  .hero-v .hero-card .hero-pick{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;width:auto}
  .hero-v .hero-card .hero-pick .btn{justify-content:center}
  .hero-v-media{position:relative;inset:auto;order:2;height:min(62vw,460px)}
  .hero-v .hero-v-img{object-position:center 30%}
  .hero-v .scroll-cue{display:none}
}

/* ===== Voorbeeld "Een glimlach voor iedereen!" (/voorbeeld/home-glimlach/) ===== */
/* Slogan als hoofdkop, in de speelse handschriftletter zoals de slogan elders op de site */
.home-glimlach-card .home-slogan{display:inline-block;font-family:var(--hand);font-weight:400;font-size:clamp(42px,7vw,60px);line-height:1;letter-spacing:0;color:var(--midnight)}
/* Vanaf 1100 px (kaart over de foto): slogan op één regel en kaart iets breder, zodat de kaart
   niet hoger wordt dan op de gewone homepage en de gezichten vrij blijven (zie boven). */
@media (min-width:1100px){
  .hero-v .home-glimlach-card{width:min(600px,50vw)}
  .home-glimlach-card .home-slogan{font-size:clamp(38px,3.6vw,52px)}
}
/* rode glimlach onder de slogan */
.home-smile{display:block;width:100%;height:14px;margin-top:4px;overflow:visible}
/* smalle telefoon: slogan op twee regels; glimlach zo breed als de langste regel */
@media (max-width:459px){.home-smile{width:4.9em}}
.home-smile path{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.home-glimlach-card .sub{margin-top:14px}
/* kernwaarden onder de tekst "Waar we voor staan" */
.home-waarden{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-weight:600;color:var(--midnight)}
.home-waarden li{display:inline-flex;align-items:center;gap:10px}
.home-waarden li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}