/* ============================================================
   CAPELY: reviews strip + shared review components
   (sections/07-reviews.html)

   Owns the compact homepage strip AND the visual language every review
   card, star rating and empty state uses. reviews.html links this file
   directly (see css/pages/reviews.css) so the full wall looks identical
   instead of drifting from a second copy of the same rules.

   The shop has no customers yet, so data/reviews.json ships as an empty
   list and the empty state below is what actually ships to production.
   Every rule here has to look right in that state, not just when full.
   ============================================================ */

.reviews-list { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }

/* ---------- star rating ----------
   Inline SVG rather than a Unicode glyph: a star character renders as a
   coloured emoji on some platforms, which the contract bans outright. */
.stars { display: inline-flex; align-items: center; gap: 3px; line-height: 0; }
.stars .star { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-faint); fill: currentColor; display: block; }
.star.is-filled { color: var(--accent); }

/* Fractional average rating: a dim five-star row underneath, and a second
   accent row on top clipped to a percentage width. Two flat rows in the
   same spot read as one partially filled row. */
.stars--avg { position: relative; display: inline-block; }
.stars--avg .stars-row { display: flex; gap: 3px; }
.stars--avg .stars-row .star { width: 18px; height: 18px; }
.stars--avg .stars-row--fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }

/* ---------- summary line (only rendered when a review exists) ---------- */
.reviews-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.reviews-summary-text { color: var(--text-dim); font-size: 14.5px; }
.reviews-summary-text strong { color: var(--text); font-weight: 700; }
.reviews-summary-dot { color: var(--text-faint); margin: 0 1px; }

/* ---------- card grid ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  min-width: 0;
  padding: clamp(20px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-text {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.review-cape { color: var(--text-mute); font-size: 12.5px; overflow-wrap: anywhere; }
.review-meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mute);
  overflow-wrap: anywhere;
}
.review-name { color: var(--text); font-weight: 600; }
.review-sep { color: var(--text-faint); }

.reviews-more { text-align: center; }

/* ---------- empty state ----------
   The default, shipping state: a new shop with no orders yet has no
   reviews to show. This has to look intentional and finished, not like
   a missing feature, and it must not read as a fake testimonial. */
.reviews-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 44px) clamp(22px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.reviews-empty-icon { width: 40px; height: 40px; color: var(--accent); opacity: .55; margin-bottom: 4px; }
.reviews-empty h3, .reviews-empty h2 { font-size: 19px; }
.reviews-empty p { color: var(--text-mute); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.reviews-empty .btn { margin-top: 6px; }
.reviews-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* Two CTAs (the full-page empty state) never get tight enough to overflow
   at any tested width: below 480px they stack full width instead. */
@media (max-width: 480px) {
  .reviews-empty-actions { flex-direction: column; align-items: stretch; }
  .reviews-empty .btn { width: 100%; }
}