/* diensten.css  ---  sectie #base, herbouwd 31-08-2026
   Additief op de Webflow-basis: dit bestand voegt raster, tegels en staat toe.
   De staat komt uit js/diensten.js via #base[data-dienst], niet uit Webflow IX2,
   omdat wrapper 4 daar permanent opacity 1 houdt (gemeten 31-08). */

/* ---------- 1. sectieritme: minder leegte aan de kop ---------- */
#base .scroll-section-top-tile { margin-bottom: 160px; }
#base.section.base { padding-bottom: 120px; }

/* ---------- 2. stapeling ---------- */
/* Geen plaat onder de tekst. Het originele ontwerp houdt het midden leeg en
   zet de beelden ver links en ver rechts; een plaat is daar niet voor nodig
   en dekte de foto's af (gemeten 31-08, afgekeurd door Dauji). De tekstkolom
   staat in de DOM voor het beeldblok en moet er wel bovenop blijven, voor het
   geval een tegel bij smallere vensters het midden raakt. */
#base .master-scroll { position: relative; }
#base .images-scroll-block { position: relative; z-index: 1; }
#base .text-master-scroll-center { z-index: 3; }

/* Een label is bij Webflow een kapitaaltje; deze regels zijn hele zinnen en
   lezen in kapitaal als geschreeuw. Alleen hier terug naar zinsvorm. */
#base .label-wrap-scroll .label {
  text-transform: none;
  font-size: 16px; line-height: 1.45; letter-spacing: 0;
  opacity: .72;
}
#base .label-wrap-scroll { overflow: visible; }

/* ---------- 3. wat er per dienst bij komt ---------- */
#base .dnst__index {
  font-family: var(--font--heading-serif);
  font-size: 13px; letter-spacing: .06em; line-height: 1;
  color: var(--_colors---color--dark); opacity: .5;
  margin-bottom: 14px;
}
#base .dnst__index span { opacity: .55; }

#base .dnst__extra {
  margin-top: 18px; text-align: center;
  opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity .45s ease, translate .45s ease;
}
#base[data-dienst="1"] .scroll-wrapper-single._1 .dnst__extra,
#base[data-dienst="2"] .scroll-wrapper-single._2 .dnst__extra,
#base[data-dienst="3"] .scroll-wrapper-single._3 .dnst__extra,
#base[data-dienst="4"] .scroll-wrapper-single._4 .dnst__extra {
  opacity: 1; translate: 0 0; pointer-events: auto;
}
/* voorbij 90% van de sectie laat IX2 ook kop 4 vervagen; dan mag de knop
   niet alleen achterblijven (gemeten f=0.95: wrapper op 0, extra op 1). */
#base.is-uit[data-dienst] .scroll-wrapper-single .dnst__extra { opacity: 0; translate: 0 8px; pointer-events: none; }
#base .dnst__lever {
  margin: 0 0 12px;
  font-family: var(--font--body); font-size: 14px; line-height: 1.35;
  letter-spacing: .01em; color: var(--_colors---color--dark); opacity: .62;
}
#base .dnst__link {
  display: inline-block; padding: 9px 18px 10px;
  border: 1px solid rgba(42,33,25,.28); border-radius: 999px;
  font-family: var(--font--body); font-size: 14px; line-height: 1;
  color: var(--_colors---color--dark); text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}
#base .dnst__link span { display: inline-block; transition: translate .25s ease; }
#base .dnst__link:hover { background: var(--_colors---color--yellow); border-color: var(--_colors---color--yellow); }
#base .dnst__link:hover span { translate: 4px 0; }
#base .dnst__link:focus-visible { outline: 2px solid var(--_colors---color--dark); outline-offset: 3px; }

/* ---------- 4. het beeldraster ---------- */
/* 12 kolommen van 94px + 24px goot = 1392px, gelijk aan het bestaande veld.
   Rijen van 40px, geen rijgoot: de posities komen uit raster.py. */
#base .master-scroll-images.dgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  grid-auto-rows: 40px;
  margin-bottom: 0;
}

#base .dtile {
  grid-column: var(--c) / span var(--cs);
  grid-row: var(--r) / span var(--rs);
  position: relative; display: block;
  border-radius: 8px; overflow: hidden;
  color: inherit; text-decoration: none;
  opacity: .42;
  transition: opacity .6s ease, translate .35s ease;
}
#base[data-dienst="1"] .dtile[data-dienst="1"],
#base[data-dienst="2"] .dtile[data-dienst="2"],
#base[data-dienst="3"] .dtile[data-dienst="3"],
#base[data-dienst="4"] .dtile[data-dienst="4"] { opacity: 1; }

#base .dtile:hover { translate: 0 -5px; opacity: 1; }
#base .dtile:focus-visible { outline: 2px solid var(--_colors---color--dark); outline-offset: 4px; opacity: 1; }

#base .dtile__beeld { position: absolute; inset: 0; display: block; }
#base .dtile__beeld img { width: 100%; height: 100%; display: block; }
/* eigen ontwerpwerk nooit croppen, fotografie wel vullen */
#base .dtile--contain { background: var(--_colors---bg--bg-2); }
#base .dtile--contain img { object-fit: contain; }
#base .dtile--cover img { object-fit: cover; }

#base .dtile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 34px 16px 13px;
  font-family: var(--font--body); font-size: 13px; line-height: 1.3;
  color: #f5f0ea;
  background: linear-gradient(to top, rgba(42,33,25,.88) 0%, rgba(42,33,25,.72) 46%, rgba(42,33,25,0) 100%);
  opacity: 0; translate: 0 100%;
  transition: opacity .35s ease, translate .35s ease;
}
#base .dtile__cap b { font-weight: 600; }
#base .dtile:hover .dtile__cap,
#base .dtile:focus-visible .dtile__cap { opacity: 1; translate: 0 0; }

/* ---------- 5. smaller dan het raster ---------- */
@media (max-width: 991px) {
  #base .master-scroll-images.dgrid { column-gap: 16px; grid-auto-rows: 28px; }
  #base .dtile__cap { font-size: 12px; padding: 26px 12px 10px; }
}
@media (max-width: 767px) {
  /* Het origineel houdt op mobiel hetzelfde principe aan als op desktop: kleine
     losse beelden op een ruime lege grond, geen vol raster. Gemeten op de live
     site bij 375: tegels van 182x182, 132x159 en 90x90 op een kolom van 343.
     Daarom hier zes kolommen met een eigen plaatsing per tegel (--mc t/m --mrs)
     in plaats van twee volle kolommen. */
  #base .scroll-section-top-tile { margin-bottom: 80px; }
  #base .master-scroll-images.dgrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 8px; grid-auto-rows: 22px;
  }
  #base .dtile {
    grid-column: var(--mc) / span var(--mcs);
    grid-row: var(--mr) / span var(--mrs);
    margin-left: 0;
  }
  /* Het bijschrift verschijnt op hover; zonder muis is er geen moment waarop
     het hoort te verschijnen, en statisch eronder botst het met de tekstkolom
     die er overheen staat. De tegel blijft een link. */
  #base .dtile__cap { display: none; }
  #base .dnst__lever { font-size: 13px; }
  /* De beelden schuiven op mobiel dwars door de sticky tekst. Op de live site
     loopt de introregel daar door een donkere foto heen en is onleesbaar
     (gemeten 31-08 op 375). Hier raakt alleen de pil een beeld, dus krijgt die
     zijn eigen vulling in de sectiekleur (gemeten rgb(235,232,219)). Dat is
     knopvorm, geen plaat onder het tekstblok. */
  #base .dnst__link { background-color: rgb(235, 232, 219); }
  /* Op 375 is er geen vrije grond naast de tekst: de kop staat op zeker moment
     op een tegel (gemeten f0.75, de lichte TCT-socialtegel recht achter
     "Social Media & Content"). Op desktop lost de lege middenbaan dit op, op
     mobiel bestaat die baan niet. Daarom staan de beelden hier zachter: de
     actieve tegel op .58 in plaats van 1, de rest op .30. De staatwissel blijft
     leesbaar (verschil .28), de tekst wint. Zelfde soortelijk gewicht als de
     live site, die hier niets aan doet en de introregel onleesbaar laat lopen. */
  #base[data-dienst] .dtile[data-dienst] { opacity: .3; }
  #base[data-dienst="1"] .dtile[data-dienst="1"],
  #base[data-dienst="2"] .dtile[data-dienst="2"],
  #base[data-dienst="3"] .dtile[data-dienst="3"],
  #base[data-dienst="4"] .dtile[data-dienst="4"] { opacity: .58; }
}

/* ---------- 6. rust ---------- */
@media (prefers-reduced-motion: reduce) {
  #base .dtile, #base .dtile__cap, #base .dnst__extra, #base .dnst__link span { transition: none; }
  #base .dtile:hover { translate: none; }
}

/* ---------- 7. het gele krabbeltje achter de kop ---------- */
/* Het originele ontwerp zet per dienst een geel omlijnd tekentje achter de
   titel; dat is de enige kleuraccent in de sectie. Twee van de vier uit het
   Webflow-sjabloon gaan niet terug: het oog (afgekeurd merkteken) en GSAP,
   dat de merknaam van het sjabloon spelt. In plaats daarvan golf, ster, pijl
   en smiley, dezelfde tekenset, zonder vreemde naam erin. */
#base .text-wrap-scroll { position: relative; overflow: visible; }
#base .text-wrap-scroll .text-h2 { position: relative; z-index: 1; }
#base .dnst__krabbel {
  position: absolute; left: 50%; top: 50%;
  width: var(--kb); height: auto;
  translate: calc(-50% + var(--kx)) calc(-50% + var(--ky, 0px));
  z-index: 0; pointer-events: none;
}
@media (max-width: 767px) {
  /* Op 343 breed is er geen vrije grond naast de kop, dus krimpt het krabbeltje
     tot .48 en zakt het 10px, zodat het achter de grote kop blijft en niet door
     de kleine introregel loopt (gemeten 375: introregel op y337-360). */
  #base .dnst__krabbel { width: calc(var(--kb) * .48); translate: calc(-50% + var(--kx) * .5) calc(-50% + var(--ky, 0px) * .5 + 10px); }
}

/* ---------- 8. de beelden houden marge tot de rand ---------- */
/* Op de live site staat de linkerfoto op x94 tot x477, niet tegen de
   rasterrand op x24. Deze inspring haalt hetzelfde ritme terug en houdt het
   midden vrij voor de kop. */
@media (min-width: 992px) {
  #base .dtile { margin-left: min(70px, 6vw); }
}

/* =====================================================================
   Spoor 1, 12-10-2026: feedback Dauji op de intro en de diensten.
   "Dit leest niet lekker", "dingen snijden af, in die letters",
   "witte rand naast de afbeelding". Alles hieronder wint van het
   bovenstaande door volgorde; terugdraaien = dit blok weghalen en de
   tegels in index.html terugzetten (voor/ in V:\claude-werk\vivimus-site\spoor1-1210).
   ===================================================================== */

/* ---------- 9. intro: links uitgelijnd, smaller, krabbel eronder ---------- */
/* Gemeten voor: rechts uitgelijnd op 40px, zeven regels op 577 breed, de
   pijl liep 88.396 px2 door de tekst. Nu: links, kleiner korps, een maat
   van rond 34 tekens per regel en de pijl als accent onder de alinea. */
#base .right-scroll-section {
  text-align: left; max-width: 520px;
  display: flex; flex-direction: column; align-items: flex-start;
}
#base .text-scroll-right {
  text-align: left;
  font-size: clamp(22px, 2.08vw, 30px); line-height: 1.24; letter-spacing: -.4px;
  text-wrap: pretty;
}
#base .right-scroll-section .arrow-svg {
  position: static; inset: auto; z-index: 0; order: 2;
  width: 84px; height: auto; margin: 28px 0 0 6px;
}

/* ---------- 10. kop in de lege middenbaan ---------- */
/* Gemeten voor op 1440: koppen 387 tot 606 breed, de vrije baan tussen de
   tegels x512 tot x998 (486). De tekstkolom wordt smaller dan die baan, de
   kop breekt in twee gelijke regels. */
@media (min-width: 992px) {
  #base .scroll-wrapper-single {
    width: min(400px, 34vw); left: 0; right: 0; margin-inline: auto;
  }
  #base .text-wrap-scroll .text-h2 { text-wrap: balance; }
}

/* Webflow IX2 houdt wrapper 4 permanent op opacity 1 (gemeten 31-08), dus
   stond "04 / 04" met de smiley al onder de intro voordat de sectie begon.
   Alleen zichtbaar als dienst 4 aan de beurt is. */
@media (min-width: 992px) {
  #base:not([data-dienst="4"]) .scroll-wrapper-single._4 { opacity: 0 !important; }
  /* Tegels van een andere dienst wijken verder terug, zodat bij elke stap
     het beeld bij de kop hoort. */
  #base .dtile { opacity: .24; }
}

/* ---------- 11. krabbel als accent onder het woord ---------- */
/* Niet meer achter de letters: in de stroom, onder de kop, klein. */
#base .text-wrap-scroll { display: flex; flex-direction: column; align-items: center; }
#base .text-wrap-scroll .text-h2 { order: 1; }
#base .dnst__krabbel,
#base .dnst__krabbel[style] {
  position: static; order: 2; translate: none;
  width: auto; height: 46px; max-width: 150px; margin-top: 20px;
  object-fit: contain;
}

/* ---------- 12. tegels op hun eigen verhouding ---------- */
/* Gemeten voor: de containtegels 298x280 met een beeld van 1.78, dus 56px
   lichte band boven en onder. De covertegels sneden eigen werk af (de
   telefoonschermafbeelding van Beweegcoach van .46 naar .28). Nu krijgt elke
   tegel de verhouding van zijn beeld (--ar), dus geen band en geen snede. */
#base .dtile {
  aspect-ratio: var(--ar); height: auto; align-self: center;
}
#base .dtile--contain { background: transparent; }
/* Gemeten op 1280 en 1024: de linkertegels schoven door de inspring van
   sectie 8 tot in de tekstkolom. Nu staan links en rechts symmetrisch tegen
   de buitenrand van het veld, op 82% van hun vier kolommen, zodat de
   middenbaan op elke breedte even ver van beide kanten ligt. */
@media (min-width: 992px) {
  #base .dtile { margin-left: 0; width: 82%; justify-self: start; }
  #base .dtile[style*="--c:9;"], #base .dtile[style*="--c:10;"] { justify-self: end; }
}

/* ---------- 13. mobiel en tablet: tekst en beeld na elkaar ---------- */
/* Tot 991 breed (gemeten op 820: de tegels liepen voor of achter op de kop
   bij 19 van 38 standen) en op 375 bestaat geen vrije baan naast de kop: de tegels liepen bij 33 van
   38 scrollstanden achter de kop door. Daarom staat de sectie hier in de
   stroom: per dienst eerst de tekst, dan de beelden. Geen plaat, geen
   sticky, niets over elkaar. */
@media (max-width: 991px) {
  #base .master-scroll { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  #base .text-master-scroll-center,
  #base .images-scroll-block,
  #base .master-scroll-images.dgrid { display: contents; }
  #base .scroll-wrapper-single {
    position: static; flex: 0 0 100%;
    opacity: 1 !important; transform: none !important;
    margin: 56px 0 16px;
  }
  #base .scroll-wrapper-single._1 { margin-top: 0; }
  #base .scroll-wrapper-single._1 { order: 10; }
  #base .scroll-wrapper-single._2 { order: 20; }
  #base .scroll-wrapper-single._3 { order: 30; }
  #base .scroll-wrapper-single._4 { order: 40; }
  #base .dtile[data-dienst="1"] { order: 11; }
  #base .dtile[data-dienst="2"] { order: 21; }
  #base .dtile[data-dienst="3"] { order: 31; }
  #base .dtile[data-dienst="4"] { order: 41; }
  #base .dtile,
  #base[data-dienst] .dtile[data-dienst] {
    flex: 0 0 100%; opacity: 1; margin: 0; align-self: flex-start;
  }
  #base .dtile.dtile--half,
  #base[data-dienst] .dtile.dtile--half[data-dienst] { flex-basis: calc(50% - 4px); }
  #base .dnst__extra,
  #base.is-uit[data-dienst] .scroll-wrapper-single .dnst__extra {
    opacity: 1; translate: none; pointer-events: auto;
  }
  #base .dnst__link { background-color: transparent; }
  #base .scroll-wrapper-single .gsap_split_letter { transform: none !important; opacity: 1 !important; }
  #base .dnst__krabbel, #base .dnst__krabbel[style] { height: 34px; max-width: 110px; margin-top: 8px; }
  #base.section.base { padding-bottom: 72px; }
}

/* 14. mobiel en tablet: de inleidende zin per dienst zichtbaar.
   IX2 zet .label.scroll-N inline op opacity 0 en laat hem pas in de
   sticky wissel binnenkomen; in de doorlopende opbouw gebeurt dat niet. */
@media (max-width: 991px) {
  #base .scroll-wrapper-single .label[class*="scroll-"] { opacity: 1 !important; transform: none !important; }
}