/* zonnestudio-intake: bereid je intake voor (signatuur en boeking van Lichtkamer, fictief).
   Ring: React Bits Pro constellation-gallery, origineel gecompileerd (assets/constellation-gallery.bundle.js,
   patch pro-constellation-gallery.json: selectOnly, marked, cardColor). Kop: React Bits Pro glitch-text,
   origineel gecompileerd (assets/glitch-text.bundle.js, patch pro-glitch-text.json: fontFamily, fitPadding,
   passieve touch). De lijst met vijf knoppen, de teller en het boekingsvak zijn eigen code. */
.msm-zonnestudio-intake{--zi-p:var(--m-primary,#d9633d);--zi-bg:var(--m-bg,#f0ede7);--zi-ink:var(--m-ink,#20282a);--zi-s:var(--m-surface,#faf7f1);--zi-mu:var(--m-muted,#666e70);--zi-a:var(--m-accent2,#2c3335);--zi-l:var(--m-line,#dcd6cb);position:relative;overflow-x:clip;scroll-margin-top:112px;padding:clamp(56px,7vw,96px) 16px;background:var(--zi-bg);color:var(--zi-ink);font-family:var(--m-font-body,"DM Sans","Segoe UI",system-ui,sans-serif);font-size:16px;line-height:1.55}
.msm-zonnestudio-intake *{box-sizing:border-box}
.msm-zonnestudio-intake [hidden]{display:none!important}
.msm-zonnestudio-intake .zi-wrap{width:min(1400px,100%);margin:0 auto}
@media (min-width:640px){.msm-zonnestudio-intake{padding-left:24px;padding-right:24px}}
@media (min-width:1024px){.msm-zonnestudio-intake{padding-left:32px;padding-right:32px}}

.msm-zonnestudio-intake .zi-head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.msm-zonnestudio-intake .zi-kicker{margin:0 0 14px;color:var(--zi-p);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.msm-zonnestudio-intake .zi-title{position:relative;margin:0 auto;width:fit-content;max-width:100%;font:700 clamp(32px,4.6vw,56px)/1.08 var(--m-font-display,"Syne","Segoe UI",system-ui,sans-serif);letter-spacing:-1px;text-wrap:balance;color:var(--zi-ink)}
.msm-zonnestudio-intake .zi-title.is-canvas{color:transparent}
.msm-zonnestudio-intake .zi-glitch{position:absolute;inset:-32px;pointer-events:auto}
.msm-zonnestudio-intake .zi-intro{margin:18px auto 0;max-width:52ch;color:var(--zi-mu);font-size:17px}

/* ring en lijst: één kolom, vanaf 900 px ring links en lijst rechts */
.msm-zonnestudio-intake .zi-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:900px){.msm-zonnestudio-intake .zi-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}}
.msm-zonnestudio-intake .zi-ring{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto;border-radius:28px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--zi-s) 70%,var(--zi-bg)) 0%,var(--zi-bg) 72%);touch-action:pan-y}
.msm-zonnestudio-intake .zi-ring .constellation-gallery{min-height:0;height:100%;border-radius:28px;outline:none}
.msm-zonnestudio-intake .zi-ring .constellation-gallery:focus-visible{outline:3px solid var(--zi-p);outline-offset:4px}

.msm-zonnestudio-intake .zi-items{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.msm-zonnestudio-intake .zi-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 14px 10px 10px;border:1px solid var(--zi-l);border-radius:18px;background:var(--zi-s);color:var(--zi-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.msm-zonnestudio-intake .zi-item:hover{border-color:color-mix(in srgb,var(--zi-p) 50%,var(--zi-l))}
.msm-zonnestudio-intake .zi-item:focus-visible{outline:3px solid var(--zi-p);outline-offset:3px}
.msm-zonnestudio-intake .zi-item[aria-pressed="true"]{border-color:var(--zi-p);box-shadow:inset 0 0 0 1px var(--zi-p)}
.msm-zonnestudio-intake .zi-item-media{display:block;width:64px;height:64px;flex:none;border-radius:14px;background:var(--zi-bg);overflow:hidden}
.msm-zonnestudio-intake .zi-item-media img{display:block;width:100%;height:100%;object-fit:contain}
.msm-zonnestudio-intake .zi-item-text{display:grid;gap:2px;min-width:0}
.msm-zonnestudio-intake .zi-item-title{font-weight:600;font-size:17px;line-height:1.3}
.msm-zonnestudio-intake .zi-item-sub{color:var(--zi-mu);font-size:14px;line-height:1.4}
.msm-zonnestudio-intake .zi-item-state{display:inline-block;padding:4px 10px;border-radius:9999px;border:1px solid var(--zi-l);color:var(--zi-mu);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.msm-zonnestudio-intake .zi-item[aria-pressed="true"] .zi-item-state{border-color:var(--zi-p);background:var(--zi-p);color:var(--zi-s)}
/* zodra de ring leeft, staat de lijst compact naast de ring zonder dubbele plaatjes */
.msm-zonnestudio-intake.is-live .zi-item{min-height:56px;grid-template-columns:minmax(0,1fr) auto}
.msm-zonnestudio-intake.is-live .zi-item-media{display:none}

.msm-zonnestudio-intake .zi-status{margin-top:22px;padding-top:18px;border-top:1px solid var(--zi-l)}
.msm-zonnestudio-intake .zi-count{margin:0;font-weight:600;font-size:17px}
.msm-zonnestudio-intake .zi-ready{margin:6px 0 0;color:var(--zi-p);font-weight:600}
.msm-zonnestudio-intake .zi-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:16px}
.msm-zonnestudio-intake .zi-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:9999px;background:var(--zi-p);color:var(--zi-ink);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s,transform .2s}
.msm-zonnestudio-intake .zi-btn:hover{background:color-mix(in srgb,var(--zi-p) 86%,var(--zi-ink))}
.msm-zonnestudio-intake .zi-btn:active{transform:scale(.98)}
.msm-zonnestudio-intake .zi-btn:focus-visible,.msm-zonnestudio-intake .zi-link:focus-visible{outline:3px solid var(--zi-p);outline-offset:3px}
.msm-zonnestudio-intake .zi-link{color:var(--zi-ink);font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--zi-p)}
.msm-zonnestudio-intake .zi-link:hover{color:var(--zi-p)}
.msm-zonnestudio-intake .zi-hint{margin:16px 0 0;color:var(--zi-mu);font-size:14px}

/* boeken: het gedeelde vak, in de kleuren van de studio */
.msm-zonnestudio-intake .zi-booking{margin-top:clamp(48px,6vw,80px);scroll-margin-top:112px;outline:none}
.msm-zonnestudio-intake .zi-booking .ms-booking-demo{color:var(--zi-ink)}

/* originele constellation-gallery.css, gescoped */
.msm-zonnestudio-intake .constellation-gallery{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden}
/* originele glitch-text.css, gescoped (hoogte volgt de kop, cursor gewoon) */
.msm-zonnestudio-intake .glitch-text-container{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.msm-zonnestudio-intake .glitch-text-canvas{width:100%;height:100%;display:block;cursor:default;touch-action:pan-y}

@media (prefers-reduced-motion:reduce){
.msm-zonnestudio-intake .zi-item,.msm-zonnestudio-intake .zi-btn{transition:none}
.msm-zonnestudio-intake .zi-glitch{display:none}
.msm-zonnestudio-intake .zi-title.is-canvas{color:var(--zi-ink)}
}
