/* =====================================================================
   reviews.css  —  the reviews wall (signature: fractional star meter)
   ===================================================================== */
.reviews-hero { text-align: center; }
.reviews-hero__score { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reviews-hero__num { font-family: var(--font-serif); font-weight: 600; font-size: 76px; line-height: .85; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.reviews-hero__count { font-size: 14px; color: var(--color-ink-2); font-weight: 600; letter-spacing: .01em; }

/* fractional star meter: filled row clipped over an empty row */
.star-meter { position: relative; display: inline-block; font-size: 28px; line-height: 1; letter-spacing: 4px; }
.star-meter__empty { color: var(--color-ink-2); opacity: .3; }
.star-meter__fill { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; color: var(--color-yellow-d); }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; margin-top: 26px; }
.review-card { margin: 0; padding: 24px 24px 20px; background: var(--panel-fill); border-radius: var(--radius); display: flex; flex-direction: column; gap: 13px; animation: rvUp .5s both; }
.review-card__stars { color: var(--color-yellow-d); font-size: 16px; letter-spacing: 3px; }
.review-card__text { margin: 0; font-family: var(--font-serif); font-size: 18.5px; line-height: 1.42; color: var(--color-ink); }
.review-card__by { font-size: 13px; font-weight: 700; color: var(--color-ink-2); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: auto; }
.review-card__flavor { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--color-ink); }
.reviews-empty { grid-column: 1 / -1; text-align: center; padding: 34px 16px; color: var(--color-ink-2); font-style: italic; }

/* interactive rating input */
.star-input { display: flex; gap: 4px; }
.star-input__star { background: none; border: 0; cursor: pointer; font-size: 36px; line-height: 1; color: var(--color-ink-2); opacity: .28; padding: 0 3px; transition: transform .1s ease, opacity .1s ease, color .1s ease; }
.star-input__star.on { color: var(--color-yellow-d); opacity: 1; }
.star-input__star:hover { transform: scale(1.14); }
.star-input__star:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: 6px; }
.reviews-section select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2354402d' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

@keyframes rvUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .review-card { animation: none; } .star-input__star { transition: none; } }