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

/* Kaarten: donker vlak met pixelkader; de canvas ligt eronder, de tekst erboven. */
.msm-snackbar-waarom .wa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 6px;
}
.msm-snackbar-waarom .wa-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 340px;
  padding: 26px;
  background: var(--wa-ink);
  color: var(--wa-paper);
  box-shadow: 6px 0 var(--wa-ink), -6px 0 var(--wa-ink), 0 6px var(--wa-ink), 0 -6px var(--wa-ink);
  overflow: hidden;
  isolation: isolate;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}
/* Scrim tussen canvas en tekst: de pixels blijven boven zichtbaar, de leesregels onderin rustig. */
.msm-snackbar-waarom .wa-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  z-index: 1;
  background: linear-gradient(0deg, var(--wa-ink) 42%, color-mix(in srgb, var(--wa-ink) 70%, transparent) 70%, transparent);
  pointer-events: none;
}
.msm-snackbar-waarom .wa-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.26s ease;
}
.msm-snackbar-waarom .wa-card[data-active]::after { border-color: color-mix(in srgb, var(--wa-paper) 28%, transparent); }
.msm-snackbar-waarom .wa-card:focus-visible::after { border-color: var(--wa-paper); }
.msm-snackbar-waarom .wa-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.msm-snackbar-waarom .wa-body { position: relative; z-index: 2; display: grid; gap: 10px; padding-bottom: 136px; }
.msm-snackbar-waarom .wa-num {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--wa-hot);
}
.msm-snackbar-waarom .wa-photo {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 136px;
  height: 136px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.msm-snackbar-waarom h3 {
  margin: 4px 0 0;
  font: 900 clamp(26px, 2.6vw, 34px)/0.92 var(--m-font-display, Impact, sans-serif);
}
.msm-snackbar-waarom .wa-body p:last-child { margin: 0; color: color-mix(in srgb, var(--wa-paper) 80%, transparent); }

@media (max-width: 860px) {
  .msm-snackbar-waarom .wa-cards { grid-template-columns: 1fr; gap: 24px; }
  .msm-snackbar-waarom .wa-card { min-height: 360px; }
}
@media (max-width: 700px) {
  .msm-snackbar-waarom { scroll-margin-top: 100px; }
  .msm-snackbar-waarom .wa-head { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-snackbar-waarom .wa-card::after { transition: none; }
}