/* ── foto-strook: swipebare projectfoto's bovenaan een dienstpagina ── */
.met-strook{padding:var(--s-4) 0 var(--s-8)}
.met-strook .schil{display:block;position:relative;z-index:1}
.foto-strook{
  --sh:clamp(280px,50vh,500px);
  --gut:max(var(--rand),calc((100% - var(--raster)) / 2 + var(--rand)));
  position:relative;z-index:1;
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  padding:0 var(--gut);scrollbar-width:none;
  cursor:grab;outline:none;
}
.foto-strook::-webkit-scrollbar{display:none}
.foto-strook.slepen{cursor:grabbing;scroll-snap-type:none;user-select:none}
.foto-strook:focus-visible{box-shadow:inset 0 0 0 3px var(--oranje)}
.foto-strook figure{
  position:relative;flex:0 0 auto;height:var(--sh);aspect-ratio:4/3;margin:0;
  border-radius:var(--rond);overflow:hidden;scroll-snap-align:start;background:var(--nacht);
}
.foto-strook figure.staand{aspect-ratio:3/4}
.foto-strook img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.foto-strook figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;
  background:linear-gradient(to top,rgba(19,41,62,.85),rgba(19,41,62,0));
  color:#fff;font-family:var(--f-spec);font-size:13px;
}
.foto-strook figcaption b{font-weight:600}

.strook-balk{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  margin-top:var(--s-2);
}
.strook-teller{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--wit-60)}
.strook-teller b{color:var(--paper);font-weight:600}
.strook-knoppen{display:flex;gap:10px}
.strook-knoppen button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--lijn-wit);background:transparent;
  color:var(--paper);font-size:20px;line-height:1;cursor:pointer;transition:background .18s,color .18s,border-color .18s,opacity .18s;
}
.strook-knoppen button:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.strook-knoppen button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--paper);border-color:var(--lijn-wit)}

/* tekst onder de strook: kop links, belofte + knoppen rechts */
.met-strook .strook-tekst{margin-top:var(--s-4);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-6);align-items:start}
.met-strook .strook-tekst h1{margin-top:10px}
.met-strook .strook-tekst .sub{margin-top:0}
.met-strook .detail-checks,.met-strook .hero-checks{flex-direction:row;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:.95rem}
.met-strook .detail-knoppen{margin-top:26px}

@media (max-width:900px){
  .met-strook .strook-tekst{grid-template-columns:1fr;gap:var(--s-2);margin-top:var(--s-3)}
}
@media (max-width:640px){
  .met-strook{padding:var(--s-2) 0 var(--s-6)}
  .foto-strook{--sh:auto;gap:8px}
  .foto-strook figure,.foto-strook figure.staand{width:84vw;height:auto;aspect-ratio:1/1}
  .foto-strook figcaption{padding:40px 14px 12px;font-size:12px}
  .strook-knoppen{display:none}
  .met-strook .detail-checks,.met-strook .hero-checks{display:none}
  .met-strook .strook-tekst .sub{font-size:1.05rem}
}
@media (hover:none){.strook-knoppen{display:none}}

/* lange tekstblokken op mobiel inklappen: [data-inklap] */
@media (max-width:640px){
  [data-inklap].ingeklapt{max-height:280px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
}
.lees-verder{margin-top:var(--s-2);background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lijn-zwaar);cursor:pointer}