/* ============ st59 — het eerste scherm op de telefoon krijgt zijn eigen knoppen, onder het merk: variant 3 uit
   st58-knoppen, vastgezet. Gezet door ../st59-knoppen-vast.py. Elke .v3 is :root geworden (zelfde gewicht), zie
   clients/_pipeline/VARIANTS.md. Alleen tot 620px en niet met ?telefoon=uit; vanaf 621px raakt niets hier de
   pagina. De belbalk staat bij het landen buiten beeld; knoppen.js zet .kn-op zodra de knoppen voorbij zijn. ============ */


@media (max-width:620px){

  /* ── de belbalk staat bij het landen buiten beeld. Hij glijdt in (de 0,2s van stitch.css) zodra
     knoppen.js .kn-op zet: de knoppen van de fold zijn voorbij. Dit overstemt telefoon.css §2
     (.sticky{transform:none}) en de .is-op van script.js. body.is-typing verbergt hem nog steeds. ── */
  :root:not([data-telefoon="uit"]) .sticky{transform:translateY(110%)}
  :root:not([data-telefoon="uit"]) .sticky.kn-op{transform:none}

  /* ── de knoppenrij van de fold staat er weer (vouw.css en telefoon.css §2 zetten haar uit), als één rij:
     8px ertussen, het label op één regel, 48px hoog (stitch.css), iets minder zijlucht dan op de tablet. ── */
  :root:not([data-telefoon="uit"]) .fold .fold__actions{
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--r-1);
  }
  :root:not([data-telefoon="uit"]) .fold .fold__actions > .btn{
    display:inline-flex;width:auto;margin:0;padding-inline:.9rem;white-space:nowrap;
  }


  /* ═════════ 3 · onder het merk ═════════
     Direct onder het merk (order 1, na .merkblok in de html), gecentreerd zoals het merk, op zijn eigen breedte; 8px
     onder de 16 die het merk al onder zich heeft. */
  :root:not([data-telefoon="uit"]) .fold .fold__actions{order:1;align-self:center;margin-top:var(--r-1)}
  /* het merk en zijn knoppen zijn één kaartje; de kop begint een nieuwe groep: 40px erboven in plaats van 24 */
  :root:not([data-telefoon="uit"]) .fold .fold__h1{margin-top:var(--r-4)}
}

/* ── onder 375px: naast het nummer past het woord WhatsApp er niet bij. De knop draagt zijn pictogram; het
   woord blijft voor de schermlezer, zoals in de balk en de kopbalk. ── */
@media (max-width:374px){
  :root:not([data-telefoon="uit"]) .fold .fold__actions > .btn--wa span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}