/* ============================================================
   WMC House — guest reviews
   Curated quotes on cards, under the live Google score.
   The G mark and the gold stars are Google's and stay Google's:
   they are the attribution, and they are what makes the block
   read as real reviews rather than as testimonials.
   ============================================================ */

/* === The live score === */
.rvw__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--s-2); margin-bottom: var(--s-4); }
.rvw__score { display: flex; align-items: center; gap: .75rem; }
.rvw__num { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: 1; }
.rvw__count { color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .75rem; }

/* === Stars ===
   Two identical rows, the gold one clipped to --fill. That renders 4.6 as four
   and a bit rather than rounding to a score we do not have. */
.rvw__stars { position: relative; display: inline-block; line-height: 0; }
.rvw__stars svg { display: inline-block; width: 1em; height: 1em; margin-right: .12em; }
.rvw__stars__off svg { fill: var(--rule); }
.rvw__stars__on { position: absolute; inset: 0; overflow: hidden; width: var(--fill, 100%); white-space: nowrap; }
.rvw__stars__on svg { fill: #F5B400; }
.rvw__card .rvw__stars { font-size: 15px; margin-bottom: .9rem; }
.rvw__score .rvw__stars { font-size: 20px; }

/* === Cards ===
   Three across, two down. On the cream ground these are the only white
   rectangles on the page, which is the point: they read as quoted from
   somewhere else. */
.rvw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
/* A warm off-white, mixed from the brand's own ground rather than set as a
   second colour anyone has to remember to change. Flat #fff on cream reads as
   a hole punched in the page; a little of the ground in it makes the card sit
   ON the paper instead of in front of it, and it stays right on all five
   brands without a per-site value. */
.rvw__card { background: color-mix(in srgb, var(--paper) 80%, var(--ground)); border-radius: var(--radius); padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; }

/* Name on the left, Google's mark on the right, nothing between them. The
   initial-in-a-circle was borrowed from the widget the mockup came from; it is
   a stand-in for a profile photo we do not have and never will, so it was only
   ever decorating the absence of one. */
.rvw__top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .75rem; }
.rvw__who { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvw__g { flex: 0 0 auto; width: 18px; height: 18px; }

.rvw__text { margin: 0 0 .9rem; }
.rvw__when { color: var(--ink-soft); margin-top: auto; }

/* === Breakpoints ===
   Two across on a tablet, one on a phone. Three 110px columns of quoted text
   is unreadable, and a horizontal scroller here would hide the second half of
   the proof behind a gesture nobody makes on a homepage. */
@media (max-width: 1000px) {
	.rvw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.rvw { grid-template-columns: minmax(0, 1fr); }
}