/* Class Reviews: the summary with clickable star bars, search and filters, the review cards, and the page buttons.
   The cards themselves are the shared .review cards; the page script fills them from /api/reviews. */

.rv-intro { max-width: 760px; margin: -24px auto 0; font-size: 17px; line-height: 1.7; }
.rv-intro p { margin: 0 0 16px; }

/* The summary and filters sit in a row above the results, so the cards get the full page width. */
.rv-page { grid-template-columns: 1fr; gap: 40px; max-width: none; }
.rv-page .reviews-summary { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
/* The average and count on the left of the rating card, the star bars on the right. */
.rv-page .rating { display: grid; grid-template-columns: auto 1fr; column-gap: 40px; align-content: start; padding: 28px 34px; }
.rv-page .rating > * { grid-column: 1; }
.rv-page .rating .rating-score { margin-top: 16px; }
.rv-page .rating .rv-bars { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.rv-page .rating .rv-link { grid-column: 2; }
.rv-page .reviews-grid { grid-template-columns: repeat(3, 1fr); }

.rv-bars button { display: grid; grid-template-columns: 52px 1fr 40px; gap: 10px; align-items: center; width: 100%; margin: 2px 0; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 14px var(--font-body); text-align: left; cursor: pointer; }
.rv-bars button span:first-child { color: var(--steel-text); font-weight: 600; }
.rv-bars button span:last-child { text-align: right; }
.rv-bars i { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.rv-bars i b { display: block; height: 100%; background: var(--star); }
.rv-bars button:hover:not(:disabled) span:first-child, .rv-bars button:focus-visible span:first-child { text-decoration: underline; }
.rv-bars button:hover:not(:disabled) i { box-shadow: 0 0 0 1px var(--star); }
.rv-bars button.on { background: var(--steel-soft); }
.rv-bars button:disabled { cursor: default; opacity: .5; }
.rv-link { margin: 12px 0 0 8px; padding: 0; border: 0; background: none; color: var(--steel-text); font: 600 14px var(--font-body); cursor: pointer; }
.rv-link:hover { text-decoration: underline; }

.rv-filters { display: flex; flex-direction: column; gap: 14px; padding: 24px; font-size: 14px; }
.rv-filters label { display: flex; align-items: center; gap: 10px; color: var(--navy-text); font-weight: 600; }
.rv-filters select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-text); font: 14px var(--font-body); }
.rv-search { display: flex; }
.rv-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #b9c4d3; border-right: 0; border-radius: 8px 0 0 8px; color: var(--navy-text); font: 15px var(--font-body); }
.rv-search input:focus { outline: 2px solid var(--steel); outline-offset: -1px; }
.rv-search button { display: grid; place-items: center; width: 48px; border: 0; border-radius: 0 8px 8px 0; background: var(--star); color: #fff; font-size: 20px; cursor: pointer; }
.rv-search button:hover { filter: brightness(1.08); }
.rv-search .icon { stroke-width: 2.5; }

.rv-shown { margin: 0 0 16px; color: var(--navy-text); font-weight: 600; }
.rv-shown .rv-link { margin: 0 0 0 10px; }
.rv-page .stars .off { color: #d5dce6; }
.rv-page .review blockquote { margin-bottom: 18px; white-space: pre-line; }
.rv-page .review blockquote.rv-clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rv-page .review .rv-link { align-self: flex-start; margin: -8px 0 18px; }
.rv-page .review figcaption { margin-top: auto; }
.rv-who { margin: 8px 0 0; color: var(--navy-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.rv-when { margin: 2px 0 0; font-size: 13px; }
.rv-cite { margin: 6px 0 0; font-size: 12px; font-style: italic; }
.rv-error { grid-column: 1 / -1; }

.rv-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.rv-pager button { min-width: 40px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-text); font: 600 14px var(--font-body); cursor: pointer; }
.rv-pager button:hover:not(:disabled) { border-color: var(--steel); color: var(--steel-text); }
.rv-pager button[aria-current] { border-color: var(--navy-btn); background: var(--navy-btn); color: #fff; cursor: default; }
.rv-pager button:disabled:not([aria-current]) { opacity: .4; cursor: default; }
.rv-pager span { padding: 0 4px; }

@media (max-width: 1100px) {
  .rv-page .reviews-summary, .rv-page .reviews-grid > * { min-width: 0; }
  .rv-page .reviews-summary { grid-template-columns: 1fr; }
  .rv-page .reviews-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .rv-intro { margin-top: -16px; }
  .rv-page .reviews-summary, .rv-page .reviews-grid, .rv-page .rating { grid-template-columns: 1fr; }
  .rv-page .rating .rv-bars, .rv-page .rating .rv-link { grid-column: 1; grid-row: auto; }
  .rv-page .rating .rv-bars { margin-top: 18px; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .rv-bars i { background-color: #232934; }
  .rv-filters select { background-color: #111620; }
  .rv-search input { border-color: #3f4650; }
  .rv-search input:focus { outline-color: #4892dc; }
  .rv-search button { color: #ffffff; }
  .rv-pager button { background-color: #111620; }
  .rv-pager button:hover:not(:disabled) { border-color: #4892dc; }
  .rv-pager button[aria-current] { border-color: #8ba5d4; color: #ffffff; }
}