/* ============================================================
   Ontwerp "Praktijk" — warme, rustige opmaak.
   Volledige-breedte sfeerfoto-hero met zachte overlay + ken-burns,
   ronde kaarten, serif-koppen, ruime witruimte.
   Alles hieronder is gescoped onder [data-design="praktijk"] zodat andere
   ontwerpen (Fase B) hier niets van meekrijgen. --brand-primary/--brand-accent/
   --font-heading/--font-body blijven bewust onaangeroerd (klant-instelbaar via
   Theme::cssVariables); dit bestand voegt alleen ontwerp-eigen accenten toe.
   ============================================================ */

[data-design="praktijk"]{
  --pk-clay:#b98b6e;
  --pk-clay-soft:color-mix(in srgb, var(--pk-clay) 22%, #fff 78%);
  --pk-clay-warm:color-mix(in srgb, var(--pk-clay) 34%, #fff 66%);
  --pk-sage-warm:color-mix(in srgb, var(--brand-primary) 26%, #fff 74%);
  --pk-radius-lg:26px;
}

/* ---- Beweging: scroll-reveal (motion.js voegt .is-in toe) ---- */
[data-design="praktijk"] [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
[data-design="praktijk"] [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-design="praktijk"] [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- Header/footer: lichte accent-tuning voor dit ontwerp ---- */
[data-design="praktijk"] .site-header{background:rgba(246,244,234,.86)}
[data-design="praktijk"] .brand-word{letter-spacing:.01em}
[data-design="praktijk"] .nav a:hover,
[data-design="praktijk"] .nav a[aria-current="page"]{color:var(--pk-clay)}
[data-design="praktijk"] .site-footer{background:var(--cream-soft)}
[data-design="praktijk"] .footer-accent{color:var(--pk-clay)}

/* ============================================================
   Hero — volledige-breedte sfeerfoto
   ============================================================ */
[data-design="praktijk"] .hero-photo{
  position:relative;
  min-height:clamp(480px,72vh,760px);
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
[data-design="praktijk"] .hero-photo__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--sage-tint)}
[data-design="praktijk"] .hero-photo__img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  [data-design="praktijk"] .hero-photo__img{animation:pk-kenburns 22s ease-in-out infinite alternate}
}
@keyframes pk-kenburns{
  from{transform:scale(1)}
  to{transform:scale(1.09)}
}
[data-design="praktijk"] .hero-photo__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(33,32,26,.18) 0%,rgba(33,32,26,.30) 55%,rgba(33,32,26,.50) 100%),
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.14),transparent 60%);
}
[data-design="praktijk"] .hero-photo__inner{
  position:relative;z-index:2;
  max-width:680px;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,40px);
  color:#fff;
}
[data-design="praktijk"] .hero-photo__eyebrow{
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;
  color:#f2ddbb;margin:0 0 .9em;
}
[data-design="praktijk"] .hero-photo__title{
  font-size:clamp(2.3rem,5.5vw,3.6rem);color:#fff;text-wrap:balance;margin:0 0 .45em;
}
[data-design="praktijk"] .hero-photo__intro{
  color:rgba(255,255,255,.88);font-size:1.1rem;max-width:44ch;margin:0 auto 1.8em;
}
[data-design="praktijk"] .hero-photo__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
[data-design="praktijk"] .hero-photo .btn--ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.6);
}
[data-design="praktijk"] .hero-photo .btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.12);
}

/* ============================================================
   Dienst-kaarten
   ============================================================ */
[data-design="praktijk"] .card-grid{grid-template-columns:repeat(3,1fr)}
[data-design="praktijk"] .t-card{
  border-radius:var(--pk-radius-lg);
  border-color:transparent;
  box-shadow:0 20px 40px -30px rgba(33,32,26,.35);
}
[data-design="praktijk"] .t-card__icon{
  width:44px;height:44px;border-radius:14px;
  background:var(--sage-tint);color:var(--sage-dark);
  display:grid;place-items:center;
}
[data-design="praktijk"] .t-card h3{font-size:1.25rem}

/* ============================================================
   Werkwijze-stappen
   ============================================================ */
[data-design="praktijk"] .step__num{
  background:var(--pk-clay);
}

/* ============================================================
   Zachte CTA-band
   ============================================================ */
[data-design="praktijk"] .cta-soft{padding-block:clamp(48px,7vw,88px)}
[data-design="praktijk"] .cta-soft__box{
  border-radius:var(--pk-radius-lg);
  background:linear-gradient(135deg,var(--pk-sage-warm),var(--pk-clay-warm));
  padding:clamp(40px,6vw,72px) clamp(24px,6vw,56px);
  text-align:center;
  box-shadow:0 24px 50px -34px rgba(33,32,26,.4);
}
[data-design="praktijk"] .cta-soft__box h2{
  font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch;margin-inline:auto;
}
[data-design="praktijk"] .cta-soft__box p{
  color:var(--muted);margin:1rem auto 0;max-width:46ch;
}
[data-design="praktijk"] .cta-soft__btns{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:2rem;
}
[data-design="praktijk"] .cta-soft .btn--ghost{
  background:#fff;
}

/* ============================================================
   Responsive — geen horizontale scroll op mobiel
   ============================================================ */
@media (max-width:960px){
  [data-design="praktijk"] .card-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  [data-design="praktijk"] .hero-photo{min-height:clamp(420px,80vh,620px)}
  [data-design="praktijk"] .hero-photo__cta{flex-direction:column;align-items:stretch}
  [data-design="praktijk"] .hero-photo__cta .btn{justify-content:center}
}
@media (max-width:560px){
  [data-design="praktijk"] .card-grid{grid-template-columns:1fr}
  [data-design="praktijk"] .cta-soft__box{border-radius:18px}
}