/* woonwinkel-reacties: block-port van ReactBitsPro Blocks/showcase-8 (snap carousel of project cards).
   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 flex-col, vanaf 1024 px rij items-end justify-between
   gap 32, mb 40/48; h2 30/36/48 px semibold leading 1.05 tracking-tight, intro mt 20 16/18 px max-w-xl;
   twee ronde pijlknoppen van 44 px (rand, disabled dekking 0,35, hover lichte achtergrond, 0,2 s);
   baan -mx 16/24/32 met flex gap 20/24, overflow-x auto, snap-x mandatory, px 16/24/32 pb 16, scrollbar
   verborgen; kaart 78vw max 420, vanaf 640 px 400, vanaf 1024 px 440, snap-start scroll-ml 16/24/32;
   paneel aspect 4:3 rounded-2xl rand met pill links-boven (px 12 py 4 12 px medium, blur) en hover-schaal
   1,04 in 0,5 s ease-out; voet mt 20 px 4 met h3 20/24 px semibold truncate, meta mt 4 14 px gedempt en
   een ronde knop van 40 px die bij hover vult in de inktkleur (0,2 s) met een pijl die 2 px naar rechtsboven
   schuift (0,2 s ease-out); voortgangsrij mt 32 gap 24 met lijn van 2 px (origin-left scaleX) en teller
   12 px tracking .12em. De entrees (stagger 0,1 en 0,09; 20/32 px; 0,6/0,65 s ease [0.22,1,0.36,1]) en het
   scrollgedrag zitten in module.js. Het monospace-font van de teller is het merkfont met tabulaire cijfers. */
.msm-woonwinkel-reacties{--wr-p:var(--m-primary,#9a5237);--wr-bg:var(--m-bg,#dfddd8);--wr-ink:var(--m-ink,#252628);--wr-s:var(--m-surface,#f7f6f2);--wr-mu:var(--m-muted,#6b6d6e);--wr-a:var(--m-accent2,#c48a6e);--wr-l:var(--m-line,#c8c5be);--wr-ease:cubic-bezier(.22,1,.36,1);box-sizing:border-box;scroll-margin-top:112px;width:100%;padding:64px 16px;background:var(--wr-bg);color:var(--wr-ink);font-family:var(--m-font-body,'Manrope',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-woonwinkel-reacties *{box-sizing:border-box}
@media (min-width:640px){.msm-woonwinkel-reacties{padding:80px 24px}}
@media (min-width:1024px){.msm-woonwinkel-reacties{padding:96px 32px}}
.msm-woonwinkel-reacties .wr-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kop: flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-10 sm:mb-12 */
.msm-woonwinkel-reacties .wr-head{display:flex;flex-direction:column;gap:32px;margin-bottom:40px}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-head{margin-bottom:48px}}
@media (min-width:1024px){.msm-woonwinkel-reacties .wr-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.msm-woonwinkel-reacties .wr-head-text{max-width:672px}
/* toegevoegd label in een licht vlak van --m-accent2 */
.msm-woonwinkel-reacties .wr-label{display:inline-flex;margin:0 0 16px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--wr-a) 28%,var(--wr-bg));color:var(--wr-ink);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.msm-woonwinkel-reacties .wr-title{margin:0;font:400 clamp(30px,3.8vw,48px)/1.05 var(--m-font-display,'Instrument Serif',Georgia,serif);letter-spacing:-.015em;color:var(--wr-ink);text-wrap:balance}
.msm-woonwinkel-reacties .wr-intro{margin:20px 0 0;max-width:576px;color:var(--wr-mu);font-size:16px;line-height:1.625;text-wrap:pretty}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-intro{font-size:18px}}
/* pijlknoppen: grid h-11 w-11 rounded-full border, enabled:hover bg, disabled opacity .35, 0,2 s */
.msm-woonwinkel-reacties .wr-controls{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.msm-woonwinkel-reacties .wr-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--wr-l);border-radius:999px;background:transparent;color:var(--wr-ink);cursor:pointer;transition:background-color .2s,border-color .2s}
.msm-woonwinkel-reacties .wr-arrow:not(:disabled):hover{background:var(--wr-s);border-color:color-mix(in srgb,var(--wr-l) 60%,var(--wr-ink))}
.msm-woonwinkel-reacties .wr-arrow:disabled{opacity:.35;cursor:default}
.msm-woonwinkel-reacties .wr-arrow:focus-visible,.msm-woonwinkel-reacties .wr-track:focus-visible{outline:2px solid var(--wr-ink);outline-offset:2px}

/* baan: -mx 16/24/32; flex gap 20/24 overflow-x-auto overscroll-x-contain snap-x snap-mandatory px pb-4 */
.msm-woonwinkel-reacties .wr-bleed{margin:0 -16px}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-bleed{margin:0 -24px}}
@media (min-width:1024px){.msm-woonwinkel-reacties .wr-bleed{margin:0 -32px}}
.msm-woonwinkel-reacties .wr-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 16px 16px;scrollbar-width:none;-ms-overflow-style:none}
.msm-woonwinkel-reacties .wr-track::-webkit-scrollbar{display:none}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-track{gap:24px;padding:0 24px 16px}}
@media (min-width:1024px){.msm-woonwinkel-reacties .wr-track{padding:0 32px 16px}}
/* kaart: w-[78vw] max-w-[420px] sm:w-[400px] lg:w-[440px] shrink-0 snap-start scroll-ml */
.msm-woonwinkel-reacties .wr-card{position:relative;display:block;flex:0 0 auto;width:78vw;max-width:420px;scroll-snap-align:start;scroll-margin-left:16px;color:inherit;text-decoration:none;cursor:pointer}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-card{width:400px;scroll-margin-left:24px}}
@media (min-width:1024px){.msm-woonwinkel-reacties .wr-card{width:440px;scroll-margin-left:32px}}
.msm-woonwinkel-reacties .wr-card:focus-visible{outline:2px solid var(--wr-ink);outline-offset:4px;border-radius:16px}
/* paneel: aspect 4/3 overflow-hidden rounded-2xl border bg; het beeldvlak van de bron draagt hier het citaat */
.msm-woonwinkel-reacties .wr-panel{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;overflow:hidden;padding:24px;border:1px solid var(--wr-l);border-radius:16px;background:var(--wr-s)}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-panel{padding:28px}}
.msm-woonwinkel-reacties .wr-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--wr-a) 22%,transparent),transparent 60%);transform:scale(1);transform-origin:center;transition:transform .5s cubic-bezier(0,0,.2,1)}
.msm-woonwinkel-reacties .wr-card:hover .wr-panel::before{transform:scale(1.04)}
.msm-woonwinkel-reacties .wr-quote{position:relative;display:block;font:400 clamp(22px,2.1vw,28px)/1.25 var(--m-font-display,'Instrument Serif',Georgia,serif);letter-spacing:-.01em;color:var(--wr-ink);text-wrap:pretty}
.msm-woonwinkel-reacties .wr-quote::before{content:"\201C";color:var(--wr-p)}
.msm-woonwinkel-reacties .wr-quote::after{content:"\201D";color:var(--wr-p)}
/* pill: absolute left-4 top-4 rounded-full bg/90 px-3 py-1 text-xs medium backdrop-blur-sm */
.msm-woonwinkel-reacties .wr-pill{position:absolute;left:16px;top:16px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--wr-bg) 90%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--wr-ink);font-size:12px;font-weight:500;line-height:1.35}
/* voet: mt-5 flex items-start justify-between gap-4 px-1; h3 xl/2xl semibold truncate; p mt-1 text-sm */
.msm-woonwinkel-reacties .wr-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:20px;padding:0 4px}
.msm-woonwinkel-reacties .wr-foot-text{display:block;min-width:0}
.msm-woonwinkel-reacties .wr-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--wr-ink)}
@media (min-width:640px){.msm-woonwinkel-reacties .wr-name{font-size:24px}}
.msm-woonwinkel-reacties .wr-meta{display:block;margin-top:4px;font-size:14px;color:var(--wr-mu)}
/* ronde knop 40 px: border, group-hover bg ink/text bg; pijl x 2 y -2 in 0,2 s easeOut */
.msm-woonwinkel-reacties .wr-go{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;margin-top:4px;border:1px solid var(--wr-l);border-radius:999px;color:var(--wr-ink);transition:background-color .2s,border-color .2s,color .2s}
.msm-woonwinkel-reacties .wr-card:hover .wr-go{background:var(--wr-ink);border-color:var(--wr-ink);color:var(--wr-bg)}
.msm-woonwinkel-reacties .wr-go-icon{display:grid;place-items:center;transition:transform .2s cubic-bezier(0,0,.58,1)}
.msm-woonwinkel-reacties .wr-card:hover .wr-go-icon{transform:translate(2px,-2px)}
.msm-woonwinkel-reacties .wr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* voortgang: mt-8 flex items-center gap-6; lijn h-0.5 flex-1 rounded-full; teller text-xs tracking .12em */
.msm-woonwinkel-reacties .wr-progress-row{display:flex;align-items:center;gap:24px;margin-top:32px}
.msm-woonwinkel-reacties .wr-progress{position:relative;flex:1 1 auto;height:2px;overflow:hidden;border-radius:999px;background:var(--wr-l)}
.msm-woonwinkel-reacties .wr-progress-bar{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:999px;background:var(--wr-ink)}
.msm-woonwinkel-reacties .wr-counter{margin:0;font-size:12px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--wr-ink)}
.msm-woonwinkel-reacties .wr-counter-total{color:var(--wr-mu)}

@media (prefers-reduced-motion:reduce){
  .msm-woonwinkel-reacties .wr-track{scroll-behavior:auto}
  .msm-woonwinkel-reacties .wr-panel::before,.msm-woonwinkel-reacties .wr-go,.msm-woonwinkel-reacties .wr-go-icon,.msm-woonwinkel-reacties .wr-arrow{transition:none}
  .msm-woonwinkel-reacties .wr-card:hover .wr-panel::before{transform:none}
  .msm-woonwinkel-reacties .wr-card:hover .wr-go-icon{transform:none}
}