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

@media (max-width:620px){

  /* ── de regel met de diensten gaat uit het eerste scherm ── */
  :root:not([data-telefoon="uit"]) .fold .fold__sub{display:none}


  /* ═════════ 1 · het affiche ═════════
     De foto is het scherm: van rand tot rand, zo hoog als het eerste scherm min de regel van Roy. Een donkergroene
     sluier boven (voor het merk) en onder (voor de kop en de knoppen). De fold wordt een raster van één kolom: het merk,
     lucht, de kop, de knoppen — alle vier op de foto — en Roy eronder, met zijn gezicht op de naad. */
  :root:not([data-telefoon="uit"]) .fold{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(var(--r-4),1fr) auto auto auto;
    padding:0;
  }
  :root:not([data-telefoon="uit"]) .fold .fold__photo{
    grid-area:1 / 1 / 5 / 2;height:auto;margin:0;
    min-height:clamp(430px,calc(100svh - 108px),820px);
  }
  :root:not([data-telefoon="uit"]) .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) 240px,rgba(22,27,14,0) 400px),
      linear-gradient(180deg,rgba(22,27,14,.70) 0,rgba(22,27,14,.32) 130px,rgba(22,27,14,0) 230px);
  }
  :root:not([data-telefoon="uit"]) .fold .merkblok--fold{
    grid-area:1 / 1;justify-self:center;position:relative;z-index:1;
    margin:0;padding:calc(var(--r-3) + env(safe-area-inset-top,0px)) 0 0;font-size:clamp(30px,5.2svh,36px);
  }
  /* de tekening in één lichte kleur: dezelfde lijnen, wit gevuld */
  :root:not([data-telefoon="uit"]) .fold .merkblok__vogel{filter:brightness(0) invert(1)}
  :root:not([data-telefoon="uit"]) .fold .merkblok__woord,:root:not([data-telefoon="uit"]) .fold .merkblok__plaats{color:var(--kalk-000)}
  :root:not([data-telefoon="uit"]) .fold .merkblok__plaats i{opacity:.75}
  :root:not([data-telefoon="uit"]) .fold .fold__h1{
    grid-area:3 / 1;position:relative;z-index:1;margin:0;padding:0 var(--pad);max-width:480px;
    font-size:clamp(31px,9.4vw,42px);line-height:1.04;color:var(--kalk-000);
    text-shadow:0 1px 16px rgba(0,0,0,.35);text-wrap:balance;
  }
  /* een goudlijntje boven de kop, als bij Gevestigd in 2006 eronder */
  :root:not([data-telefoon="uit"]) .fold .fold__h1::before{content:"";display:block;width:48px;height:2px;margin-bottom:var(--r-2);background:var(--bak-600)}
  :root:not([data-telefoon="uit"]) .fold .fold__actions{
    grid-area:4 / 1;position:relative;z-index:1;align-self:end;justify-self:stretch;
    margin:var(--r-3) var(--pad) 56px;padding:0;max-width:440px;
  }
  :root:not([data-telefoon="uit"]) .fold .fold__actions > .btn{flex:1 1 auto}
  /* WhatsApp in zijn lichte uitvoering van de pagina (.btn--wa-licht): groen op de groene sluier verdwijnt */
  :root:not([data-telefoon="uit"]) .fold .fold__actions > .btn--wa{background:var(--kalk-000);color:var(--groen-800);border-color:var(--kalk-000)}
  :root:not([data-telefoon="uit"]) .fold .fold__actions > .btn--wa:hover{background:var(--kalk-200);border-color:var(--kalk-200)}
  :root:not([data-telefoon="uit"]) .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:not([data-telefoon="uit"]) .fold .kennis__duim{width:76px;height:76px;margin-top:-38px;box-shadow:0 0 0 3px var(--kalk-100)}
  :root:not([data-telefoon="uit"]) .fold .kennis__tekst{padding-top:10px}
}