/* ===========================================================================
   horotron.therapy — reviews.html
   Extends styles.css and booking.css. Nothing new is introduced here except
   the card grid and the star picker: the page shell (.bk), the stats strip,
   the review card, the form fields, the panels and the confirmation block are
   all reused from the landing page and the booking wizard.
   =========================================================================== */

.rv-stats { margin-top: clamp(30px, 4.5vh, 52px); }

/* the third cell holds five stars instead of a number, at the same optical
   weight as a number would have; dimmed while it is still a placeholder */
.stat__v--stars { display: flex; gap: 8px; color: var(--gold); font-size: 17px; }
/* beats .stat__v[data-todo], which greys placeholder numbers out */
.stat__v--stars[data-todo] { color: var(--gold); opacity: 0.4; }

.rv-note { margin-top: clamp(34px, 5vh, 54px); }

/* --- grid ------------------------------------------------------------------
   Same .review card as the landing ticker; only the fixed carousel width and
   the hover rule (which hangs off .ticker__viewport there) change. */

/* fixed column counts rather than auto-fill: the six placeholder cards then
   divide evenly at every breakpoint instead of leaving an orphan on the last row */
.rv-grid {
  margin-top: clamp(20px, 3vh, 30px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.rv-grid .review { width: auto; }
.rv-grid:hover .review { border-color: rgba(237, 234, 225, 0.16); }

/* --- write a review -------------------------------------------------------- */

.rv-write { margin-top: clamp(72px, 11vh, 130px); }
.rv-write .thread { margin-bottom: clamp(48px, 7vh, 86px); }

.rv-write__lede {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--bone-dim);
  font-size: 0.95rem;
}

.rv-write .form { margin-top: clamp(32px, 5vh, 52px); }

/* the rating sits in a .field but has no single control to label */
.field__k {
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-fade);
}

/* --- star picker ----------------------------------------------------------- */

.stars { display: flex; gap: 8px; }

/* 46px keeps the touch target above the 44px minimum. The lit state is the
   glyph and the hairline only, no fill: five filled tiles would be the loudest
   gold on the site, and gold is an accent here. */
.stars button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--bone-fade);
  border: 1px solid var(--hair);
  border-radius: 6px;
  opacity: 0.4;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.stars button.is-lit {
  color: var(--gold);
  border-color: var(--gold-soft);
  opacity: 1;
}

/* --- responsive ------------------------------------------------------------ */

/* .stats already collapses to one column at 860px in styles.css */
@media (max-width: 1080px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .rv-grid { grid-template-columns: 1fr; } }