/* ═══════════════════════════════════════════════
   /reviews — public roster-wide review listing.
   Card markup is rendered by <kpdd-review-card>
   (encapsulated shadow CSS); this stylesheet only
   handles the page-level grid + pagination chrome.
   ═══════════════════════════════════════════════ */

.reviews-page {
  padding: var(--space-2xl, 64px) 0;
}

.reviews-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg, 24px);
  margin-top: var(--space-lg, 24px);
  /* All cards in a row match the tallest card's height. With most
     reviews hitting the 5-line clamp set in reviewCard.js, this means
     a short review (e.g. "Adam did good!") stretches to match its
     neighbors, instead of looking like a half-card next to two full
     ones. */
  align-items: stretch;
}

.reviews-page__grid > kpdd-review-card {
  display: block;
  height: 100%;
}

.reviews-page__pagination {
  margin-top: var(--space-2xl, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md, 16px);
}

.reviews-page__pagination > :first-child { justify-self: start; }
.reviews-page__pagination > :last-child  { justify-self: end; }

.reviews-page__pagination-info {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-muted, #5e7489);
  text-align: center;
}