/* ===== gedeeld door alle branchepaginas ===== */
/* ================= gedeelde opmaak van elke branchepagina =================

   Acht branchepagina's delen dezelfde opbouw (het sjabloon uit 4z). Die opbouw staat
   hier één keer. Wat per pagina verschilt zijn zeven waarden, en die staan als variabele
   bovenaan; een pagina zet alleen die waarden om, niet de regels eromheen.

   Waarom variabelen en niet per pagina een eigen kopie: bij drie pagina's stond dezelfde
   CSS drie keer, en dan gaan ze na een paar aanpassingen uit elkaar lopen. Een verschil
   hoort een besluit te zijn, geen ongelukje.

   bouw.py laadt dit bestand automatisch bij elke pagina die een .kkhero bevat. */

:root{
  --hero-verh: 5/4;        /* liggend beeld naast de tekst */
  --hero-pos: 50% 42%;     /* welk deel van de opname in beeld blijft */
  --hero-tekst: 46fr;      /* breedteverdeling vanaf 941px */
  --hero-beeld: 54fr;
  --rek-grond: #e7e3d6;    /* de kleur achter de opnamen in het rek */
  --rek-hoog: clamp(300px, 30vw, 520px);
  --rek-pos: 50% 22%;
}

/* ---------- 1. de kop ---------- */
.kkhero{background:var(--surface);padding:clamp(28px,3.4vw,54px) 0 clamp(34px,4vw,64px)}
.kkhero .wrap{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,52px);align-items:center}
.kkbeeld{margin:0;overflow:hidden;background:var(--surface-2);border-radius:2px}
.kkbeeld img{width:100%;aspect-ratio:var(--hero-verh);object-fit:cover;
  object-position:var(--hero-pos)}
@media (min-width:941px){
  .kkhero .wrap{grid-template-columns:minmax(0,var(--hero-tekst)) minmax(0,var(--hero-beeld));
    gap:clamp(36px,4.4vw,78px)}
}

.kruimel{font-family:Archivo,sans-serif;font-size:var(--t1);color:var(--ink-2);
  margin-bottom:var(--r3)}
.kruimel a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.kruimel a:hover{color:var(--accent);border-color:var(--accent)}
.kruimel span{margin:0 .5em;color:var(--rule-2)}
.kkhero h1{font-size:var(--t5);font-variation-settings:"wdth" 92,"wght" 780;
  letter-spacing:-.032em;line-height:1.02}
.kkhero .sub{margin-top:var(--r3);color:var(--ink-2);font-size:var(--t3);line-height:1.6;
  max-width:44ch}
.kkhero .acties{margin-top:clamp(20px,2.4vw,34px)}

/* De feitenbalk is een <section> zodat hij het stiksel als scheiding krijgt; de
   sectieruimte moet er dan wel weer af. */
.kkfeiten{padding:0}

/* ---------- 2. waarom deze kleding anders is ----------
   Lopende tekst is taai als er niets naast staat. Een staand beeld ernaast breekt het. */
.waarom{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,48px)}
.waaromtekst p{color:var(--ink-2);max-width:58ch}
.waaromtekst p + p{margin-top:var(--r3)}
.waaromtekst .kop{margin-bottom:clamp(20px,2.2vw,32px)}
.waarombeeld{margin:0;overflow:hidden;border-radius:2px;background:var(--surface-2)}
.waarombeeld img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
@media (min-width:941px){
  .waarom{grid-template-columns:minmax(0,1fr) minmax(0,34%);gap:clamp(40px,5vw,84px);
    align-items:start}
}

/* ---------- 3. het rek ----------
   Het eigen moment van een branchepagina. Wat erin staat verschilt per branche: bij
   representatieve kleding hele figuren op een doek, bij werkkleding de kledingstukken
   zelf op een warme grond. Zie 09_kantoorbeeld.py, 10_horecabeeld.py, 13_werkbeeld.py. */
.rek{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  margin-top:clamp(30px,3.4vw,56px);background:var(--rule)}
/* Flex met een groeiend onderschrift, anders lopen de vijf vakken tot verschillende
   hoogtes door: de bijschriften zijn niet even lang. */
.rek figure{margin:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--rek-grond)}
.rek img{width:100%;height:var(--rek-hoog);object-fit:cover;object-position:var(--rek-pos);
  display:block;transition:transform .6s cubic-bezier(.16,.7,.28,1)}
.rek figure:hover img{transform:scale(1.03)}
.rek figcaption{flex:1;background:var(--surface);
  padding:clamp(14px,1.4vw,20px) clamp(14px,1.4vw,18px) clamp(16px,1.6vw,24px)}
.rek figcaption b{display:block;font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wdth" 98,"wght" 700;letter-spacing:-.014em;color:var(--ink)}
.rek figcaption span{display:block;margin-top:5px;color:var(--ink-2);font-size:var(--t1);
  line-height:1.45}

.rekhint{display:none}
.rekbij{margin-top:clamp(20px,2.2vw,32px);color:var(--ink-2);max-width:62ch}
.rekbij a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}

/* Onder de vijf kolommen wordt het een schuifrek. Bij drie kolommen blijft er een gat
   achter bij de laatste twee, en vijf onder elkaar is drie schermen scrollen. */
@media (max-width:940px){
  .rek{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:38%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:2px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 46px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 46px),transparent 100%)}
  .rek.eind{-webkit-mask-image:none;mask-image:none}
  .rek::-webkit-scrollbar{display:none}
  .rek figure{scroll-snap-align:start}
  .rek img{height:clamp(280px,40vw,380px)}
  .rekhint{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)}
  .rekhint::after{content:"";flex:1;height:1px;background:var(--rule-2)}
}
@media (max-width:560px){
  .rek{grid-auto-columns:66%}
  .rek img{height:clamp(280px,74vw,340px)}
}

/* ---------- 4. waar u op moet letten ----------
   Genummerd, want het is een volgorde van vragen die in het gesprek langskomt. Geen
   kaarten: een lijst met een groot cijfer ernaast is hier de eerlijkere vorm. */
.letop{list-style:none;margin:clamp(28px,3vw,48px) 0 0;padding:0;counter-reset:l;
  display:grid;gap:0;border-top:1px solid var(--rule-2)}
/* minmax(0,1fr) en niet 1fr: anders mag de kolom niet smaller worden dan het langste
   woord erin en steekt de lijst op 320 px buiten beeld. */
.letop li{counter-increment:l;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2vw,38px);padding:clamp(20px,2.2vw,32px) 0;
  border-bottom:1px solid var(--rule)}
.letop li::before{content:counter(l,decimal-leading-zero);
  font-family:Archivo,sans-serif;font-size:var(--t4);
  font-variation-settings:"wdth" 88,"wght" 760;color:var(--rule-2);
  letter-spacing:-.03em;line-height:1}
.letop h3{font-size:var(--t3);font-variation-settings:"wght" 700;letter-spacing:-.018em}
.letop p{margin-top:var(--r2);color:var(--ink-2);max-width:66ch}
/* Drie dingen per regel: cijfer, kop en uitleg. In twee kolommen moeten kop en uitleg
   allebei in kolom twee, anders valt de uitleg naar een volgende rij en klappen de
   kolommen dicht. */
.letop h3,.letop p{grid-column:2}
@media (min-width:1101px){
  .letop li{grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);align-items:baseline}
  .letop h3{grid-column:2}
  .letop p{grid-column:3;margin-top:0}
}

/* ---------- 5. de merken die hier gelden ----------
   Niet de hele logostrook van de homepage, maar de merken die hier gelden, met erbij
   waarvoor ze zijn. Een merk hoort bij een soort kleding, niet bij een branche. */
.merkkaarten{display:grid;grid-template-columns:1fr;gap:2px;
  margin-top:clamp(28px,3vw,48px);background:var(--rule)}
@media (min-width:761px){.merkkaarten{grid-template-columns:repeat(3,1fr)}}
.merkkaarten article{background:var(--surface);padding:clamp(24px,2.6vw,38px)}
.mlogo{height:clamp(38px,3.4vw,52px);display:flex;align-items:center}
.mlogo img{max-height:100%;width:auto;opacity:.8;filter:saturate(0)}
.merkkaarten h3{margin-top:clamp(18px,1.9vw,26px);font-size:var(--t3);
  font-variation-settings:"wght" 720;letter-spacing:-.018em}
.merkkaarten p{margin-top:var(--r2);color:var(--ink-2);font-size:var(--t2);line-height:1.62}
.merkbij{margin-top:clamp(22px,2.4vw,34px);color:var(--ink-3);font-size:var(--t2);
  max-width:70ch}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mlogo img{filter:saturate(0) invert(1)}}
:root[data-theme="dark"] .mlogo img{filter:saturate(0) invert(1)}

/* ---------- 6. de smalle band onder de merken ----------
   Waar een passende recensie is staat die hier. Waar er geen is - en dat is bij zes van
   de acht branches het geval - staat wat wel klopt: het aantal klanten en de werkwijze.
   Niets verzinnen om het vak te vullen (R7). */
.citaatband{background:var(--paper);padding:clamp(30px,3.4vw,54px) 0}
.citaatband .staat{padding-left:clamp(18px,2vw,32px);border-left:2px solid var(--accent);
  max-width:78ch;font-size:var(--t3);line-height:1.58;color:var(--ink-2)}
.uitgelicht{margin:0;padding:0 0 0 clamp(18px,2vw,32px);border-left:2px solid var(--accent);
  max-width:78ch}
.uitgelicht p{font-size:var(--t2);line-height:1.62;color:var(--ink-2);font-style:italic}
.uitgelicht .bron{margin-top:var(--r3);font-style:normal;font-family:Archivo,sans-serif;
  font-size:var(--t1);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.uitgelicht .bron b{font-variation-settings:"wght" 660;color:var(--ink)}
.uitgelicht .bron span{color:var(--ink-2)}
.uitgelicht .bron a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}


/* ===== alleen kantoorkleding ===== */
/* Kantoorkleding. De gedeelde branche-opmaak staat in _branche.css; de standaardwaarden
   daarin zijn op deze pagina afgestemd, want dit was het eerste branchesjabloon (4z).
   Er valt hier dus niets om te zetten - en dat is het bewijs dat de basis klopt. */

/* Het rek (Greiff op doek) staat op tabletbreedte laag: met 22% raakten de koppen de rand.
   Deze opnamen hebben ruimte boven het hoofd, dus de uitsnede mag hoger (4zzu). */
:root{--rek-pos: 50% 6%}