/* Reviews Section */
.reviews {
  padding: 28px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.reviews__head { margin-bottom: 12px; }

.reviews__title {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 700;
}

.reviews__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151; /* grey-700 */
  font-size: 0.95rem;
}
.reviews__avg { font-weight: 700; }
.reviews__sep { opacity: 0.5; }

.reviews__subtitle {
  margin-top: 6px;
  color: #4b5563; /* grey-600 */
  font-size: 0.95rem;
}

/* Rail with arrow buttons */
.reviews__rail {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

/* HORIZONTAL SCROLLER ALWAYS (mobile & desktop) */
.reviews__track {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  display: grid;
  grid-auto-flow: column;
  gap: 12px;

  /* Mobile: show one large card at a time */
  grid-auto-columns: 85%;
  padding: 8px 2px 2px;
}

/* Desktop: show 4 cards per viewport width; keep horizontal scroll for the rest */
@media (min-width: 641px) {
  .reviews__track {
    /* 4 columns visible at once: each card width = (track width - 3 gaps)/4 */
    grid-auto-columns: calc((100% - 36px) / 4); /* 3 gaps × 12px = 36px */
  }
}

/* Arrow buttons */
.reviews__nav {
  appearance: none;
  border: 1px solid #e5e7eb; /* grey-200 */
  background: #fff;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.reviews__nav:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.reviews__nav:active { transform: translateY(1px); }

/* Cards */
.review-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.review-card__title {
  font-size: 1rem;
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
}
.review-card__body {
  color: #111827; /* grey-900 */
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
}
.review-card__footer {
  margin-top: auto;
  color: #6b7280; /* grey-500 */
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.review-card__author { font-weight: 600; }
.review-card__dot { opacity: .6; }
.review-card__date { opacity: .9; }

/* Stars */
.rv-stars { display: inline-flex; gap: 2px; }
.rv-star { fill: #e5e7eb; width: 16px; height: 16px; }
.rv-star--filled { fill: #f59e0b; } /* amber-500 */

/* Empty state */
.reviews__empty {
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: #6b7280;
  margin-top: 12px;
}
/* === Neutralize the "who posted" (author/posted-by) color === */
/* Use whichever selector matches your markup; all are safe overrides. */

.review-card__author,
.review-card__footer .review-card__author,
.review-card__footer .review-card__loc,
.review-card__footer .review-card__date,
.posted-by,
.posted-by * {
  color: #374151 !important;   /* neutral slate */
}

/* If your author chip had a green pill background, clear it */
.review-card__author,
.posted-by {
  background: transparent !important;
  border: 0 !important;
}