/* zonnestudio-reacties: block-port van ReactBitsPro Blocks/showcase-4 (filterable project grid) plus
   ReactBitsPro Components/glitch-text (origineel gecompileerd) op de h2.
   Tailwind van de bron vertaald naar gescopete CSS, kleuren alleen via --m-*-tokens (lichte variant):
   sectie py 48/64 px 16/24/32, max-w 1400; kop flex-col gap 24 mb 40/56 met kicker xs tracking .2em uppercase
   en h2 30/48/60 px semibold tracking-tight leading 1,05 max-w 768; filterbalk flex-col/sm-row gap 16 pt 24
   border-top met label, pill-knoppen (px 16 py 6 rounded-full xs tracking .15em uppercase medium) en één reizend
   vlak (layoutId showcase4-pill, veer stiffness 400 damping 32 als linear() van 0,45 s) achter de actieve knop,
   rechts de teller; raster mt 40 cols 1/2/3 (de bron heeft 4 vanaf lg) gap 20/24; kaart flex-col gap 16 met
   vierkant vlak rounded-2xl (hier het citaat op --m-surface met rand --m-line en radius 1 rem) dat bij hover
   1,05 schaalt in 0,6 s ease [0.22,1,0.36,1], de pijl rechtsboven (36 px rond, schaduw) die van opacity 0 y 8
   naar 1/0 komt in 0,3 s, tag-pills (px 8 py 2, 10 px tracking .15em uppercase) en een voet met naam 16/18 px
   semibold, ondertitel 12 px en rechts het label xs tracking .15em. */
.msm-zonnestudio-reacties{--zr-p:var(--m-primary,#d9633d);--zr-bg:var(--m-bg,#f0ede7);--zr-ink:var(--m-ink,#20282a);--zr-s:var(--m-surface,#faf7f1);--zr-mu:var(--m-muted,#666e70);--zr-a:var(--m-accent2,#2c3335);--zr-l:var(--m-line,#dcd6cb);--zr-ease:cubic-bezier(.22,1,.36,1);--zr-pill:linear(0,0.034,0.117,0.226,0.344,0.461,0.57,0.666,0.749,0.817,0.873,0.916,0.949,0.973,0.99,1.002,1.009,1.013,1.015,1.015,1.014,1.013,1.011,1.009,1.008,1.006,1.005,1.003,1.002,1.002,1.001,1.001,1);box-sizing:border-box;scroll-margin-top:112px;display:flex;align-items:flex-start;width:100%;padding:48px 16px;background:var(--zr-bg);color:var(--zr-ink);font-family:var(--m-font-body,'DM Sans',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-zonnestudio-reacties *{box-sizing:border-box}
@media (min-width:640px){.msm-zonnestudio-reacties{padding:64px 24px}}
@media (min-width:1024px){.msm-zonnestudio-reacties{padding:64px 32px}}
.msm-zonnestudio-reacties .zr-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kop: flex-col gap-6 mb-10 sm:mb-14 */
.msm-zonnestudio-reacties .zr-head{display:flex;flex-direction:column;gap:24px;margin-bottom:40px}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-head{margin-bottom:56px}}
.msm-zonnestudio-reacties .zr-kicker{margin:0;color:var(--zr-mu);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.msm-zonnestudio-reacties .zr-title{position:relative;margin:0;max-width:768px;font:700 30px/1.05 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.025em;color:var(--zr-ink)}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-title{font-size:48px}}
@media (min-width:768px){.msm-zonnestudio-reacties .zr-title{font-size:60px}}
.msm-zonnestudio-reacties .zr-intro{margin:0;max-width:640px;color:var(--zr-mu);font-size:clamp(16px,1.3vw,18px);line-height:1.6}

/* glitch-text: de echte h2 blijft staan en wordt transparant zodra het canvas tekent; de host is een
   absoluut geplaatst vlak over de kop met de maat uit module.js. Originele glitch-text.css gescoped,
   zonder de min-height van 400 px (de host krijgt de maat van de h2); cursor en touch-action neutraal,
   de kop staat in een scrollende pagina. */
.msm-zonnestudio-reacties .zr-title.is-glitch{color:transparent}
.msm-zonnestudio-reacties .zr-glitch{position:absolute;display:block;z-index:1}
.msm-zonnestudio-reacties .zr-glitch .glitch-text-container{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.msm-zonnestudio-reacties .zr-glitch .glitch-text-canvas{width:100%;height:100%;display:block;cursor:default;touch-action:auto;letter-spacing:normal}

/* filterbalk: flex-col sm:flex-row sm:items-center gap-4 pt-6 border-t */
.msm-zonnestudio-reacties .zr-bar{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--zr-l)}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-bar{flex-direction:row;align-items:center}}
.msm-zonnestudio-reacties .zr-bar-label,.msm-zonnestudio-reacties .zr-count{flex:0 0 auto;color:var(--zr-mu);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.msm-zonnestudio-reacties .zr-count{letter-spacing:.15em;font-weight:400}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-count{margin-left:auto}}
.msm-zonnestudio-reacties .zr-filters{position:relative;display:flex;flex-wrap:wrap;gap:8px}
/* knop: relative isolate px-4 py-1.5 rounded-full text-xs tracking .15em uppercase medium; actief tekst in de
   oppervlaktekleur boven het reizende vlak, de andere omrand */
.msm-zonnestudio-reacties .zr-filter{position:relative;z-index:1;isolation:isolate;min-height:32px;padding:6px 16px;border:1px solid var(--zr-l);border-radius:999px;background:transparent;color:var(--zr-ink);font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.15em;line-height:1.5;text-transform:uppercase;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.msm-zonnestudio-reacties .zr-filter:hover{border-color:var(--zr-mu)}
.msm-zonnestudio-reacties .zr-filter[aria-pressed="true"]{border-color:transparent;color:var(--zr-s)}
.msm-zonnestudio-reacties .zr-filters.no-pill .zr-filter[aria-pressed="true"]{background:var(--zr-ink)}
.msm-zonnestudio-reacties .zr-filter:focus-visible{outline:2px solid var(--zr-p);outline-offset:2px}
/* het reizende vlak: absolute inset-0 rounded-full in de inktkleur; positie en maat uit module.js */
.msm-zonnestudio-reacties .zr-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--zr-ink);opacity:0;pointer-events:none;transition:transform .45s var(--zr-pill),width .45s var(--zr-pill),height .45s var(--zr-pill)}
.msm-zonnestudio-reacties .zr-pill.is-on{opacity:1}
.msm-zonnestudio-reacties .zr-pill.no-move{transition:none}

/* raster: mt-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 */
.msm-zonnestudio-reacties .zr-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:40px}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:1024px){.msm-zonnestudio-reacties .zr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.msm-zonnestudio-reacties .zr-card{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0}
.msm-zonnestudio-reacties .zr-card[hidden]{display:none}
.msm-zonnestudio-reacties .zr-card.is-leaving{position:absolute;pointer-events:none}
/* tags: pills bg white/90 backdrop-blur text 10 px tracking .15em uppercase medium */
.msm-zonnestudio-reacties .zr-tags{display:flex;flex-wrap:wrap;gap:6px}
.msm-zonnestudio-reacties .zr-tag{display:inline-flex;padding:2px 8px;border:1px solid var(--zr-l);border-radius:999px;background:color-mix(in srgb,var(--zr-s) 90%,transparent);color:var(--zr-ink);font-size:10px;font-weight:500;letter-spacing:.15em;line-height:1.6;text-transform:uppercase;backdrop-filter:blur(4px)}
/* beeldvlak: relative aspect-square rounded-2xl overflow-hidden; hier het citaat */
.msm-zonnestudio-reacties .zr-media{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--zr-l);border-radius:1rem;background:var(--zr-s);display:flex;align-items:center;justify-content:center;padding:clamp(20px,6%,36px)}
.msm-zonnestudio-reacties .zr-quote{margin:0;width:100%;transition:transform .6s var(--zr-ease);transform-origin:center}
.msm-zonnestudio-reacties .zr-quote p{margin:0;font:600 clamp(20px,2.1vw,27px)/1.3 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.015em;color:var(--zr-ink);text-wrap:balance}
.msm-zonnestudio-reacties .zr-quote p::before{content:"\201C";color:var(--zr-p)}
.msm-zonnestudio-reacties .zr-quote p::after{content:"\201D";color:var(--zr-p)}
.msm-zonnestudio-reacties .zr-card:hover .zr-quote{transform:scale(1.05)}
/* pijl: absolute top-3 right-3 w-9 h-9 rounded-full bg-white shadow-md; opacity 0 y 8 naar 1/0 in 0,3 s bij hover */
.msm-zonnestudio-reacties .zr-arrow{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--zr-bg);color:var(--zr-ink);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.msm-zonnestudio-reacties .zr-card:hover .zr-arrow{opacity:1;transform:translateY(0)}
/* voet: flex items-baseline justify-between gap-3 */
.msm-zonnestudio-reacties .zr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msm-zonnestudio-reacties .zr-avatar{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:1px solid var(--zr-l);border-radius:8px;background:var(--zr-s);font:600 15px/1 var(--m-font-display,'Syne','Arial Black',sans-serif);color:var(--zr-a)}
.msm-zonnestudio-reacties .zr-who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.msm-zonnestudio-reacties .zr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;line-height:1.3;color:var(--zr-ink)}
@media (min-width:640px){.msm-zonnestudio-reacties .zr-name{font-size:18px}}
.msm-zonnestudio-reacties .zr-sub{font-size:12px;color:var(--zr-mu)}
.msm-zonnestudio-reacties .zr-label{flex:0 0 auto;font-size:12px;letter-spacing:.15em;color:var(--zr-mu)}

@media (prefers-reduced-motion:reduce){
  .msm-zonnestudio-reacties .zr-quote,.msm-zonnestudio-reacties .zr-arrow,.msm-zonnestudio-reacties .zr-pill,.msm-zonnestudio-reacties .zr-filter{transition:none}
  .msm-zonnestudio-reacties .zr-card:hover .zr-quote{transform:none}
}