/* ============ st63 — Wie zijn wij?: de keuze uit st62-wie vastgezet, op de telefoon variant 2 (het affiche), op
   de computer de woorden van variant 3 (het gesprek) in de kaart van st62; de grens is 620/621px. Gezet door
   ../st63-wie-vast.py. Elke .vN is :root geworden (zelfde gewicht), zie clients/_pipeline/VARIANTS.md. ============ */

/* ── de woorden: per feit staan in de html twee koppen en twee zinnen, data-wie="telefoon" en data-wie="computer";
   elke breedte toont de hare en zet de andere weg, met het gewicht van #wie-zijn-wij. Ook met ?telefoon=uit. ── */
@media (max-width:620px){

  :root #wie-zijn-wij .wie__tekst > :not([data-wie="telefoon"]){display:none}
  :root [data-wie="telefoon"]{display:block}

}
@media (min-width:621px){

  :root #wie-zijn-wij .wie__tekst > :not([data-wie="computer"]){display:none}
  :root [data-wie="computer"]{display:block}

}


/* ── de opmaak op de telefoon: het affiche ── */
@media (max-width:620px){

  /* ── de witte kaart, de fotootjes en de haarlijnen gaan weg; elk feit is een blok tekst ── */
  :root:not([data-telefoon="uit"]) .wie__kaart{grid-template-columns:minmax(0,1fr)}
  :root:not([data-telefoon="uit"]) .wie__kaart::after{content:none}
  :root:not([data-telefoon="uit"]) .wie__punten{grid-column:1 / -1;grid-row:auto;margin-top:0}
  :root:not([data-telefoon="uit"]) .wie__punten li{display:block;padding:0;border:0}
  :root:not([data-telefoon="uit"]) .wie__duim{display:none}
  :root:not([data-telefoon="uit"]) .wie__tekst{display:block}


  /* ═════════ 2 · het affiche ═════════
     De beloften op zijn foto. Het portret van rand tot rand (4:5, ten hoogste 600px), dat van onderen overgaat in
     het donkergroen; de groet groot op de foto; een goudlijntje, dan drie korte uitspraken in kalkwit met hun zin.
     De onderste lucht van de sectie blijft kalkwit: de naad met Onze diensten verandert niet. */
  :root:not([data-telefoon="uit"]) .wie__kaart{max-width:none;margin-inline:calc(-1 * var(--pad));background:var(--groen-900)}
  :root:not([data-telefoon="uit"]) .wie__beeld{grid-column:1 / -1;aspect-ratio:4 / 5;max-height:600px}
  :root:not([data-telefoon="uit"]) .wie__schaduw{
    padding:9rem var(--pad) var(--r-2);
    background:linear-gradient(to top,var(--groen-900) 0,rgba(37,44,24,.92) 26%,rgba(37,44,24,.55) 60%,rgba(37,44,24,0) 100%);
  }
  :root:not([data-telefoon="uit"]) .wie__hoi-1{font-size:clamp(1.75rem,8vw,2.25rem)}
  :root:not([data-telefoon="uit"]) .wie__hand{font-size:clamp(3.2rem,15vw,4.5rem)}
  :root:not([data-telefoon="uit"]) .wie__punten{padding:var(--r-2) var(--pad) var(--r-5)}
  :root:not([data-telefoon="uit"]) .wie__punten::before{content:"";display:block;width:48px;height:2px;margin-bottom:var(--r-3);background:var(--bak-600)}
  :root:not([data-telefoon="uit"]) .wie__punten li + li{margin-top:var(--r-3)}
  :root:not([data-telefoon="uit"]) .wie__titel{font-size:clamp(1.5rem,7.4vw,2rem);line-height:1.1;color:var(--kalk-000)}
  :root:not([data-telefoon="uit"]) .wie__sub{margin:var(--r-1) 0 0;color:var(--kalk-300)}

}