/* fietsenwinkel-reacties 1.0.0 · voorbeeldreacties langs een fietspad, naar ReactBits CurvedLoop.
   Eigen vanilla CSS; kleuren en fonts alleen via --m-*-tokens, tinten met color-mix. */
.msm-fietsenwinkel-reacties {
  --rc-ink: var(--m-ink, #163a32);
  --rc-bg: var(--m-bg, #eee9df);
  --rc-hot: var(--m-primary, #ff5f45);
  --rc-lime: var(--m-surface, #dce9bd);
  display: block;
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--rc-ink);
  color: var(--rc-bg);
  font: 400 16px/1.55 var(--m-font-body, Arial, Helvetica, sans-serif);
  overflow: hidden;
}
.msm-fietsenwinkel-reacties *,
.msm-fietsenwinkel-reacties *::before,
.msm-fietsenwinkel-reacties *::after { box-sizing: border-box; }
.msm-fietsenwinkel-reacties .rc-inner { max-width: calc(1240px + 8vw); margin: 0 auto; padding: 0 4vw; }
.msm-fietsenwinkel-reacties .rc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 24px 6vw;
  align-items: end;
}
.msm-fietsenwinkel-reacties .rc-head > * { min-width: 0; }
.msm-fietsenwinkel-reacties .rc-eyebrow,
.msm-fietsenwinkel-reacties .rc-meta span {
  font: 700 10px/1.2 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.msm-fietsenwinkel-reacties .rc-eyebrow { margin: 0 0 18px; color: var(--rc-lime); }
.msm-fietsenwinkel-reacties h2 {
  margin: 0;
  font: 500 clamp(46px, 6.6vw, 96px)/0.88 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.055em;
}
.msm-fietsenwinkel-reacties .rc-lede { margin: 0; max-width: 40ch; font-size: 17px; color: color-mix(in srgb, var(--rc-bg) 88%, transparent); }

/* Het fietspad: rode slijtlaag met lichte randen, de tekst rijdt eroverheen. */
.msm-fietsenwinkel-reacties .rc-band {
  position: relative;
  margin: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.msm-fietsenwinkel-reacties .rc-band[data-drag] { cursor: grabbing; }
.msm-fietsenwinkel-reacties .rc-band:focus-visible { -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 3px var(--rc-hot); }
.msm-fietsenwinkel-reacties .rc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.msm-fietsenwinkel-reacties .rc-edge { fill: none; stroke: color-mix(in srgb, var(--rc-bg) 55%, transparent); stroke-width: 132; }
.msm-fietsenwinkel-reacties .rc-road { fill: none; stroke: color-mix(in srgb, var(--rc-hot) 52%, var(--rc-ink)); stroke-width: 120; }
.msm-fietsenwinkel-reacties .rc-text {
  fill: var(--rc-bg);
  font: italic 400 50px var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.01em;
  cursor: pointer;
}
.msm-fietsenwinkel-reacties .rc-text .rc-tag {
  fill: var(--rc-lime);
  font: normal 700 17px var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.msm-fietsenwinkel-reacties .rc-text .rc-sep { fill: var(--rc-hot); font-style: normal; }
.msm-fietsenwinkel-reacties .rc-measure { visibility: hidden; }

/* De reacties als lijst: leesbaar en klikbaar. */
.msm-fietsenwinkel-reacties .rc-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--rc-bg) 40%, transparent);
}
.msm-fietsenwinkel-reacties .rc-list li {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 12px;
  padding: 22px clamp(12px, 1.6vw, 22px) 6px 0;
}
.msm-fietsenwinkel-reacties .rc-list li + li { padding-left: clamp(12px, 1.6vw, 22px); border-left: 1px solid color-mix(in srgb, var(--rc-bg) 18%, transparent); }
.msm-fietsenwinkel-reacties .rc-list li[data-on] .rc-quote { color: var(--rc-lime); }
.msm-fietsenwinkel-reacties .rc-quote {
  margin: 0;
  font: 400 clamp(19px, 1.6vw, 23px)/1.25 var(--m-font-display, Georgia, "Times New Roman", serif);
  transition: color 0.25s;
}
.msm-fietsenwinkel-reacties .rc-quote::before { content: "\201C"; color: var(--rc-hot); }
.msm-fietsenwinkel-reacties .rc-quote::after { content: "\201D"; color: var(--rc-hot); }
.msm-fietsenwinkel-reacties .rc-meta { margin: 0; display: grid; gap: 4px; font-size: 14px; color: color-mix(in srgb, var(--rc-bg) 80%, transparent); }
.msm-fietsenwinkel-reacties .rc-meta span { color: var(--rc-lime); }
.msm-fietsenwinkel-reacties .rc-link {
  justify-self: start;
  color: var(--rc-bg);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--rc-hot);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.msm-fietsenwinkel-reacties .rc-link:hover { color: var(--rc-lime); }
.msm-fietsenwinkel-reacties .rc-link:focus-visible { outline: 3px solid var(--rc-hot); outline-offset: 3px; }

@media (max-width: 960px) {
  .msm-fietsenwinkel-reacties .rc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msm-fietsenwinkel-reacties .rc-list li,
  .msm-fietsenwinkel-reacties .rc-list li + li { padding: 20px 16px 20px 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--rc-bg) 18%, transparent); }
}
@media (max-width: 760px) {
  .msm-fietsenwinkel-reacties .rc-head { grid-template-columns: minmax(0, 1fr); }
  .msm-fietsenwinkel-reacties .rc-svg { width: 190%; margin-left: -45%; }
}
@media (max-width: 520px) {
  .msm-fietsenwinkel-reacties .rc-inner { padding: 0 16px; }
  .msm-fietsenwinkel-reacties .rc-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .msm-fietsenwinkel-reacties .rc-quote { transition: none; }
}