/* Beginpagina v3 (website/index.html): regels die alleen hier gelden. Komt na /style.css.
   Waarom een eigen bestand: style.css en site.js zijn gedeeld met de andere pagina's, waar tegelijk aan gewerkt wordt.
   Drie dingen: (1) de pagina korter, (2) 13:40 zonder krimpende laptop, (3) op een smal scherm leesbare letters in de
   telefoons, door een uitsnede van het scherm te tonen in plaats van het hele scherm op 8 px. */

/* ---------------------------------------------------------------- korter
   Elk moment had ± 2 schermen: een ruime witregel erboven en 95 % schermhoogte spoor onder de bühne. Met een kortere
   witregel en 60 % spoor blijft elke stap ± 12 % schermhoogte scrollen (minstens 650 ms rust ertussen, site.js),
   en is de dag ± 3 schermen korter. */
.dag .moment { padding-top: clamp(64px, 7vw, 96px); }
html.beweeg .dag .spoor::after { height: 60vh; height: 60svh; }
.avond { padding-block: clamp(64px, 7vw, 96px); }

/* Voor wie: de laatste regel is voor wie meebeslist; iets anders van toon, dezelfde haarlijn */
.rollen .rol-beslis b { color: var(--accent-tekst); }
#rollen .sectie-noot { margin-top: 24px; }

/* Waarom anders: zes korte punten in een raster met haarlijnen, zonder kaarten */
.waarom-raster { display: grid; gap: 0 56px; margin-top: 48px; }
@media (min-width: 720px) { .waarom-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .waarom-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.waarom-raster > div { padding: 24px 0 28px; border-top: 1px solid var(--lijn); }
.waarom-raster h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.waarom-raster p { margin-top: 8px; color: var(--grijs); }
.waarom-raster .waarom-label { font-size: 14px; line-height: 1.5; }
.waarom-raster .waarom-label strong { font-weight: 600; color: var(--inkt); }
.waarom-raster .pijllink { font-size: 16px; }
#regels, #privacy, #keuze { scroll-margin-top: calc(var(--kop-h, 64px) + 24px); }

/* Hoe ver: kort. Vier stappen als lijst, rechts de telling. */
.stand-tekst .intro { margin-top: 0; }
.stand-stappen { list-style: none; margin-top: 28px; border-top: 1px solid var(--lijn); }
.stand-stappen li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.stand-stappen b { font-weight: 600; color: var(--grijs); }
.stand-stappen .nu b { color: var(--accent-tekst); }
.stand-door { margin-top: 24px; }
#stand .stand-raster { margin-top: 40px; }
#stand .telling .sectie-noot { margin-top: 12px; }

/* ---------------------------------------------------------------- 13:40: één toestel per stap
   Stap 1 de laptop van dhr. Bakker op volle grootte. Stap 2: de tik op 'Laat leerlingen het zien', het label wordt
   'Zichtbaar', dan gaat de laptop weg en komt de telefoon van Lotte op dezelfde plek, op de gewone telefoonmaat. Zo
   wordt niets kleiner gemaakt om plaats te maken (eerder 70 %, en dan was de laptop niet meer te lezen). */
@media (min-width: 640px) {
  html.beweeg .dag .podium--duo > .toestel--laptop { transform: none; transition: opacity 400ms var(--zacht), translate 400ms var(--zacht); }
  html.beweeg .dag .toneel--duo:is([data-stap="2"], [data-stap="3"]) .podium--duo > .toestel--laptop {
    transform: none; opacity: 0; translate: 0 -12px; transition-delay: 750ms; pointer-events: none;
  }
}
@media (min-width: 1200px) {
  .dag .podium--duo { padding-bottom: 0; }
  .dag .podium--duo > .toestel--laptop { transform: none; }
  /* Dezelfde maat als de telefoon bij 07:40 en 07:50; een stukje naar rechts, zodat 'Bij Mark' links ernaast past */
  .dag .podium--duo > .telefoon-duo {
    justify-self: center; align-self: center; margin: 0; translate: 80px 0;
    width: min(340px, calc((100vh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * .462));
    width: min(340px, calc((100svh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * .462));
  }
  .dag .toneel--duo .duo-kaart { left: 0; right: auto; top: auto; bottom: 14%; width: min(260px, 34%); }
  /* Zonder beweging: geen stapel. De laptop op volle breedte, daaronder de telefoon en de kaart. */
  html:not(.beweeg) .dag .podium--duo { display: flex; flex-direction: column; align-items: center; gap: 32px; }
  html:not(.beweeg) .dag .podium--duo > .toestel--laptop { transform: none; width: 100%; }
  html:not(.beweeg) .dag .podium--duo > .telefoon-duo { translate: none; }
  html:not(.beweeg) .dag .toneel--duo .duo-kaart { position: relative; left: auto; bottom: auto; width: min(320px, 100%); margin: 0 auto; }
}

/* ---------------------------------------------------------------- smal: een leesbare uitsnede
   Een telefoon die in z'n geheel in een smal venster past, wordt ± 260 px breed: dan zijn de kleinste letters 8 px.
   Daarom op smal: de telefoon over de volle breedte (tot 360 px) met letters van 14 px, en alleen het bovenste deel
   van het scherm in beeld. De tabbalk onderaan blijft staan, zodat het nog steeds een telefoon is. */
@media (max-width: 639px) {
  /* De telefoon zelf: zie style.css (smal: een leesbare uitsnede), dat geldt nu voor alle pagina's */
  /* Opening: de telefoon van Lotte op leesbare maat, als uitsnede van de bovenkant */
  .held-telefoon { width: min(360px, 100%); }
  .held-telefoon .scherm--telefoon { font-size: 14px; aspect-ratio: auto; height: 540px; }
  /* Op smal staat alleen de telefoon in de opening: 'Links: dhr. Bakker' klopt dan niet */
  .held-wie { display: none; }
}
@media (max-width: 639px) { .rollen a { padding: 16px 4px; } }