/* ===== gedeeld door het blok kleding met logo ===== */
/* ================= gedeeld door het blok "kleding met logo" =================

   De knooppagina /werkkleding-met-logo/ en de acht kledingstukpagina's zijn een familie:
   donkere kop over de volle breedte met de opname rechts en de tekst in de lege linkerhelft,
   en een kruimelbalk in het donker. Dat staat hier een keer; bouw.py laadt dit bestand
   automatisch bij elke pagina met een .lghero. De branchepagina's hebben hun eigen familie
   (_branche.css) en zien er bewust anders uit. */

.kruimel{font-family:Archivo,sans-serif;font-size:var(--t1);color:var(--op-3);
  margin-bottom:var(--r3)}
.kruimel a{color:var(--op-2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.kruimel a:hover{color:#fff;border-color:#fff}
.kruimel span{margin:0 .5em;color:var(--op-4)}

/* ---------------- de donkere kop ----------------
   De opname is 2100x900 en heeft een bewust lege, donkere linkerhelft. Toch ligt er een
   verloop overheen: de opname is gegenereerd en een volgende versie kan lichter uitvallen,
   en dan moet de kop nog steeds leesbaar zijn. Het verloop loopt van dekkend naar niets,
   dus rechts blijft het beeld onaangeroerd. */
.lghero{position:relative;isolation:isolate;display:flex;align-items:center;
  background:var(--dark-3);color:var(--op-1);width:100%;aspect-ratio:2100/900;
  border-bottom:14px solid var(--dark)}
/* Geen overflow:hidden op de kop. Met overflow:hidden telt de inhoud niet mee voor de
   minimumhoogte, en dan knipt een kop van 21:9 op een laptop van 1024 px de offerteknop
   van de tekst af (gezien op de overhemdpagina, 4zv). Zonder overflow groeit de kop mee
   met de tekst; de opname zit er absoluut in en steekt nergens uit. */
.lgbeeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 50%;z-index:-2}
/* Het verloop is dekkend tot voorbij de tekstkolom (46vw), pas daarna loopt het af.
   Zo staat de tekst altijd op donker, welke breedte het scherm ook heeft, en blijft
   het rechterderde van de opname vrij. */
.lghero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(97deg,rgba(8,3,25,.96) 0%,rgba(8,3,25,.93) 44%,
    rgba(8,3,25,.55) 58%,rgba(8,3,25,.12) 72%,rgba(8,3,25,0) 84%)}
.lghero .wrap{width:100%;position:relative;padding-top:clamp(36px,4.2vw,72px);
  padding-bottom:clamp(36px,4.2vw,72px)}
.lgtekst{max-width:min(42rem,46vw)}
.lghero h1{color:#fff;font-size:var(--t6);line-height:1.04;margin-top:clamp(14px,1.2vw,22px);
  font-variation-settings:"wdth" 90,"wght" 780;letter-spacing:-.035em}
.lghero .sub{margin-top:clamp(14px,1.2vw,22px);color:var(--op-2);max-width:36ch;
  font-size:clamp(14px,1.34vw,22px);line-height:1.52}
.lghero .acties{margin-top:clamp(16px,2vw,32px)}
.lghero .knop{background:#fff;color:var(--dark);border-color:#fff;
  font-size:var(--t1);padding:clamp(9px,1vw,16px) clamp(14px,1.7vw,30px)}
.lghero .knop:hover{background:var(--band-ink);border-color:var(--band-ink);color:var(--dark)}

/* Gestapeld blijft het donker: het beeld erboven, de tekst eronder op paars. Bij de
   branchepagina's valt de tekst hier terug op papier, maar dan zou deze pagina op een
   telefoon juist wel weer op de andere acht lijken. */
@media (max-width:940px){
  .lghero{aspect-ratio:auto;display:block;background:var(--dark-3);border-bottom:none}
  .lgbeeld{position:relative;inset:auto;z-index:0;height:auto;aspect-ratio:16/10;
    object-position:62% 50%;border-bottom:10px solid var(--dark)}
  .lghero::before{display:none}
  .lghero .wrap{padding-top:38px;padding-bottom:34px}
  .lgtekst{max-width:none}
  .lghero h1{margin-top:18px;font-size:clamp(32px,7vw,44px)}
  .lghero .sub{font-size:var(--t2);max-width:46ch}
}


/* ---------------- plaatsing (gedeeld) ----------------
   De genummerde plekkenlijst en de stippen: op de knoop over een lijntekening, op een
   kledingstukpagina over een echte productfoto. Zelfde stip, zelfde lijst. */
.plaatsing{display:grid;gap:clamp(28px,3vw,56px);margin-top:clamp(30px,3.2vw,52px);
  align-items:center}
@media (min-width:941px){.plaatsing{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}}
/* Twee losse tekeningen naast elkaar - voor- en achterkant van hetzelfde poloshirt -
   elk met een eigen viewBox die strak om het kledingstuk staat. Daardoor vult elke
   tekening zijn eigen kolom en schaalt alles (lijnen, stippen en cijfers) in exact
   dezelfde verhouding mee, van een breed scherm tot een telefoon.

   Waarom niet alles in een brede tekening: die kreeg op een telefoon van 375 px nog maar
   323 px, oftewel schaal 0,58, en dan zijn de cijfers in de stippen zeven pixels hoog.

   De maximumbreedte is er omdat de tekening anders op een tablet de halve pagina vult:
   onder 941 px staat hij niet meer naast de lijst maar erboven, en krijgt hij ineens de
   volle kolombreedte. */
.ptekset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.6vw,24px);align-items:end;max-width:520px}
@media (max-width:940px){.ptekset{margin-left:auto;margin-right:auto}}
.ptek{width:100%;height:auto;display:block}
/* De maten in de tekening staan in eigen eenheden, niet in pixels van het scherm, dus
   ze volgen de viewBox en hoeven nergens bijgesteld te worden. */
.ptek .plijn{stroke:var(--ink-3)}
.ptek .pnaam text{fill:var(--ink-3);font-family:Archivo,sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;
  font-variation-settings:"wdth" 82,"wght" 620}

.plijst{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;
  gap:clamp(14px,1.5vw,22px)}
.plijst li{counter-increment:p;position:relative;padding-left:40px;color:var(--ink-2);
  font-size:var(--t2);line-height:1.55}
.plijst li::before{content:counter(p);position:absolute;left:0;top:.1em;
  width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:Archivo,sans-serif;font-size:var(--t0);font-variation-settings:"wght" 700;
  display:grid;place-items:center}
.plijst b{display:block;color:var(--ink);font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wght" 680;letter-spacing:-.014em;margin-bottom:2px}


/* ---------------- de stip ----------------
   Een genummerde stip staat NIET in de SVG of in de foto, maar als HTML-element eroverheen.
   Reden: in de SVG schaalt de stip met de tekening mee, en dan is hij op een telefoon
   6 px en op een breed scherm 36 px. Nu:
     - de positie staat in procenten van het beeld (left/top), dus hij blijft op elke
       breedte exact op dezelfde plek van het shirt of de tekening;
     - de maat staat in pixels met een onder- en bovengrens (--stip), dus hij is op een
       telefoon 24 px en op een breed scherm 32 px, en het cijfer de helft daarvan.
   Het omhulsel (.plekvak) moet position:relative hebben en precies zo groot zijn als het
   beeld; daarom staan foto en SVG op display:block zonder marge. */
.plekvak{position:relative}
.plekvak .stip{--stip:clamp(24px,1.7vw,32px);position:absolute;
  width:var(--stip);height:var(--stip);border-radius:50%;
  transform:translate(-50%,-50%);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:Archivo,sans-serif;
  font-size:calc(var(--stip) * .5);line-height:1;font-variation-settings:"wght" 700;
  box-shadow:0 0 0 2px rgba(255,255,255,.55);pointer-events:none;user-select:none}

/* ================= de kledingstukpagina's =================
   Het sjabloon van 4zr/4zs, gedeeld door alle acht: de stelling (grote uitspraak links,
   reden rechts), de plekfoto's met stippen, de variantenrij en de vragen. Een pagina
   voegt hieraan niets toe; wat per pagina verschilt is de inhoud, niet de vorm. */

/* ---------------- de stelling ----------------
   Geen drieluik en geen tabel (die staan op de knoop), maar een grote uitspraak links
   en de reden rechts. Op een breed scherm twee kolommen, gescheiden door een haarlijn;
   gestapeld staat de uitspraak boven de tekst. */
.stelling{display:grid;gap:clamp(24px,3vw,56px);align-items:start}
@media (min-width:941px){
  .stelling{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  .stelling .reden{border-left:1px solid var(--rule-2);padding-left:clamp(24px,3vw,56px)}
}
.stelling .groot{font-family:Archivo,sans-serif;font-size:var(--t5);line-height:1.08;
  letter-spacing:-.028em;font-variation-settings:"wdth" 92,"wght" 740;color:var(--ink);
  text-wrap:balance;max-width:16ch}
.stelling .reden p{color:var(--ink-2);font-size:var(--t2);line-height:1.66;max-width:58ch}
.stelling .reden p + p{margin-top:1em}
.stelling .reden b{color:var(--ink);font-variation-settings:"wght" 640}
.stelling .terug{font-family:Archivo,sans-serif;font-size:var(--t1);color:var(--ink-3);
  font-variation-settings:"wght" 520}
.stelling .terug a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------------- de foto's met stippen ----------------
   Elke foto is exact 3:4 (900x1200); de stippen staan als .stip (zie _logo.css) op een
   procentpositie in een .plekvak dat precies zo groot is als de foto. De foto is wit; in
   de donkere weergave iets gedempt, anders staat er een fel wit vlak op een donkere pagina. */
.plekfotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.6vw,24px);align-items:start;max-width:620px}
@media (max-width:940px){.plekfotos{margin-left:auto;margin-right:auto}}
/* Drie foto's (de pet: voor, zij, achter) naast elkaar in plaats van twee en een halve rij. */
.plekfotos.drie{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.plekfoto{margin:0;position:relative}
.plekfoto img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:#fff;border:1px solid var(--rule)}
.plekfoto figcaption{margin-top:var(--r2);font-family:Archivo,sans-serif;font-size:var(--t0);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center;
  font-variation-settings:"wdth" 82,"wght" 620}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plekfoto img{opacity:.92}}
:root[data-theme="dark"] .plekfoto img{opacity:.92}

/* ---------------- de variantenrij ----------------
   Zes productfoto's op wit uit dezelfde snede, dus ze staan vanzelf op een lijn. Zes
   kolommen vanaf 1101, drie op een laptop en tablet, en op een telefoon een schuifrij
   zoals het rek op de branchepagina's. */
.varianten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);margin-top:clamp(30px,3.2vw,52px)}
@media (max-width:1100px){.varianten{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.varianten figure{margin:0}
.varianten img{width:100%;aspect-ratio:760/1000;object-fit:cover;display:block;
  background:#fff;border:1px solid var(--rule);
  transition:transform .5s cubic-bezier(.16,.7,.28,1)}
.varianten figure:hover img{transform:translateY(-3px)}
.varianten figcaption{margin-top:var(--r2)}
.varianten figcaption b{display:block;font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wght" 680;letter-spacing:-.014em;color:var(--ink);line-height:1.2}
.varianten figcaption span{display:block;margin-top:3px;color:var(--ink-3);font-size:var(--t1);
  line-height:1.45}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .varianten img{opacity:.92}}
:root[data-theme="dark"] .varianten img{opacity:.92}
.varhint{display:none}
@media (max-width:560px){
  .varianten{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    gap:12px;padding-bottom:6px;scrollbar-width:none}
  .varianten::-webkit-scrollbar{display:none}
  .varianten figure{scroll-snap-align:start}
  .varhint{display:flex;align-items:center;gap:9px;margin-top:var(--r3);
    font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 560;
    color:var(--ink-3)}
  .varhint::after{content:"";flex:1;height:1px;background:var(--rule-2)}
}

/* ---------------- de vragen ----------------
   .vragen en .vraag komen uit stijl_basis.css; alleen de achtergrond van het blok, want
   het id #vragen (met de achtergrondregel) mag op een kledingstukpagina niet gebruikt
   worden: bouw.py zou dan het algemene vragenschema van de homepage meesturen. */
.stukvragen{background:var(--paper)}
.offerte .inleiding a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}

/* ================= tweede ronde kledingstukpagina's (4zy) =================
   De user: "alle met-logo-pagina's zijn exact hetzelfde qua layout". Daarom twee kopvormen
   en per pagina een andere volgorde van blokken. Alles hieronder is gedeeld; welke blokken
   een pagina gebruikt staat in _maak_stukpaginas.py. */

/* ---- de lichte kop: tekst links op papier, staande foto rechts (4:5). Voor de pagina's
   waar de foto geen macro is maar een tafereel: de flat-lay, de knielende vakman, de rug
   bij de laaddeur. Onder 941 staat de foto boven de tekst, zoals bij de donkere kop. */
.lghero.licht{background:var(--paper);color:var(--ink);aspect-ratio:auto;display:block;
  border-bottom:1px solid var(--rule)}
.lghero.licht::before{display:none}
.lghero.licht .wrap{padding-top:0;padding-bottom:0}
.lghero.licht .lgtekst{max-width:none}
.lghero.licht h1{font-size:clamp(2.5rem,3.9vw,3.9rem)}
.lghero.licht .sub{max-width:44ch;font-size:var(--t2)}
.lghero.licht .lgsplit{display:grid;gap:clamp(24px,3vw,56px);align-items:center;
  padding-top:clamp(28px,3.2vw,56px);padding-bottom:clamp(28px,3.2vw,56px)}
@media (min-width:941px){.lghero.licht .lgsplit{grid-template-columns:minmax(0,50fr) minmax(0,50fr)}}
.lghero.licht .lgfoto{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:2px;background:var(--surface-2)}
.lghero.licht .kruimel{color:var(--ink-3)}
.lghero.licht .kruimel a{color:var(--ink-2);border-color:var(--rule-2)}
.lghero.licht .kruimel a:hover{color:var(--ink);border-color:var(--ink)}
.lghero.licht .kruimel span{color:var(--rule-2)}
.lghero.licht h1{color:var(--ink)}
.lghero.licht .sub{color:var(--ink-2)}
.lghero.licht .knop{background:var(--dark);color:#fff;border-color:var(--dark)}
.lghero.licht .knop:hover{background:var(--dark-2);border-color:var(--dark-2);color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lghero.licht .knop{background:var(--accent);border-color:var(--accent);color:var(--paper)}}
:root[data-theme="dark"] .lghero.licht .knop{background:var(--accent);border-color:var(--accent);color:var(--paper)}
@media (max-width:940px){
  .lghero.licht{background:var(--paper)}
  .lghero.licht .lgfoto{order:-1;aspect-ratio:4/3;border-radius:0;
    width:calc(100% + 2 * var(--kant));margin-left:calc(-1 * var(--kant));max-width:none}
  .lghero.licht .lgsplit{padding-top:0}
  .lghero.licht h1{font-size:clamp(30px,6.4vw,40px)}
}

/* ---- voorbeelden: het logo echt op het kledingstuk (de echte productfoto met de echte
   logo-PNG als referentie). Twee of drie naast elkaar, staand 3:4, op wit met een haarlijn,
   net als de variantenrij. */
.voorbeelden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);margin-top:clamp(30px,3.2vw,52px)}
.voorbeelden.twee{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.voorbeelden figure{margin:0}
.voorbeelden img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:#fff;border:1px solid var(--rule)}
.voorbeelden figcaption{margin-top:var(--r2)}
.voorbeelden figcaption b{display:block;font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wght" 680;letter-spacing:-.014em;color:var(--ink);line-height:1.2}
.voorbeelden figcaption span{display:block;margin-top:3px;color:var(--ink-3);font-size:var(--t1);line-height:1.45}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .voorbeelden img{opacity:.92}}
:root[data-theme="dark"] .voorbeelden img{opacity:.92}
@media (max-width:560px){
  .voorbeelden,.voorbeelden.twee{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .voorbeelden figcaption b{font-size:var(--t1)}
  .voorbeelden figcaption span{font-size:var(--t0);letter-spacing:0;text-transform:none}
}

/* ---- de plekkenlijst kan nu zes of zeven plekken hebben: vanaf 941 in twee kolommen
   naast de foto's, zodat de sectie niet de hoogte in schiet. */
@media (min-width:941px){
  .plaatsing.ruim{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
  .plaatsing.ruim .plijst{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2vw,32px)}
}
.plijst .kiest{grid-column:1/-1;margin-top:var(--r2);padding-left:0;color:var(--ink-3);
  font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 520}
.plijst .kiest::before{display:none}

/* ---- de paarse band hergebruikt als stukband (aantallen, seizoenen, de norm) */
.stukband .groot{max-width:12ch}
.stukband .bij a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}


/* ===== alleen poloshirt-met-logo ===== */
/* ================= poloshirt met logo =================
   Alle opmaak van deze pagina is gedeeld met de andere kledingstukpagina's en staat in
   _logo.css (kop, kruimel, plaatsing, stelling, plekfoto's, varianten, vragen). Dit
   bestand is bewust leeg: een verschil hoort een besluit te zijn, geen ongelukje. */