/* zonnestudio-kennis: block-port van ReactBitsPro Blocks/blog-9 (poster-style journal teaser) plus
   ReactBitsPro Components/glitch-text (origineel gecompileerd) op de h2.
   Tailwind vertaald naar gescopete CSS, kleuren alleen via --m-*-tokens: sectie py 64/80/96 px 16/24/32,
   max-w 1400; kop flex-col gap 24 en vanaf 640 px een rij met de tekst (max-w 672, h2 36/48/60 px medium
   tracking-tight text-balance, intro 16/18 px) links en de omrande pill-knop 'Alle artikelen' (px 24 py 12,
   14 px medium, hover lichte achtergrond) rechts; raster mt 48/64 van één kolom, twee vanaf 768 px en vier
   vanaf 1024 px (de bron heeft drie vanaf md) met gap 40/32/40; posterkaart aspect 4/5 rounded-3xl met het beeld
   over de hele kaart dat bij hover 1,05 schaalt in 0,45 s ease [0.22,1,0.36,1], onderin een zwevende balk
   (inset-x 16 bottom 16, rand, oppervlaktekleur op 90 procent met backdrop-blur, p 14, rounded-2xl) met links
   categorie en leestijd (14 px medium, truncate) en rechts een rond vakje van 36 px met pijl dat bij hover 2 px
   schuift in 0,2 s; onder de kaart de titel 20/24 px medium leading-snug die bij hover van kleur verandert in
   0,2 s, en de samenvatting 14/16 px line-clamp 2. Het puntje tussen categorie en leestijd is een streepje. */
.msm-zonnestudio-kennis{--zk-p:var(--m-primary,#d9633d);--zk-bg:var(--m-bg,#f0ede7);--zk-ink:var(--m-ink,#20282a);--zk-s:var(--m-surface,#faf7f1);--zk-mu:var(--m-muted,#666e70);--zk-a:var(--m-accent2,#2c3335);--zk-l:var(--m-line,#dcd6cb);--zk-ease:cubic-bezier(.22,1,.36,1);box-sizing:border-box;scroll-margin-top:112px;width:100%;padding:64px 16px;background:var(--zk-bg);color:var(--zk-ink);font-family:var(--m-font-body,'DM Sans',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-zonnestudio-kennis *{box-sizing:border-box}
@media (min-width:640px){.msm-zonnestudio-kennis{padding:80px 24px}}
@media (min-width:1024px){.msm-zonnestudio-kennis{padding:96px 32px}}
.msm-zonnestudio-kennis .zk-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kop: flex-col gap-6 sm:flex-row sm:items-end sm:justify-between sm:gap-10 */
.msm-zonnestudio-kennis .zk-head{display:flex;flex-direction:column;gap:24px}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}}
.msm-zonnestudio-kennis .zk-head-text{max-width:672px}
.msm-zonnestudio-kennis .zk-kicker{margin:0 0 12px;color:var(--zk-mu);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.msm-zonnestudio-kennis .zk-title{position:relative;margin:0;font:700 36px/1.05 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.025em;color:var(--zk-ink);text-wrap:balance}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-title{font-size:48px}}
@media (min-width:1024px){.msm-zonnestudio-kennis .zk-title{font-size:60px}}
.msm-zonnestudio-kennis .zk-intro{margin:16px 0 0;color:var(--zk-mu);font-size:16px;line-height:1.625;text-wrap:pretty}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-intro{font-size:18px}}
/* knop: inline-flex w-full sm:w-auto gap-2 rounded-full border px-6 py-3 14 px medium, hover lichte achtergrond */
.msm-zonnestudio-kennis .zk-all{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 24px;border:1px solid var(--zk-l);border-radius:999px;color:var(--zk-ink);font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;transition:background-color .15s,border-color .15s}
.msm-zonnestudio-kennis .zk-all:hover{background:var(--zk-s);border-color:var(--zk-mu)}
.msm-zonnestudio-kennis .zk-all:focus-visible,.msm-zonnestudio-kennis .zk-card:focus-visible{outline:2px solid var(--zk-p);outline-offset:4px}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-all{width:auto}}

/* glitch-text: echte h2 transparant zodra het canvas tekent; originele glitch-text.css gescoped zonder min-height 400 */
.msm-zonnestudio-kennis .zk-title.is-glitch{color:transparent}
.msm-zonnestudio-kennis .zk-glitch{position:absolute;display:block;z-index:1}
.msm-zonnestudio-kennis .zk-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-kennis .zk-glitch .glitch-text-canvas{width:100%;height:100%;display:block;cursor:default;touch-action:auto;letter-spacing:normal}

/* raster: mt-12 sm:mt-16 grid-cols-1 gap-10 md:grid-cols-2 md:gap-8 lg:grid-cols-4 lg:gap-10 */
.msm-zonnestudio-kennis .zk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:48px}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-grid{margin-top:64px}}
@media (min-width:768px){.msm-zonnestudio-kennis .zk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (min-width:1024px){.msm-zonnestudio-kennis .zk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}
/* kaart: group block rounded-3xl; poster relative aspect-4/5 overflow-hidden rounded-3xl */
.msm-zonnestudio-kennis .zk-card{display:block;min-width:0;border-radius:24px;color:inherit;text-decoration:none}
.msm-zonnestudio-kennis .zk-poster{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:24px;background:var(--zk-s)}
.msm-zonnestudio-kennis .zk-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--zk-ease)}
.msm-zonnestudio-kennis .zk-card:hover .zk-img{transform:scale(1.05)}
/* balk: absolute inset-x-4 bottom-4 flex items-center justify-between gap-3 rounded-2xl border bg/90 p-3.5 backdrop-blur */
.msm-zonnestudio-kennis .zk-bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid color-mix(in srgb,var(--zk-l) 70%,transparent);border-radius:16px;background:color-mix(in srgb,var(--zk-s) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.msm-zonnestudio-kennis .zk-bar-text{display:flex;align-items:center;gap:10px;min-width:0;color:var(--zk-ink);font-size:14px;font-weight:500;line-height:1.3}
.msm-zonnestudio-kennis .zk-cat,.msm-zonnestudio-kennis .zk-time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msm-zonnestudio-kennis .zk-time{font-weight:400;color:var(--zk-mu)}
.msm-zonnestudio-kennis .zk-sep{flex:0 0 auto;width:12px;height:1px;background:var(--zk-mu)}
/* rond vakje: grid h-9 w-9 rounded-full in de inktkleur; bij hover x 2 y -2 in 0,2 s */
.msm-zonnestudio-kennis .zk-go{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--zk-ink);color:var(--zk-bg);transition:transform .2s var(--zk-ease)}
.msm-zonnestudio-kennis .zk-card:hover .zk-go{transform:translate(2px,-2px)}
/* titel: mt-3 text-xl lg:text-2xl medium leading-snug tracking-tight, hover kleur in 0,2 s; samenvatting line-clamp 2 */
.msm-zonnestudio-kennis .zk-post-title{display:block;margin-top:24px;font:600 20px/1.35 var(--m-font-display,'Syne','Arial Black',sans-serif);letter-spacing:-.02em;color:var(--zk-ink);text-wrap:balance;transition:color .2s}
@media (min-width:1024px){.msm-zonnestudio-kennis .zk-post-title{font-size:22px}}
.msm-zonnestudio-kennis .zk-card:hover .zk-post-title{color:var(--zk-p)}
.msm-zonnestudio-kennis .zk-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:12px;color:var(--zk-mu);font-size:14px;line-height:1.625}
@media (min-width:640px){.msm-zonnestudio-kennis .zk-desc{font-size:16px}}
.msm-zonnestudio-kennis .zk-foot{margin:40px 0 0;color:var(--zk-mu);font-size:13px}

@media (prefers-reduced-motion:reduce){
  .msm-zonnestudio-kennis .zk-img,.msm-zonnestudio-kennis .zk-go,.msm-zonnestudio-kennis .zk-post-title,.msm-zonnestudio-kennis .zk-all{transition:none}
  .msm-zonnestudio-kennis .zk-card:hover .zk-img{transform:none}
  .msm-zonnestudio-kennis .zk-card:hover .zk-go{transform:none}
}