/* snackbar-reacties 1.0.0 · waaier van reactiekaartjes naar ReactBits BounceCards, eigen vanilla CSS/JS.
   Kleuren en fonts alleen via --m-*-tokens; tinten met color-mix. */
.msm-snackbar-reacties {
  --rc-ink: var(--m-ink, #17120e);
  --rc-paper: var(--m-bg, #f7e8bb);
  --rc-hot: var(--m-primary, #f04b23);
  display: block;
  scroll-margin-top: 114px;
  background: var(--rc-ink);
  color: var(--rc-paper);
  font: 500 15px/1.5 var(--m-font-body, Arial, sans-serif);
  padding: clamp(56px, 8vw, 112px) clamp(16px, 5vw, 64px);
}
.msm-snackbar-reacties *,
.msm-snackbar-reacties *::before,
.msm-snackbar-reacties *::after { box-sizing: border-box; }
.msm-snackbar-reacties .rc-wrap { max-width: 1100px; margin: 0 auto; }
.msm-snackbar-reacties .rc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px 48px;
  align-items: end;
  margin: 0 0 30px;
}
.msm-snackbar-reacties .rc-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-hot);
}
.msm-snackbar-reacties h2 {
  margin: 0;
  font: 900 clamp(44px, 7vw, 96px)/0.84 var(--m-font-display, Impact, sans-serif);
  letter-spacing: -0.02em;
}
.msm-snackbar-reacties .rc-intro { margin: 0; max-width: 42ch; color: color-mix(in srgb, var(--rc-paper) 82%, transparent); }

/* Podium: zonder JavaScript een rij kaartjes, met JavaScript een waaier rond het midden. */
.msm-snackbar-reacties .rc-stage {
  --rc-size: 240px;
  --rc-spread: 150px;
  --rc-push: 130px;
  position: relative;
  margin: 0 6px;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.msm-snackbar-reacties .rc-cards {
  list-style: none;
  margin: 0;
  padding: 6px 6px 14px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
}
.msm-snackbar-reacties.rc-js .rc-stage { height: 400px; overflow: hidden; }
.msm-snackbar-reacties.rc-js .rc-cards { display: block; height: 100%; padding: 0; overflow: visible; }
.msm-snackbar-reacties .rc-card {
  flex: none;
  width: var(--rc-size);
  min-height: 280px;
  padding: 22px 22px 20px;
  display: grid;
  align-content: start;
  gap: 12px;
  background: var(--rc-paper);
  color: var(--rc-ink);
  box-shadow: 5px 0 var(--rc-paper), -5px 0 var(--rc-paper), 0 5px var(--rc-paper), 0 -5px var(--rc-paper);
  outline: none;
  cursor: default;
  transition: box-shadow 0.3s ease;
}
.msm-snackbar-reacties.rc-js .rc-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
.msm-snackbar-reacties .rc-card[data-active] {
  box-shadow: 5px 0 var(--rc-paper), -5px 0 var(--rc-paper), 0 5px var(--rc-paper), 0 -5px var(--rc-paper), 0 26px 50px -16px rgba(0, 0, 0, 0.7);
}
.msm-snackbar-reacties .rc-card:focus-visible { box-shadow: 5px 0 var(--rc-hot), -5px 0 var(--rc-hot), 0 5px var(--rc-hot), 0 -5px var(--rc-hot), 0 26px 50px -16px rgba(0, 0, 0, 0.7); }
.msm-snackbar-reacties .rc-tag {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-ink);
}
.msm-snackbar-reacties blockquote { margin: 0; }
.msm-snackbar-reacties blockquote p { margin: 0; font: 700 17px/1.32 var(--m-font-body, Arial, sans-serif); }
.msm-snackbar-reacties .rc-who {
  display: grid;
  gap: 1px;
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 2px solid var(--rc-ink);
  font-size: 12px;
}
.msm-snackbar-reacties .rc-who b { font-size: 14px; }
.msm-snackbar-reacties .rc-who span { color: color-mix(in srgb, var(--rc-ink) 62%, transparent); }
.msm-snackbar-reacties .rc-foot {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 2px solid color-mix(in srgb, var(--rc-paper) 22%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--rc-paper) 70%, transparent);
}

@media (max-width: 1060px) {
  .msm-snackbar-reacties .rc-stage { --rc-spread: 100px; --rc-push: 120px; }
}
@media (max-width: 760px) {
  .msm-snackbar-reacties { scroll-margin-top: 100px; }
  .msm-snackbar-reacties .rc-head { grid-template-columns: 1fr; gap: 12px; }
  .msm-snackbar-reacties .rc-stage { --rc-size: 212px; --rc-spread: 34px; --rc-push: 64px; }
  .msm-snackbar-reacties.rc-js .rc-stage { height: 372px; }
  .msm-snackbar-reacties .rc-card { min-height: 270px; padding: 20px 18px 18px; }
  .msm-snackbar-reacties blockquote p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-snackbar-reacties .rc-card { transition: none; }
  .msm-snackbar-reacties.rc-js .rc-card { transform: translate(-50%, -50%); }
}