/* ============ st50 — Wie zijn wij? (w3) en de kaart Onze diensten (d1), vastgezet uit st49-wie. Gezet door
   ../st50-vastzetten.py. Elke stand-klasse is :root geworden (zelfde gewicht), zie clients/_pipeline/VARIANTS.md.
   In geen van beide een schuine lijn. ============ */

/* ═════════ Wie zijn wij? — het feit is de kop (h3), de zin staat eronder ═════════ */
:root .wie__tekst{display:block;min-width:0}
:root .wie__titel{
  margin:0;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;line-height:1.18;
  color:var(--lei-900);text-wrap:balance;
}
:root .wie__sub{margin:.5rem 0 0;font-size:var(--t-tekst);line-height:1.5;color:var(--lei-600);text-wrap:pretty}
/* recht: geen schuine fotorand, geen afgesneden hoek, "Roy." niet meer scheef */
:root .wie__kaart,
:root .wie__beeld,
:root .wie__duim img{clip-path:none}
:root .wie__hand{rotate:none}


/* ═════════ w3 · het briefje op de foto ═════════
   Zijn keuze ("3 and 1"), met zijn correctie: "Hoi! Ik ben Roy." staat op zijn foto, op de schaduw van onderen, zoals
   in st49, en niet boven de feiten. Een groot portret; over de rand ervan een witte kaart met een groene bovenrand (zoals
   de kaarten van de pagina) met de drie feiten. Het overlappen is wat de pagina al doet bij Gevelrenovatie en Onze
   specialiteit, nu recht. De kaart zelf (grond, groene rand, schaduw) is een vlak achter de feiten (::after).
   Computer: de foto 4:5, de kaart over haar rechterrand, in het midden van haar hoogte; de groet linksonder, naast de
   kaart. Telefoon: de foto bijna vierkant (10:11, van boven af: zijn gezicht blijft heel), de groet op één regel onder
   zijn kin, en de kaart een kleine 1,25rem over de onderrand van de foto, onder de groet. */
:root .wie__kaart{display:grid;background:none;border:0}
:root .wie__kaart::after{
  content:"";position:relative;z-index:0;background:var(--kalk-000);border-top:4px solid var(--groen-700);
  box-shadow:0 0 0 1px var(--kalk-300),0 30px 60px -30px rgba(23,29,38,.45);
}
:root .wie__beeld img{position:absolute;inset:0;aspect-ratio:auto}
:root .wie__punten{position:relative;z-index:1}
:root .wie__duim{aspect-ratio:1}
@media (min-width:861px){
  :root .wie__kaart{
    grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);
    grid-template-rows:minmax(clamp(2rem,4vw,3.5rem),1fr) auto minmax(clamp(2rem,4vw,3.5rem),1fr);
  }
  :root .wie__beeld{grid-column:1/3;grid-row:1/4;aspect-ratio:4/5;align-self:stretch}
  :root .wie__kaart::after{grid-column:2/4;grid-row:2}
  :root .wie__punten{
    grid-column:2/4;grid-row:2;grid-auto-rows:auto;
    padding:calc(4px + clamp(.4rem,.9vw,.8rem)) clamp(1.8rem,3.4vw,3rem) clamp(.4rem,.9vw,.8rem);
  }
  :root .wie__punten li{
    display:grid;grid-template-columns:clamp(4.5rem,7.5cqw,6.25rem) minmax(0,1fr);column-gap:clamp(1rem,2.2cqw,1.7rem);
    align-items:start;padding:clamp(1rem,1.8cqw,1.5rem) 0;
  }
  :root .wie__duim{position:static;width:auto}
}
@media (max-width:860px){
  :root .wie__kaart{--over:1.25rem;grid-template-columns:var(--r-1) minmax(0,1fr) var(--r-1)}
  :root .wie__beeld{grid-column:1/-1;grid-row:1;aspect-ratio:10/11}
  :root .wie__schaduw{padding:5.5rem var(--r-3) calc(var(--over) + var(--r-2))}
  :root .wie__hoi-1{display:inline;font-size:clamp(1.55rem,7vw,1.9rem)}
  :root .wie__hand{margin:0 0 0 .08em;font-size:clamp(2.6rem,12vw,3.4rem)}
  :root .wie__kaart::after,:root .wie__punten{grid-column:2;grid-row:2;margin-top:calc(-1 * var(--over))}
  :root .wie__punten{padding:4px var(--r-2) 0}
  :root .wie__punten li{grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--r-2);align-items:start;padding-block:var(--r-2)}
}
/* telefoon: het fotootje naast de kop, de zin eronder over de hele breedte van de kaart (op 320 kreeg hij naast het
   fotootje maar 160px en liep hij over vier regels) */
@media (max-width:620px){
  :root .wie__punten li{grid-template-areas:"duim titel" "zin zin";row-gap:var(--r-1);align-items:center}
  :root .wie__tekst{display:contents}
  :root .wie__duim{grid-area:duim}
  :root .wie__titel{grid-area:titel}
  :root .wie__sub{grid-area:zin;margin:0}
}


/* ═════════ d1 · de tab, recht ═════════
   Zijn keuze op SAL: de donkere tab op de kaart. Nu een rechthoek, de kaart zonder afgesneden hoek en met een schaduw
   die haar van de naad optilt; het pijltje in een rondje dat groen wordt onder de muis. */
:root .naar__label{clip-path:none;padding:.95rem calc(2rem - .3em) .9rem 2rem}
:root .naar__kaart{clip-path:none;box-shadow:0 26px 44px -30px rgba(23,29,38,.6)}
:root .naar__chev{
  box-sizing:content-box;width:10px;height:10px;padding:6px;border:1px solid var(--kalk-300);border-radius:50%;
  background:var(--kalk-000);transition:background-color .15s,border-color .15s,color .15s,transform .15s;
}
:root .naar__kaart a:hover .naar__chev,:root .naar__kaart a:focus-visible .naar__chev{background:var(--groen-700);border-color:var(--groen-700);color:var(--kalk-000)}
@media (max-width:620px){
  :root .naar__label{padding:.85rem calc(1.4rem - .3em) .8rem 1.4rem}
}
/* de telefoon, waar de kaart een lijst is: de regels iets lager (elk blijft een tikvlak van ruim 44px) */
@media (max-width:440px){
  :root .naar__kaart a{padding-block:.7rem}
}