/* review-scroll.njk: continuous vertical-scroll review columns. Opt-in (`optInCss`), so no other demo
   carries it. Mike, 30 Oct 2026 (MCL), after yellowstonecontractors.co.uk. Unlayered, so it beats the
   utilities beside it. Pure CSS animation (no JS timer): x-data only toggles a class that pauses it. */

.rs-wrap { position: relative; }

.rs-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  margin: 0 0 1rem; padding: 0.5rem 1rem;
  border-radius: 999px; font-size: 0.85rem; font-weight: 650; color: inherit;
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  cursor: pointer; transition: background-color 0.18s;
}
.rs-toggle svg { flex-shrink: 0; }
.rs-toggle span { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.rs-toggle:hover { background: rgb(255 255 255 / 0.12); }

.rs-cols {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  /* The fade top/bottom reads as "more above/below", not a hard crop. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
/* Below 768px, `1fr` was still stacking BOTH columns full-width, one above the other -- two full-width
   panels scrolling in opposite directions at once, which is what read as confusing on a phone (Mike,
   30 Oct 2026). One column, one direction, until there's room for the pair side by side. */
.rs-col:nth-child(2) { display: none; }
@media (min-width: 768px) {
  .rs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-col:nth-child(2) { display: block; }
}

.rs-col { height: clamp(26rem, 60vh, 40rem); overflow: hidden; }
.rs-track {
  display: flex; flex-direction: column; gap: 1rem;
  animation: rs-scroll var(--rs-dur, 40s) linear infinite;
  animation-direction: normal;
}
/* Column 2 travels the other way (`--rs-dir: -1`) so the pair reads as alive, not one list cut in half. */
.rs-col:nth-child(2) .rs-track { animation-direction: reverse; }

.rs-card { break-inside: avoid; }
/* Mike, 30 Oct 2026: on a phone one long review made a card taller than the window, so the scroll read as a
   wall of text. Every card is capped at five lines: same shape, easy to scan. The whole review, verbatim, is
   on /reviews/ (the "See more reviews" button under the scroll), so nothing is lost or reworded. */
.rs-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rs-cols { cursor: pointer; }
@media (max-width: 767px) { .rs-col { height: 24rem; } }

/* Hover OR the explicit toggle both pause -- a visitor reading a card mid-scroll should never lose it. */
.rs-col:hover .rs-track, .rs-paused .rs-track { animation-play-state: paused; }

@keyframes rs-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-track { animation: none; }
  .rs-col { height: auto; overflow: visible; }
  .rs-card[aria-hidden="true"] { display: none; }
  .rs-cols { -webkit-mask-image: none; mask-image: none; }
}