/* wijnhandel-kennis: block-port van ReactBitsPro Blocks/blog-7 (blog grid with a tag filter).
   Tailwind vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens (dark-variant van de bron).
   Sectie py 48/64 px 16/24/32; max-w 1400; raster 1 kolom gap 32, vanaf 1024 px 220px 1fr gap 48;
   zijkolom met kop 14 px semibold en pill-knoppen (rounded-full border px 14 py 6 14 px, actief gevuld
   in de inktkleur met tekst in de achtergrondkleur); rechts raster van twee kolommen vanaf 768 px met
   gap 32/40; kaart flex-col gap 20 met beeld 16:11 rounded-2xl dat bij hover 1,03 schaalt in 0,5 s,
   tag-pill px 12 py 4 12 px medium, serif titel 24/30 px leading-tight truncate, tekst 14/16 px line-clamp 2
   en een metaregel 12/14 px. whileHover y -4 is de standaardveer van motion (stiffness 500, damping 25)
   als linear()-curve; de filteranimatie (veer 260/30, dekking 0,25 s, stagger 0,03) zit in module.js. */
.msm-wijnhandel-kennis{--wn-p:var(--m-primary,#c06945);--wn-bg:var(--m-bg,#211718);--wn-ink:var(--m-ink,#f3ece4);--wn-s:var(--m-surface,#2b1d1f);--wn-mu:var(--m-muted,#b4a398);--wn-a:var(--m-accent2,#7a2f3b);--wn-l:var(--m-line,#3d2d2f);--wn-ease:cubic-bezier(.22,1,.36,1);--wn-spring:linear(0,0.089,0.284,0.503,0.709,0.878,1.005,1.078,1.112,1.117,1.102,1.079,1.053,1.03,1.01,0.997,0.99,0.986,0.986,0.988,0.991,0.994,0.997,0.999,1.001,1.001,1.002,1.002,1.001,1.001,1.001,1,1);box-sizing:border-box;scroll-margin-top:112px;display:flex;align-items:flex-start;width:100%;padding:48px 16px;background:var(--wn-bg);color:var(--wn-ink);font-family:var(--m-font-body,'Instrument Sans',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-wijnhandel-kennis *{box-sizing:border-box}
@media (min-width:640px){.msm-wijnhandel-kennis{padding:64px 24px}}
@media (min-width:1024px){.msm-wijnhandel-kennis{padding:80px 32px}}
.msm-wijnhandel-kennis .wn-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kopregel met de link Alle artikelen (toegevoegd; de bron heeft alleen de zijkolom) */
.msm-wijnhandel-kennis .wn-head{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
@media (min-width:768px){.msm-wijnhandel-kennis .wn-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}}
.msm-wijnhandel-kennis .wn-head-text{display:flex;flex-direction:column;gap:10px;max-width:640px}
.msm-wijnhandel-kennis .wn-kicker{margin:0;color:var(--wn-p);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.msm-wijnhandel-kennis .wn-title{margin:0;font:400 clamp(32px,4.2vw,52px)/1.08 var(--m-font-display,'Fraunces',Georgia,serif);letter-spacing:-.02em;color:var(--wn-ink)}
.msm-wijnhandel-kennis .wn-intro{margin:0;color:var(--wn-mu);font-size:clamp(16px,1.3vw,18px);line-height:1.6}
.msm-wijnhandel-kennis .wn-all{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;flex:0 0 auto;min-height:44px;padding:10px 20px;border:1px solid var(--wn-p);border-radius:999px;color:var(--wn-ink);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s var(--wn-ease),color .2s var(--wn-ease)}
.msm-wijnhandel-kennis .wn-all:hover{background:var(--wn-p);color:var(--wn-bg)}
.msm-wijnhandel-kennis .wn-all:focus-visible,.msm-wijnhandel-kennis .wn-topic:focus-visible{outline:2px solid var(--wn-p);outline-offset:2px}
@media (min-width:768px){.msm-wijnhandel-kennis .wn-all{align-self:flex-end}}

/* raster: grid-cols-1 gap-8, lg:grid-cols-[220px_1fr] lg:gap-12 */
.msm-wijnhandel-kennis .wn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:1024px){.msm-wijnhandel-kennis .wn-grid{grid-template-columns:220px minmax(0,1fr);gap:48px}}
/* zijkolom: flex-col gap-3; h3 14 px semibold; knoppen flex-col items-start gap-2 */
.msm-wijnhandel-kennis .wn-aside{display:flex;flex-direction:column;gap:12px;align-self:start}
@media (min-width:1024px){.msm-wijnhandel-kennis .wn-aside{position:sticky;top:112px}}
.msm-wijnhandel-kennis .wn-aside-title{margin:0;font-size:14px;font-weight:600;color:var(--wn-ink)}
.msm-wijnhandel-kennis .wn-topics{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
@media (min-width:1024px){.msm-wijnhandel-kennis .wn-topics{flex-direction:column}}
.msm-wijnhandel-kennis .wn-topic{padding:6px 14px;border:1px solid var(--wn-l);border-radius:999px;background:transparent;color:var(--wn-ink);font-family:inherit;font-size:14px;line-height:1.45;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.msm-wijnhandel-kennis .wn-topic:hover{background:var(--wn-s)}
.msm-wijnhandel-kennis .wn-topic[aria-pressed="true"]{border-color:var(--wn-ink);background:var(--wn-ink);color:var(--wn-bg)}
.msm-wijnhandel-kennis .wn-status{margin:4px 0 0;font-size:13px;color:var(--wn-mu)}

/* artikelen: grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10 */
.msm-wijnhandel-kennis .wn-posts{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;min-width:0}
@media (min-width:640px){.msm-wijnhandel-kennis .wn-posts{gap:40px}}
@media (min-width:768px){.msm-wijnhandel-kennis .wn-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.msm-wijnhandel-kennis .wn-post{min-width:0;margin:0}
.msm-wijnhandel-kennis .wn-post[hidden]{display:none}
.msm-wijnhandel-kennis .wn-post.is-leaving{position:absolute;pointer-events:none}
/* kaart: flex-col gap-5 cursor-pointer group, hover y -4 (motion-standaardveer) */
.msm-wijnhandel-kennis .wn-card{display:flex;flex-direction:column;gap:20px;color:inherit;text-decoration:none;transition:transform .616s var(--wn-spring)}
.msm-wijnhandel-kennis .wn-card:hover{transform:translateY(-4px)}
.msm-wijnhandel-kennis .wn-card:focus-visible{outline:2px solid var(--wn-p);outline-offset:6px;border-radius:16px}
/* beeld: aspect 16/11 rounded-2xl bg overflow-hidden; img object-cover, group-hover scale 1,03 in 0,5 s */
.msm-wijnhandel-kennis .wn-media{display:block;aspect-ratio:16/11;overflow:hidden;border-radius:16px;background:var(--wn-s)}
.msm-wijnhandel-kennis .wn-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.msm-wijnhandel-kennis .wn-card:hover .wn-media img{transform:scale(1.03)}
.msm-wijnhandel-kennis .wn-body{display:flex;flex-direction:column;gap:12px;min-width:0}
/* tag: inline-flex self-start px-3 py-1 rounded-full 12 px medium; vier tinten uit --m-primary en --m-accent2 */
.msm-wijnhandel-kennis .wn-tag{display:inline-flex;align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.35}
.msm-wijnhandel-kennis .wn-tag-koppelen{background:color-mix(in srgb,var(--wn-p) 18%,var(--wn-bg));color:color-mix(in srgb,var(--wn-p) 80%,var(--wn-ink))}
.msm-wijnhandel-kennis .wn-tag-proeven{background:color-mix(in srgb,var(--wn-a) 35%,var(--wn-bg));color:color-mix(in srgb,var(--wn-a) 30%,var(--wn-ink))}
.msm-wijnhandel-kennis .wn-tag-alcoholvrij{background:color-mix(in srgb,var(--wn-mu) 16%,var(--wn-bg));color:var(--wn-mu)}
.msm-wijnhandel-kennis .wn-tag-bewaren{background:color-mix(in srgb,var(--wn-p) 10%,var(--wn-a) 20%);color:color-mix(in srgb,var(--wn-p) 50%,var(--wn-ink))}
/* titel: font-serif 24/30 px leading-tight truncate */
.msm-wijnhandel-kennis .wn-post-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 24px/1.25 var(--m-font-display,'Fraunces',Georgia,serif);color:var(--wn-ink);transition:color .2s}
.msm-wijnhandel-kennis .wn-card:hover .wn-post-title{color:var(--wn-p)}
@media (min-width:640px){.msm-wijnhandel-kennis .wn-post-title{font-size:30px}}
/* tekst: 14/16 px leading-relaxed line-clamp-2 */
.msm-wijnhandel-kennis .wn-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--wn-mu);font-size:14px;line-height:1.625}
@media (min-width:640px){.msm-wijnhandel-kennis .wn-desc{font-size:16px}}
/* metaregel: mt-1 flex items-center gap-3 12/14 px; de ronde spans van de bron zijn tekstpuntjes (huisregel) */
.msm-wijnhandel-kennis .wn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px;color:var(--wn-mu);font-size:12px}
@media (min-width:640px){.msm-wijnhandel-kennis .wn-meta{font-size:14px}}
.msm-wijnhandel-kennis .wn-sep{opacity:.6}

@media (prefers-reduced-motion:reduce){
  .msm-wijnhandel-kennis .wn-card,.msm-wijnhandel-kennis .wn-media img,.msm-wijnhandel-kennis .wn-all{transition:none}
  .msm-wijnhandel-kennis .wn-card:hover{transform:none}
  .msm-wijnhandel-kennis .wn-card:hover .wn-media img{transform:none}
}