/* ================================================================
   CGK Realties - the tenant reviews banner.

   Lived in css/single-page/about.css until the building pages used it
   too (2026-09-20). Moved up a tier rather than copied, per CLAUDE.md
   §4: a component used by a second page moves, it is never duplicated.

   Desktop: the cards, twice over, rolling slowly right to left; a
   pointer or a keyboard focus on the rail stops it. Phone: stacked,
   each card popping in as it scrolls into view. The duplicate set is
   built by js/shared/reviews.js.
   ================================================================ */

/* ---- Reviews. Desktop: the six cards, twice over, rolling slowly
        right to left; a pointer on it stops it. Phone: stacked, each
        card popping in as it scrolls into view. ---- */
.reviews .section-head { margin-bottom: 2rem; }
.reviews-note { font-size: 0.8125rem; }

.reviews-rail {
  overflow: hidden;
  padding-block: 0.5rem 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  width: max-content;
  animation: reviews-roll 70s linear infinite;
}

.reviews-rail:hover .reviews-track,
.reviews-rail:focus-within .reviews-track { animation-play-state: paused; }

/* The track is two identical sets; moving it by one set and one gap
   lands exactly where it started. */
@keyframes reviews-roll { to { transform: translateX(calc(-50% - 0.625rem)); } }

.review {
  flex: 0 0 22.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.625rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.review-who { display: flex; align-items: center; gap: 0.75rem; }

.review-initial {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--serif);
  font-size: 1.125rem;
}

.review-who b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

.review-who span span {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.review p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 760px) {
  .reviews-rail {
    overflow: visible;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .reviews-track {
    width: auto;
    flex-direction: column;
    gap: 0.875rem;
    padding-inline: max(var(--pad), env(safe-area-inset-left));
    animation: none;
  }

  .review { flex: none; padding: 1.25rem 1.25rem 1.375rem; }
  .review.is-copy { display: none; }

  .will-pop .review {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.25,1.25);
  }

  .will-pop .review.in { opacity: 1; transform: none; }
}

/* No motion wanted: the desktop banner becomes a strip you scroll yourself */
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .reviews-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reviews-track { padding-inline: var(--pad); }
  .review.is-copy { display: none; }
}