/* DECLAER — projectenoverzicht en projectpagina
   Overgezet uit Declaer-projecten.html en Declaer-project-vegger.html.
   De kaarten zelf staan in blocks/projecten-kaarten/projecten-kaarten.css;
   die laadt op deze sjablonen mee via setup.php. */

/* ---------- sprongnavigatie naar de diensten ----------
   Verschijnt pas zodra er projecten onder meer dan een dienst hangen. Bij een
   groep is springen zinloos, want die kop staat toch al in beeld. */
.psprong{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,2.6vw,34px) auto 0;}
.psprong a{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:8px 15px;
  border:1px solid var(--line-2);border-radius:22px;font-family:var(--display);
  font-weight:600;font-size:14px;color:var(--ink);
  transition:border-color .15s ease,color .15s ease;}
.psprong a:hover{border-color:var(--accent-tekst);color:var(--accent-tekst);}
.psprong .n{font-family:var(--mono);font-size:11.5px;color:var(--faint);}

/* ---------- CTA per dienst ----------
   Een paneel op --wash met een haarlijn erboven. Bewust geen accentband en
   geen donker vlak: meerdere donkere banden zouden de pagina onleesbaar
   maken. De pagina houdt zo een donkere sectie, de afsluiting. */
.dcta{margin-top:clamp(26px,3.2vw,42px);padding:clamp(20px,2.6vw,30px);
  background:var(--wash);border-radius:16px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;}
@media(max-width:820px){.dcta{grid-template-columns:1fr;}}
.dcta h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;color:var(--ink);}
.dcta p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:58ch;}
.dcta-knoppen{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- verwante diensten als regel, niet als kaartenrij ----------
   Dit is een uitloop voor wie hier niet hoort, geen catalogus. */
.lp-meer{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,30px);}
.lp-meer a{display:inline-flex;align-items:center;min-height:24px;padding:9px 16px;
  border:1px solid var(--line-2);border-radius:22px;font-family:var(--display);
  font-weight:600;font-size:14.5px;color:var(--ink);
  transition:border-color .15s ease,color .15s ease,transform .15s ease;}
.lp-meer a:hover{border-color:var(--accent-tekst);color:var(--accent-tekst);transform:translateY(-2px);}
#diensten .lp-meer{margin-top:40px;}

/* ---------- het verhaal ----------
   De eerste alinea staat groter en draagt de pagina; de rest volgt op
   leesbreedte. Zo is dezelfde opzet af bij veertig woorden en bij
   vierhonderd, zonder blokken die om vulling vragen. */
.verhaal{margin-top:40px;max-width:68ch;}
.verhaal p{font-size:17px;line-height:1.72;color:var(--muted);margin-top:1.1em;}
.verhaal p:first-child{font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--ink);
  margin-top:0;}
.verhaal h3{margin-top:1.6em;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.7vw,20px);text-transform:uppercase;letter-spacing:-.005em;
  color:var(--ink);}
.verhaal h3 + p{margin-top:.5em;}

/* Nog in te vullen tekst valt op, in plaats van mee te lezen als gewone zin. */
.verhaal mark{background:color-mix(in srgb,var(--accent-2) 42%,transparent);
  color:var(--ink);padding:2px 4px;border-radius:3px;}