/* ============ st47 — de telefoonpas, stap 1 van 5 ("minder tekst"). Zijn keuze 2B van 2026-10-12
   (clients/_pipeline/basis2/PLAN.md): op de telefoon houdt elke sectie haar kop, haar eerste zin, haar foto en haar
   knoppen; de rest gaat weg met CSS, nooit verwijderd, zodat Google het nog leest. Met zijn grenzen van De Zaanse
   Schilder (st45): "the subheader can stay on most sections" (geen dienst alleen een kop) en "Over Ons en De
   Eigenaar can have their text back in". De eigenaar, over ons, de vragen, de beoordelingen en het contact blijven
   heel; de plaatsen van het werkgebied blijven staan. Wat stitch.css al op de telefoon verborg (st46, het blok "weg op
   de telefoon") blijft zoals het was. De eerste zinnen (de rest in <span class="tel-rest">) zet
   ../st47-minder-tekst.py. Vanaf 621px verandert niets. ?telefoon=uit zet deze pas uit. ============ */

@media (max-width:620px){

  /* ── Gevelrenovatie: "Onder meer voor" en de opsomming; de tweede alinea verbergt stitch.css al ── */
  html:not([data-telefoon="uit"]) #gevelrenovatie .kaart__right,

  /* ── Dakwerkzaamheden en Schoorsteenrenovatie: het labeltje en de opsomming ── */
  html:not([data-telefoon="uit"]) #dakwerkzaamheden .eyeb--tight,
  html:not([data-telefoon="uit"]) #dakwerkzaamheden .scope,
  html:not([data-telefoon="uit"]) #schoorsteenrenovatie .eyeb--tight,
  html:not([data-telefoon="uit"]) #schoorsteenrenovatie .scope,

  /* ── het onderschrift onder de detailfoto van het dak; de foto blijft ── */
  html:not([data-telefoon="uit"]) .sec--beeldpaar .foto--detail figcaption,

  /* ── het werkgebied: de adresregel (die staat ook bij contact en in de voet); de plaatsen blijven ── */
  html:not([data-telefoon="uit"]) #werkgebied .adresregel,

  /* ── de diensten en het werkgebied: alles na de eerste zin ── */
  html:not([data-telefoon="uit"]) .tel-rest { display: none; }
}


/* ============ st48 — stap 2 van 5 ("telefoonopmaak"). ../st48-telefoon-opmaak.py zet dit blok en de vijf
   WhatsApp-knoppen met `tel-alleen` in de html. Vanaf 621px verandert hier niets: daar zijn de nieuwe knoppen er niet.
   ?telefoon=uit zet ook dit blok uit. ============ */

/* de WhatsApp-knoppen die alleen de telefoon krijgt */
.btn.tel-alleen { display: none; }

@media (max-width:620px){

  /* ── 1 · twee knoppen per sectie: de contactknop en WhatsApp, over de volle breedte, het label in het midden.
     Zijn regel (basis2, 2B): "Each section gets a full-width WhatsApp button and a contact button, label centred."
     De derde, omlijnde knop (Meer informatie, en de tweede weg naar formulier of telefoon) blijft in de html. ── */
  html:not([data-telefoon="uit"]) .btn.tel-alleen { display: inline-flex; }
  html:not([data-telefoon="uit"]) main .btn--ghost { display: none; }
  html:not([data-telefoon="uit"]) main .btn { justify-content: center; text-align: center; }
  /* een label dat op een smal scherm (360 en minder) toch moet breken, breekt in twee gelijke regels in plaats van
     één los woord op de tweede */
  html:not([data-telefoon="uit"]) main .btn,
  html:not([data-telefoon="uit"]) .band--zakelijk .link-arrow--sterk { text-wrap: balance; }

  /* het werkgebied: de twee knoppen staan los in het raster, 16px ertussen zoals in een knoppenrij */
  html:not([data-telefoon="uit"]) .gebied__copy > .btn + .btn { margin-top: var(--r-2); }

  /* de zakelijke band: de tekst, dan de offerteknop en WhatsApp onder elkaar, over de volle breedte */
  html:not([data-telefoon="uit"]) .band__in--zakelijk { flex-direction: column; align-items: stretch; gap: 0; }
  html:not([data-telefoon="uit"]) .band__in--zakelijk > .band__zak { margin-bottom: var(--r-3); }
  html:not([data-telefoon="uit"]) .band--zakelijk .link-arrow--sterk,
  html:not([data-telefoon="uit"]) .band--zakelijk .btn { width: 100%; justify-content: center; text-align: center; }
  html:not([data-telefoon="uit"]) .band--zakelijk .btn { margin-top: var(--r-2); }

  /* ── 2 · geen knoppen in het eerste scherm. Zijn regel: "On the phone: no buttons in the fold (the sticky bar
     carries them)". De balk draagt ze nu, dus hij staat er vanaf het landen; de beoordeling blijft in de fold. ── */
  html:not([data-telefoon="uit"]) .fold__actions > .btn { display: none; }
  html:not([data-telefoon="uit"]) .sticky { transform: none; }

  /* ── 3 · de twee deuren onder elkaar in plaats van een veegrij: "just under each other like the rest of the page on
     mobile is". De aanwijzing, het streepje en de loper gaan mee. ── */
  html:not([data-telefoon="uit"]) .kaartveld { display: block; }
  html:not([data-telefoon="uit"]) .kaartveld::before,
  html:not([data-telefoon="uit"]) .veegcue,
  html:not([data-telefoon="uit"]) .rijspoor { display: none; }
  html:not([data-telefoon="uit"]) .deuren.rij {
    grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-columns: auto;
    row-gap: var(--r-3); overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding: 0; scroll-padding-left: 0;
  }
  html:not([data-telefoon="uit"]) .deuren.rij > .deur { display: flex; flex-direction: column; grid-row: auto; }

  /* reparatie: de verzendknop van het formulier brak hier al in st47 op twee regels, met "aanvragen" alleen op de
     tweede; met minder zijlucht past het label op één regel */
  html:not([data-telefoon="uit"]) #aanvraag .btn--lg { padding-inline: 1rem; }
}


/* ============ st53 — het lint Vrijblijvende inspectie weg op de telefoon. Zijn woorden: "delete this block on
   mobile". De opname blijft te vragen via de balk onderin. Gezet door ../st53-opname-weg.py. ============ */
@media (max-width:620px){
  html:not([data-telefoon="uit"]) .band--opname { display: none; }
}