/* V2 "Vijf dagen" — de secties onder het eerste scherm.
 *
 * Het handmerk is het register van vijf: een rij van vijf gelijke velden die
 * hieronder terugkeert als de keuzeschakelaar van de eerste situatie en als de
 * plaatsenindex in het contactblok. Waar V1 een curve is, is dit een raster.
 */

/* ------------------------------------------ 2. wat is er gebeurd? -------- */

.v2-situatie{
  background:var(--veld-plaat);
  padding:calc(var(--u) * 12) 0;
}
/* koud beginnen: de schakelaar zelf is de opening */
.v2-keuze{
  border-top:var(--bd) solid var(--lijn);
}
.v2-keuze > details{
  border-bottom:var(--bd) solid var(--lijn);
}
.v2-keuze summary{
  display:flex;align-items:baseline;gap:calc(var(--u) * 3);
  padding:calc(var(--u) * 3) 0;
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h3);
  color:var(--ink);
}
.v2-keuze summary::after{
  content:'';
  margin-left:auto;flex:none;
  width:10px;height:10px;
  border-right:var(--bd) solid var(--accent);
  border-bottom:var(--bd) solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
}
.v2-keuze > details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.v2-keuze-nr{
  flex:none;
  font-family:'Karla',system-ui,sans-serif;
  font-size:var(--fs-label);letter-spacing:.18em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.v2-keuze-in{
  padding:0 0 calc(var(--u) * 4) calc(var(--u) * 8);
  max-width:70ch;
}
.v2-keuze-in p{font-size:var(--fs-small);color:var(--ink-stil)}
.v2-keuze-in p + p{margin-top:calc(var(--u) * 2)}
.v2-situatie-slot{
  margin-top:calc(var(--u) * 5);
  font-size:var(--fs-small);color:var(--ink-stil);
  max-width:64ch;
}

/* -------------------------------------------- 3. de naam als beeld ------- */

.v2-naam{
  background:var(--accent);
  color:var(--accent-ink);
  padding:calc(var(--u) * 14) 0 calc(var(--u) * 12);
  position:relative;
  overflow:clip;
}
.v2-naam-beeld{
  position:absolute;inset:0;z-index:0;
  opacity:.18;
}
.v2-naam-beeld img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  filter:grayscale(1) contrast(1.1);
}
.v2-naam-in{position:relative;z-index:2}
/* het woord IS het beeld: de kop arriveert pas eronder */
.v2-woord{
  display:block;
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-mega);
  line-height:.82;letter-spacing:-0.04em;
  text-transform:uppercase;
  margin-bottom:calc(var(--u) * 2);
}
.v2-woord em{font-style:normal;opacity:.42}
.v2-naam-kop{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h2);line-height:1.1;
  max-width:24ch;
  margin-bottom:calc(var(--u) * 4);
}
.v2-naam-tekst{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(24px, 4vw, 60px);
  max-width:96ch;
}
.v2-naam-tekst p{color:var(--accent-ink);opacity:.9;font-size:var(--fs-small)}

/* ------------------------------------------------ 4. vijf vrouwen -------- */

.v2-team{
  background:var(--veld);
  padding:0 0 calc(var(--u) * 12);
}
/* de oversteek: het beeld begint in de groene band hierboven */
.v2-groep{
  position:relative;z-index:3;
  margin-top:calc(var(--u) * -9);
  margin-bottom:calc(var(--u) * 6);
  max-width:1170px;
  overflow:clip;
  border-radius:var(--r-m);
  box-shadow:var(--sh-b);
}
.v2-groep img{width:100%}
.v2-team-in{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}
.v2-team-kop{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h2);line-height:1.08;
  max-width:14ch;
}
.v2-team-tekst{color:var(--ink-stil);max-width:60ch}
.v2-team-tekst + .v2-team-tekst{margin-top:calc(var(--u) * 2)}
.v2-namen{
  margin-top:calc(var(--u) * 4);
  border-top:var(--bd) solid var(--lijn);
}
.v2-naam-rij{
  display:flex;align-items:center;gap:calc(var(--u) * 2.5);
  padding:calc(var(--u) * 1.5) 0;
  border-bottom:var(--bd) solid var(--lijn);
}
.v2-naam-rij img{
  flex:none;width:52px;height:52px;
  border-radius:var(--r-pill);
  object-fit:cover;object-position:50% 22%;
}
.v2-naam-rij b{font-weight:600;font-size:var(--fs-small);color:var(--ink)}
.v2-naam-rij span{
  margin-left:auto;text-align:right;
  font-size:var(--fs-label);letter-spacing:.06em;color:var(--ink-stil);
}

/* -------------------------------------------- 5. wat we regelen ---------- */

.v2-regelen{
  background:var(--veld-plaat);
  padding:calc(var(--u) * 12) 0;
}
.v2-regelen-in{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}
/* de gepinde scene: het beeld blijft staan terwijl het register erlangs gaat */
.v2-pin{
  position:sticky;top:calc(var(--kop-h) + var(--u) * 4);
  margin:0;
}
.v2-pin img{
  width:100%;border-radius:var(--r-m);
  filter:grayscale(1) contrast(1.08);
  box-shadow:var(--sh-a);
}
.v2-pin figcaption{
  margin-top:calc(var(--u) * 1.5);
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-stil);
}
/* een bijschrift vóór de kop */
.v2-voorregel{
  display:block;
  font-size:var(--fs-small);color:var(--ink-stil);
  margin-bottom:calc(var(--u) * 1.5);
  max-width:40ch;
}
.v2-regelen-kop{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h2);line-height:1.08;
  max-width:18ch;
  margin-bottom:calc(var(--u) * 4);
}
.v2-lijst > div{
  padding:calc(var(--u) * 2.5) 0;
  border-top:var(--bd) solid var(--lijn);
}
.v2-lijst h3{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);
  margin-bottom:calc(var(--u) * 1);
}
.v2-lijst p{font-size:var(--fs-small);color:var(--ink-stil)}

/* ------------------------------------------------------ 6. kosten -------- */

.v2-kosten{
  background:var(--accent);
  color:var(--accent-ink);
  padding:calc(var(--u) * 12) 0;
}
.v2-kosten-in{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(28px, 5vw, 76px);
  align-items:center;
}
/* een getal dat de compositie IS */
.v2-cijfer{
  display:block;
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-mega);
  line-height:.8;letter-spacing:-0.04em;
}
.v2-cijfer small{
  display:block;
  font-family:'Karla',system-ui,sans-serif;font-weight:400;
  font-size:var(--fs-small);letter-spacing:.02em;
  margin-top:calc(var(--u) * 2);
  max-width:22ch;
  opacity:.86;
}
.v2-kosten p{color:var(--accent-ink);opacity:.9;font-size:var(--fs-small)}
.v2-kosten p + p{margin-top:calc(var(--u) * 2)}
.v2-kosten-kop{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h3);
  margin-bottom:calc(var(--u) * 2);
  opacity:1;
}

/* -------------------------------------------- 7. kinderen en nazorg ------ */

.v2-verder{
  background:var(--veld);
  padding:calc(var(--u) * 14) 0;
}
/* één zin op displaymaat doet het werk van de kop */
.v2-verder-kop{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-display);
  line-height:1.06;letter-spacing:-0.015em;
  max-width:20ch;
  margin-bottom:calc(var(--u) * 6);
}
.v2-stapel{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(20px, 3vw, 40px);
}
.v2-kaart{
  display:flex;flex-direction:column;
  background:var(--veld-plaat);
  border-radius:var(--r-m);
  overflow:clip;
  box-shadow:var(--sh-a);
}
.v2-kaart img{width:100%;filter:grayscale(1) contrast(1.06)}
.v2-kaart--warm img{filter:none}
.v2-kaart-in{padding:calc(var(--u) * 3.5)}
.v2-kaart h3{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);
  margin-bottom:calc(var(--u) * 1.5);
}
.v2-kaart p{font-size:var(--fs-small);color:var(--ink-stil)}
.v2-kaart p + p{margin-top:calc(var(--u) * 1.5)}

/* ------------------------------------------------ 8. plaats en contact --- */

.v2-plaats{
  background:var(--veld-diep);
  padding:calc(var(--u) * 12) 0;
}
/* het label is de compositie */
.v2-plaats-label{
  display:block;
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h2);
  margin-bottom:calc(var(--u) * 5);
}
.v2-plaats-in{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}
.v2-adres{
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h3);line-height:1.5;
  color:var(--ink);
}
.v2-bellen{
  display:inline-flex;align-items:baseline;gap:calc(var(--u) * 2);
  margin-top:calc(var(--u) * 3);
  font-family:var(--ff-kop);font-weight:600;
  font-size:var(--fs-h2);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.v2-bellen small{
  font-family:'Karla',system-ui,sans-serif;font-weight:400;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-stil);
}
.v2-mail{
  display:block;margin-top:calc(var(--u) * 2);
  font-size:var(--fs-small);color:var(--ink-stil);
  text-decoration:underline;text-underline-offset:3px;
}
.v2-mail:hover{color:var(--ink)}
/* de plaatsenindex: hetzelfde raster van vijf als het register in de hero */
.v2-plaatsen{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:var(--bd);
  border-top:var(--bd) solid var(--lijn);
  padding-top:calc(var(--u) * 2.5);
}
.v2-plaatsen li{
  min-width:0;
  padding:calc(var(--u) * .75) clamp(6px, 1vw, 12px) calc(var(--u) * .75) 0;
  font-size:var(--fs-small);color:var(--ink-stil);
}
.v2-plaats-slot{
  margin-top:calc(var(--u) * 4);
  padding-top:calc(var(--u) * 3);
  border-top:var(--bd) solid var(--lijn);
  font-size:var(--fs-small);color:var(--ink-stil);
  max-width:70ch;
}
.v2-merken{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 3);margin-top:calc(var(--u) * 4)}

/* --------------------------------------------------------- responsief ---- */

@media (max-width: 1000px){
  .v2-team-in{grid-template-columns:1fr}
  .v2-regelen-in{grid-template-columns:1fr}
  .v2-pin{position:static;max-width:420px}
  .v2-kosten-in{grid-template-columns:1fr}
  .v2-plaats-in{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .v2-plaatsen{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .v2-keuze-in{padding-left:0}
  .v2-groep{margin-top:calc(var(--u) * -6)}
  .v2-naam-rij span{margin-left:0;text-align:left;flex-basis:100%}
  .v2-naam-rij{flex-wrap:wrap}
}