/* ============ st66 — het eerste scherm op de computer en de tablet als affiche: variant 1 uit st65-vouw,
   vastgezet. Gezet door ../st66-affiche-vast.py. Elke .v1 is :root geworden (zelfde gewicht), zie
   clients/_pipeline/VARIANTS.md. Alleen vanaf 621px; tot 620px raakt niets hier de pagina. ============ */


/* ═════════ 1 · het affiche ═════════
   De foto is het scherm: van rand tot rand over de hele fold, de man op de hoogwerker heel in beeld links. Rechts,
   over de gevel, een donkergroene sluier en daarop de woorden in licht, in een kolom op de rechterrand van de pagina:
   het merk bovenaan, de kop en de knoppen in het midden, Roy onderaan. Vanaf 861px, waar de kopbalk bij het landen in
   beeld staat; tussen 861 en 1040 krijgt de fold de hoogte van het scherm onder die balk, zoals vanaf 1041. De regel
   met de diensten, het groene plaatje en de schuine rand gaan eruit. */
@media (min-width:861px){
  :root .fold{
    grid-template-columns:minmax(0,1fr) clamp(424px,40vw,600px) max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
    grid-template-rows:minmax(0,1fr);
    background:var(--groen-900);
  }
  :root .fold .fold__sub,:root .fold .fold__label{display:none}
  :root .fold .fold__photo{grid-area:1 / 1 / 2 / -1;height:auto;margin:0}
  :root .fold .fold__photo img{clip-path:none}
  :root .fold .fold__photo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(270deg,rgba(22,27,14,.9) 0,rgba(22,27,14,.84) 34%,rgba(22,27,14,.5) 50%,rgba(22,27,14,.12) 62%,rgba(22,27,14,0) 70%);
  }
  :root .fold .fold__copy{
    grid-area:1 / 2;position:relative;z-index:1;align-items:stretch;
    padding:clamp(32px,6vh,64px) 0 clamp(28px,5vh,52px);
  }
  :root .fold .fold__stack{display:flex;flex-direction:column;align-items:flex-start;max-width:none;width:100%}
  :root .fold .merkblok--fold{order:1;margin:0;padding:0;font-size:clamp(34px,2.9vw,44px)}
  /* de tekening in één lichte kleur: dezelfde lijnen, wit gevuld */
  :root .fold .merkblok__vogel{filter:brightness(0) invert(1)}
  :root .fold .merkblok__woord,:root .fold .merkblok__plaats{color:var(--kalk-000)}
  :root .fold .merkblok__plaats i{opacity:.75}
  :root .fold .fold__h1{
    order:2;margin:auto 0 0;padding-top:clamp(28px,5vh,48px);
    font-size:clamp(50px,4.8vw,76px);line-height:1.03;color:var(--kalk-000);text-wrap:balance;
    text-shadow:0 1px 18px rgba(0,0,0,.3);
  }
  /* een goudlijntje boven de kop, als bij Gevestigd in 2006 eronder */
  :root .fold .fold__h1::before{content:"";display:block;width:56px;height:2px;margin-bottom:clamp(20px,3vh,28px);background:var(--bak-600)}
  :root .fold .fold__actions{order:3;margin-top:clamp(26px,4vh,40px);gap:16px}
  /* WhatsApp in zijn lichte uitvoering van de pagina (.btn--wa-licht): groen op de groene sluier verdwijnt */
  :root .fold .fold__actions > .btn--wa{background:var(--kalk-000);color:var(--groen-800);border-color:var(--kalk-000)}
  :root .fold .fold__actions > .btn--wa:hover{background:var(--kalk-200);border-color:var(--kalk-200)}
  :root .fold .kennis{order:4;margin:auto 0 0;padding-top:clamp(28px,5vh,48px);gap:16px;color:var(--kalk-000)}
  :root .fold .kennis__duim{width:64px;height:64px;box-shadow:0 0 0 3px var(--kalk-000)}
  :root .fold .kennis__naam{color:var(--bak-600);font-size:2.1rem}
  :root .fold .kennis__zin{color:var(--kalk-100)}
  :root .fold .kennis__pijl{color:var(--bak-600)}
}
@media (min-width:861px) and (max-width:1040px){
  :root .fold{min-height:min(calc(100svh - var(--hdr-h,63px)),900px)}
}

/* ── 1 · het affiche tussen 621 en 860 ──
   Daar staat de kopbalk bij het landen buiten beeld en is het scherm smal: het affiche van de telefoon (affiche.css),
   op de maat van de tablet. De foto van rand tot rand, zo hoog als het scherm min de regel van Roy; een donkergroene
   sluier boven (voor het merk) en onder (voor de kop en de knoppen); Roy eronder op kalkwit, zijn gezicht op de naad.
   .fold__copy en .fold__stack geven hun doos op: de woorden vallen in het raster van de fold. */
@media (min-width:621px) and (max-width:860px){
  :root .fold{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(var(--r-4),1fr) auto auto auto;
  }
  :root .fold .fold__copy,:root .fold .fold__stack{display:contents}
  :root .fold .fold__sub,:root .fold .fold__label{display:none}
  :root .fold .fold__photo{grid-area:1 / 1 / 5 / 2;height:auto;margin:0;min-height:clamp(520px,calc(100svh - 124px),860px)}
  :root .fold .fold__photo img{clip-path:none}
  :root .fold .fold__photo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(0deg,rgba(22,27,14,.92) 0,rgba(22,27,14,.72) 260px,rgba(22,27,14,0) 430px),
      linear-gradient(180deg,rgba(22,27,14,.7) 0,rgba(22,27,14,.32) 150px,rgba(22,27,14,0) 260px);
  }
  :root .fold .merkblok--fold{
    grid-area:1 / 1;justify-self:center;position:relative;z-index:1;
    margin:0;padding:var(--r-4) 0 0;font-size:40px;
  }
  /* de tekening in één lichte kleur: dezelfde lijnen, wit gevuld */
  :root .fold .merkblok__vogel{filter:brightness(0) invert(1)}
  :root .fold .merkblok__woord,:root .fold .merkblok__plaats{color:var(--kalk-000)}
  :root .fold .merkblok__plaats i{opacity:.75}
  :root .fold .fold__h1{
    grid-area:3 / 1;position:relative;z-index:1;margin:0;padding:0 var(--pad);max-width:640px;
    font-size:clamp(40px,6vw,50px);line-height:1.04;color:var(--kalk-000);
    text-shadow:0 1px 18px rgba(0,0,0,.3);text-wrap:balance;
  }
  /* een goudlijntje boven de kop, als bij Gevestigd in 2006 eronder */
  :root .fold .fold__h1::before{content:"";display:block;width:56px;height:2px;margin-bottom:var(--r-2);background:var(--bak-600)}
  :root .fold .fold__actions{grid-area:4 / 1;position:relative;z-index:1;align-self:end;margin:var(--r-3) var(--pad) 56px;gap:16px}
  /* WhatsApp in zijn lichte uitvoering van de pagina (.btn--wa-licht): groen op de groene sluier verdwijnt */
  :root .fold .fold__actions > .btn--wa{background:var(--kalk-000);color:var(--groen-800);border-color:var(--kalk-000)}
  :root .fold .fold__actions > .btn--wa:hover{background:var(--kalk-200);border-color:var(--kalk-200)}
  :root .fold .kennis{
    grid-area:5 / 1;position:relative;z-index:2;align-self:start;
    display:flex;align-items:flex-start;gap:16px;width:auto;max-width:none;
    margin:0;padding:0 var(--pad) var(--r-3);border:0;
  }
  :root .fold .kennis__duim{width:80px;height:80px;margin-top:-40px;box-shadow:0 0 0 3px var(--kalk-100)}
  :root .fold .kennis__tekst{padding-top:12px}
}