/* woonwinkel-kennis: block-port van ReactBitsPro Blocks/blog-8 (filterable changelog with live search).
   Tailwind vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens (lichte variant van de bron).
   Sectie py 64/80/96 px 16/24/32; max-w 1400; kop max-w-2xl met h2 36/48/60 px medium tracking-tight en
   intro mt 16 16/18 px leading-relaxed; werkbalk mt 40 flex-col gap 16, vanaf 1024 px rij items-center
   justify-between: filtergroep (role group) flex gap 4 overflow-x auto rounded-full --m-bg p 4 (sm: w-fit)
   met knoppen rounded-full px 16 py 8 14 px medium en één reizende pil (absolute, rounded-full, inktkleur,
   0,35 s ease [0.22,1,0.36,1]) onder de actieve knop (tekst in de achtergrondkleur, anders gedempt met
   hover naar de inktkleur, 0,2 s); zoekveld w-full lg:w-80 met icoon links op 16 px en input h 44
   rounded-full rand pl 44 pr 16 14 px, focus rand in de inktkleur met ring; aria-live regel mt 40 14 px;
   raster mt 24 grid 1/2/3 kolommen gap-x 32 gap-y 48; kaart als link rounded-2xl met beeld 16:10
   rounded-2xl dat bij hover 1,05 schaalt in 0,45 s, categorielabel rechtsboven (bg/90 px 12 py 4 12 px
   medium schaduw blur), meta mt 20 flex gap 10 12 px, titel mt 10 18/20 px semibold leading-snug die bij
   hover gedempt kleurt (0,2 s) en samenvatting mt 8 14 px leading-relaxed line-clamp 2; lege staat mt 24
   rounded-3xl gestippelde rand py 80 gecentreerd met icoon 32 px, titel 16 px medium, tekst 14 px en knop
   mt 24 rounded-full border px 20 py 10. De layout-animatie (0,4 s), dekking 0,25 s, y 0,35 s en de
   entrees (stagger 0,1; 24 px; 0,6 s) zitten in module.js. De ronde scheidingsspan is een tekstpuntje. */
.msm-woonwinkel-kennis{--wk-p:var(--m-primary,#9a5237);--wk-bg:var(--m-bg,#dfddd8);--wk-ink:var(--m-ink,#252628);--wk-s:var(--m-surface,#f7f6f2);--wk-mu:var(--m-muted,#6b6d6e);--wk-a:var(--m-accent2,#c48a6e);--wk-l:var(--m-line,#c8c5be);--wk-ease:cubic-bezier(.22,1,.36,1);box-sizing:border-box;scroll-margin-top:112px;width:100%;padding:64px 16px;background:var(--wk-s);color:var(--wk-ink);font-family:var(--m-font-body,'Manrope',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-woonwinkel-kennis *{box-sizing:border-box}
@media (min-width:640px){.msm-woonwinkel-kennis{padding:80px 24px}}
@media (min-width:1024px){.msm-woonwinkel-kennis{padding:96px 32px}}
.msm-woonwinkel-kennis .wk-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kop: max-w-2xl; h2 4xl/5xl/6xl font-medium tracking-tight; p mt-4 16/18 */
.msm-woonwinkel-kennis .wk-head{max-width:672px}
.msm-woonwinkel-kennis .wk-title{margin:0;font:400 clamp(36px,4.6vw,60px)/1.05 var(--m-font-display,'Instrument Serif',Georgia,serif);letter-spacing:-.015em;color:var(--wk-ink);text-wrap:balance}
.msm-woonwinkel-kennis .wk-intro{margin:16px 0 0;color:var(--wk-mu);font-size:16px;line-height:1.625;text-wrap:pretty}
@media (min-width:640px){.msm-woonwinkel-kennis .wk-intro{font-size:18px}}

/* werkbalk: mt-10 flex-col gap-4 lg:flex-row lg:items-center lg:justify-between */
.msm-woonwinkel-kennis .wk-tools{display:flex;flex-direction:column;gap:16px;margin-top:40px}
@media (min-width:1024px){.msm-woonwinkel-kennis .wk-tools{flex-direction:row;align-items:center;justify-content:space-between}}
/* filtergroep: flex w-full items-center gap-1 overflow-x-auto rounded-full bg p-1 sm:w-fit */
.msm-woonwinkel-kennis .wk-filters{position:relative;display:flex;align-items:center;gap:4px;width:100%;overflow-x:auto;padding:4px;border-radius:999px;background:var(--wk-bg);scrollbar-width:none}
.msm-woonwinkel-kennis .wk-filters::-webkit-scrollbar{display:none}
@media (min-width:640px){.msm-woonwinkel-kennis .wk-filters{width:fit-content}}
/* reizende pil: layoutId blog8-active-filter, absolute inset-0 rounded-full in de inktkleur, 0,35 s */
.msm-woonwinkel-kennis .wk-pill-bg{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;background:var(--wk-ink);opacity:0;transition:transform .35s var(--wk-ease),width .35s var(--wk-ease),opacity .2s}
.msm-woonwinkel-kennis .wk-pill-bg.is-ready{opacity:1}
/* knop: relative shrink-0 whitespace-nowrap rounded-full px-4 py-2 14 px medium; tekst z-10 transition-colors 0,2 s */
.msm-woonwinkel-kennis .wk-filter{position:relative;flex:0 0 auto;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--wk-mu);font-family:inherit;font-size:14px;font-weight:500;line-height:1.45;white-space:nowrap;cursor:pointer}
.msm-woonwinkel-kennis .wk-filter span{position:relative;z-index:1;transition:color .2s}
.msm-woonwinkel-kennis .wk-filter:hover span{color:var(--wk-ink)}
.msm-woonwinkel-kennis .wk-filter[aria-pressed="true"] span{color:var(--wk-s)}
.msm-woonwinkel-kennis .wk-filter:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--wk-ink) 20%,transparent)}
/* zoekveld: relative w-full lg:w-80; icoon absolute left-4 16 px; input h-11 rounded-full border pl-11 pr-4 */
.msm-woonwinkel-kennis .wk-search{position:relative;display:block;width:100%}
@media (min-width:1024px){.msm-woonwinkel-kennis .wk-search{width:320px}}
.msm-woonwinkel-kennis .wk-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-search-input{width:100%;height:44px;padding:0 16px 0 44px;border:1px solid var(--wk-l);border-radius:999px;background:var(--wk-bg);color:var(--wk-ink);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.msm-woonwinkel-kennis .wk-search-input::placeholder{color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-search-input:focus{border-color:var(--wk-ink)}
.msm-woonwinkel-kennis .wk-search-input:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--wk-ink) 10%,transparent)}
.msm-woonwinkel-kennis .wk-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* aria-live regel: mt-10 text-sm gedempt met cijfers medium in de inktkleur */
.msm-woonwinkel-kennis .wk-count{margin:40px 0 0;font-size:14px;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-count-num{font-weight:500;color:var(--wk-ink)}

/* raster: mt-6 grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 */
.msm-woonwinkel-kennis .wk-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:48px 32px;margin-top:24px}
@media (min-width:640px){.msm-woonwinkel-kennis .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.msm-woonwinkel-kennis .wk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.msm-woonwinkel-kennis .wk-grid[hidden]{display:none}
.msm-woonwinkel-kennis .wk-post{min-width:0;margin:0}
.msm-woonwinkel-kennis .wk-post[hidden]{display:none}
.msm-woonwinkel-kennis .wk-post.is-leaving{position:absolute;pointer-events:none}
/* kaart: group block rounded-2xl; focusring */
.msm-woonwinkel-kennis .wk-card{display:block;border-radius:16px;color:inherit;text-decoration:none}
.msm-woonwinkel-kennis .wk-card:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--wk-ink) 20%,transparent)}
/* beeld: aspect 16/10 overflow-hidden rounded-2xl bg; img object-cover hover scale 1,05 in 0,45 s */
.msm-woonwinkel-kennis .wk-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:var(--wk-bg)}
.msm-woonwinkel-kennis .wk-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--wk-ease)}
.msm-woonwinkel-kennis .wk-card:hover .wk-media img{transform:scale(1.05)}
/* categorielabel: absolute right-3 top-3 rounded-full bg/90 px-3 py-1 12 px medium shadow-sm backdrop-blur */
.msm-woonwinkel-kennis .wk-tag{position:absolute;right:12px;top:12px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--wk-s) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--wk-ink);font-size:12px;font-weight:500;line-height:1.35}
/* meta: mt-5 flex items-center gap-2.5 12 px gedempt; de ronde span van de bron is een tekstpuntje */
.msm-woonwinkel-kennis .wk-meta{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:12px;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-sep{opacity:.7}
/* titel: mt-2.5 18/20 px semibold leading-snug tracking-tight, group-hover gedempt in 0,2 s */
.msm-woonwinkel-kennis .wk-post-title{display:block;margin-top:10px;font-size:18px;font-weight:600;line-height:1.375;letter-spacing:-.015em;color:var(--wk-ink);text-wrap:balance;transition:color .2s}
@media (min-width:640px){.msm-woonwinkel-kennis .wk-post-title{font-size:20px}}
.msm-woonwinkel-kennis .wk-card:hover .wk-post-title{color:var(--wk-mu)}
/* samenvatting: mt-2 14 px leading-relaxed line-clamp-2 */
.msm-woonwinkel-kennis .wk-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:8px;color:var(--wk-mu);font-size:14px;line-height:1.625}

/* lege staat: mt-6 flex-col items-center rounded-3xl border-dashed py-20 text-center */
.msm-woonwinkel-kennis .wk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:24px;padding:80px 16px;border:1px dashed var(--wk-l);border-radius:24px;text-align:center;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-empty[hidden]{display:none}
.msm-woonwinkel-kennis .wk-empty-title{margin:16px 0 0;font-size:16px;font-weight:500;color:var(--wk-ink)}
.msm-woonwinkel-kennis .wk-empty-text{margin:4px 0 0;font-size:14px;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-reset{margin-top:24px;padding:10px 20px;border:1px solid color-mix(in srgb,var(--wk-l) 60%,var(--wk-mu));border-radius:999px;background:transparent;color:var(--wk-ink);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}
.msm-woonwinkel-kennis .wk-reset:hover{background:var(--wk-bg)}
.msm-woonwinkel-kennis .wk-reset:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--wk-ink) 20%,transparent)}

/* slotregel (toegevoegd): link naar alle artikelen en de redactieregel */
.msm-woonwinkel-kennis .wk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:48px 0 0;font-size:14px;color:var(--wk-mu)}
.msm-woonwinkel-kennis .wk-all{color:var(--wk-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--wk-l);transition:text-decoration-color .2s}
.msm-woonwinkel-kennis .wk-all:hover{text-decoration-color:var(--wk-p)}
.msm-woonwinkel-kennis .wk-all:focus-visible{outline:2px solid var(--wk-ink);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .msm-woonwinkel-kennis .wk-pill-bg,.msm-woonwinkel-kennis .wk-media img,.msm-woonwinkel-kennis .wk-post-title,.msm-woonwinkel-kennis .wk-filter span,.msm-woonwinkel-kennis .wk-search-input,.msm-woonwinkel-kennis .wk-reset,.msm-woonwinkel-kennis .wk-all{transition:none}
  .msm-woonwinkel-kennis .wk-card:hover .wk-media img{transform:none}
}