/* ============ st49 — stap 3 van 5 ("de eigenaar vooraan"). Gezet door ../st49-eigenaar.py.
   De werking komt van Bouwbedrijf SAL (KENNIS, BRUG, SICIL, WIE, PANEEL, VERDER, INDEX; 2026-10-07), via De Zaanse
   Schilder (st20 de eigenaar onder het merk, st21 de dienstenkaart, st39 de eigenaar op de telefoon). De vorm is die
   van deze pagina: kalkwit en gevelgroen, Playfair Display en Inter, Caveat als handschrift (--hand), de afgesneden
   hoek van een vlak (--hoek), de schuine rand van een foto (--snede) en de schuine bovenrand van een label. De
   lettermaten staan in tekstmaat.css. ============ */


/* ═════════ 1 · de eigenaar in het eerste scherm, onder het merk ═════════
   Zijn gezicht in een rondje, Roy in het handschrift, "Maak kennis met de eigenaar →"; één link naar Wie zijn wij?.
   Op de computer links, op de lijn van het merk en de kop; op de telefoon in het midden, zoals het merk. */
.kennis{
  display:flex;align-items:center;gap:.85rem;width:max-content;max-width:100%;
  margin:-.35rem 0 1.4rem;                      /* het merk houdt onder zich al 30px lucht */
  color:var(--lei-900);text-decoration:none;
}
.kennis__duim{
  flex:none;width:clamp(52px,4.4vw,60px);height:clamp(52px,4.4vw,60px);border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--kalk-000),0 0 0 3px var(--kalk-300);   /* een witte rand en de haarlijn van de pagina */
  transition:transform .2s;
}
.kennis__tekst{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.kennis__naam{font-family:var(--hand);font-weight:600;font-size:clamp(1.75rem,2.2vw,2rem);line-height:.9;color:var(--groen-700)}
.kennis__zin{font-weight:500;line-height:1.3;color:var(--lei-900)}
.kennis__heel{white-space:nowrap}             /* breekt het, dan voor "de eigenaar", nooit voor de pijl */
.kennis__pijl{display:inline-block;margin-left:.45rem;vertical-align:.1em;color:var(--groen-600);transition:transform .15s}
.kennis:hover .kennis__zin{text-decoration:underline;text-decoration-color:var(--groen-600);text-underline-offset:4px}
.kennis:hover .kennis__duim{transform:scale(1.05)}
.kennis:hover .kennis__pijl{transform:translateX(3px)}

@media (max-width:620px){
  /* de fold is hier één kolom op volgorde: de foto, het merk (1), de kop (2) ... Het rondje komt na het merk. */
  .kennis{order:1;align-self:center;margin:0 0 var(--r-1)}
  .kennis__duim{width:48px;height:48px}
  .kennis__naam{font-size:1.75rem}
}


/* ═════════ 2 · Wie zijn wij? ═════════
   SAL's WIE en PANEEL: een kop, dan één kaart; links zijn portret tot de rand van de kaart, met de groet op een
   schaduw van onderen (SICIL), rechts de drie feiten, elk een derde van de hoogte, elk met een kleine foto. */
.wie{background:var(--kalk-100);padding:clamp(3.4rem,6vw,5.4rem) 0 clamp(2.2rem,4vw,3.2rem)}
.wie__kop{margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.wie__kaart{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  background:var(--kalk-000);border:1px solid var(--kalk-300);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--hoek)),calc(100% - var(--hoek)) 100%,0 100%);
}
/* het portret: de schuine rand van de foto's van deze pagina aan de kant van de feiten */
.wie__beeld{
  position:relative;margin:0;overflow:hidden;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--snede)) 100%,0 100%);
}
.wie__beeld img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.wie__schaduw{
  position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  padding:9rem calc(var(--snede) + 1.4rem) clamp(1.3rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.2rem);
  background:linear-gradient(to top,rgba(37,44,24,.86) 0%,rgba(37,44,24,.58) 42%,rgba(37,44,24,0) 100%);
}
.wie__hoi{margin:0;font-family:var(--hand);font-weight:600;color:var(--kalk-000);line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.wie__hoi-1{display:block;font-size:clamp(1.9rem,3.4vw,2.8rem)}          /* de maat van het handschrift bij De eigenaar */
.wie__hand{
  display:inline-block;margin:.05em 0 0 -.04em;font-size:clamp(4.2rem,7vw,6.4rem);line-height:.85;
  rotate:-5deg;transform-origin:left center;                              /* zijn naam als een handtekening */
}

.wie__punten{display:grid;margin:0;padding:0 clamp(1.4rem,3vw,2.8rem);list-style:none}
.wie__punten li{border-top:1px solid var(--kalk-300)}
.wie__punten li:first-child{border-top:0}
.wie__duim{display:block;overflow:hidden}
.wie__duim img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,calc(100% - 12%) 100%,0 100%)}
.wie__feit{margin:0;font-family:var(--serif);font-weight:500;line-height:1.22;color:var(--lei-900);text-wrap:balance}

/* PANEEL (computer): elke regel een derde van de hoogte van het portret; de foto staat in zijn regel, zodat hij de
   kaart nooit hoger duwt dan het portret */
@media (min-width:861px){
  .wie__kaart{container-type:inline-size}
  .wie__punten{grid-auto-rows:1fr}
  .wie__punten li{
    position:relative;display:flex;align-items:center;
    padding:2cqw 0 2cqw calc(12cqw + clamp(18px,2.2cqw,28px));
  }
  .wie__duim{position:absolute;left:0;top:2cqw;bottom:2cqw;width:12cqw}
}
/* tot 860: één kolom, het portret boven, de feiten eronder, nog steeds één kaart */
@media (max-width:860px){
  .wie__kaart{grid-template-columns:minmax(0,1fr);max-width:34rem}
  .wie__beeld{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--hoek)),0 100%)}
  .wie__schaduw{padding:8rem 1.4rem 1.6rem}
  .wie__punten{padding:.2rem 1.4rem .6rem}
  .wie__punten li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1.1rem;align-items:center;padding:1rem 0}
  .wie__duim{aspect-ratio:4/5}
}
@media (max-width:620px){
  .wie{padding:var(--r-5) 0 var(--r-4)}
  .wie__kop{margin-bottom:var(--r-3)}
  .wie__schaduw{padding:7rem var(--r-3) var(--r-3)}
  .wie__punten{padding:var(--r-1) var(--r-3) var(--r-2)}
  .wie__punten li{grid-template-columns:4.25rem minmax(0,1fr);gap:var(--r-2);padding-block:var(--r-2)}
}


/* ═════════ 3 · Onze diensten, op de naad onder Wie zijn wij? ═════════
   SAL's VERDER (de diensten op een kaart, elk springt naar zijn blok) en INDEX (het label als donkere tab op de
   kaart, "a bit bigger/more prominent"). De tab draagt de schuine bovenrand van de labels van deze pagina (het
   groene label in de fold); de kaart de afgesneden hoek. De naad loopt door het midden van de kaart: boven kalkwit
   (Wie zijn wij?), onder het groen van het lint met de plaatsen dat erna komt. */
.naar{position:relative;background:var(--kalk-100)}
.naar__kop{display:flex;justify-content:center}
.naar__label{
  margin:0;padding:1.05rem calc(2rem - .3em) .75rem 2rem;           /* rechts minder: de laatste letterspatie */
  background:var(--groen-800);color:var(--kalk-100);
  font-size:clamp(15px,1.3vw,17px);font-weight:600;line-height:1.2;letter-spacing:.3em;text-transform:uppercase;
  clip-path:polygon(0 22%,100% 0,100% 100%,0 100%);
}
.naar__naad{background:linear-gradient(to bottom,var(--kalk-100) 50%,var(--groen-700) 50%)}
.naar__kaart{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;
  background:var(--kalk-000);border:1px solid var(--kalk-300);border-top:4px solid var(--groen-800);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2rem),calc(100% - 1.2rem) 100%,0 100%);
}
.naar__kaart li{min-width:0}
.naar__kaart li+li{border-left:1px solid var(--kalk-300)}
.naar__kaart a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;height:100%;
  padding:1.15rem .7rem 1rem;text-align:center;text-decoration:none;
  color:var(--lei-900);font-weight:600;line-height:1.25;hyphens:manual;transition:background-color .15s;
}
.naar__kaart a:hover{background:var(--kalk-100)}
.naar__chev{flex:none;color:var(--groen-600);transition:transform .15s}
.naar__kaart a:hover .naar__chev{transform:translateY(3px)}

/* vijf diensten: tot 1080 drie boven en twee onder, elk de halve breedte (een raster van zes). Vijf naast elkaar
   pas vanaf 1081: smaller brak "Schoorsteenrenovatie" in zijn vak; de twee langste namen staan zo onderaan, breed */
@media (max-width:1080px){
  .naar__kaart{grid-template-columns:repeat(6,minmax(0,1fr))}
  .naar__kaart li{grid-column:span 2}
  .naar__kaart li:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--kalk-300)}
  .naar__kaart li:nth-child(4){border-left:0}
}
/* op de telefoon twee naast elkaar, de vijfde over de hele breedte */
@media (max-width:620px){
  .naar__label{font-size:15px;padding:.95rem calc(1.4rem - .3em) .65rem 1.4rem}
  .naar__kaart{grid-template-columns:repeat(2,minmax(0,1fr))}
  .naar__kaart li:nth-child(n){grid-column:auto;border-left:0;border-top:0}
  .naar__kaart li:nth-child(even){border-left:1px solid var(--kalk-300)}
  .naar__kaart li:nth-child(n+3){border-top:1px solid var(--kalk-300)}
  .naar__kaart li:nth-child(5){grid-column:1/-1}
  .naar__kaart a{padding:.95rem .5rem .85rem}
}
/* tot 440 is een half vak te smal voor "Dakwerkzaamheden" op 16px (159px tekst in 157px op 390): hij brak als
   "Dak-werkzaamheden". Daar wordt de kaart een lijst: elke dienst een eigen regel, de naam links, het pijltje rechts,
   de hele regel is de knop. */
@media (max-width:440px){
  .naar__kaart{grid-template-columns:minmax(0,1fr)}
  .naar__kaart li:nth-child(n){grid-column:auto;border-left:0;border-top:1px solid var(--kalk-300)}
  .naar__kaart li:first-child{border-top:0}
  .naar__kaart a{flex-direction:row;justify-content:space-between;gap:var(--r-2);padding:.8rem var(--r-3);text-align:left}
}