/* ============================================================
   MPG version2 — Reviews showcase + metrics styles
   Owned by the Reviews UI workstream. Reuses :root tokens from
   site.css (blue/white brand). Loaded only on results.html and
   reviews.html. Do NOT put these rules in site.css.
   ============================================================ */

/* ---------- Aggregate headline (single standalone figure) ----------
   One published overall number only — no per-brand averages. */
.mr-headline{
  max-width:540px;margin:0 auto;text-align:center;
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
  color:#fff;border-radius:var(--r-lg);padding:34px 30px;box-shadow:var(--shadow);
}
.mr-headline-rating{
  font-size:64px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;
  display:inline-flex;align-items:flex-start;gap:4px;
}
.mr-headline-star{font-size:30px;color:#ffd27a;font-weight:700;margin-top:6px}
.mr-headline-stars{color:#ffd27a;font-size:22px;letter-spacing:5px;margin-top:14px}
.mr-headline-label{
  font-size:16px;font-weight:600;color:rgba(255,255,255,.92);
  margin-top:14px;letter-spacing:.02em;
}

/* ---------- Shared review grid + cards ---------- */
.mr-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;
}
.mr-grid-static{grid-template-columns:repeat(4,1fr)}
.mr-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;height:100%;
  transition:transform .16s ease,box-shadow .16s ease;
}
.mr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mr-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.mr-stars{color:var(--amber);font-size:15px;letter-spacing:2.5px;line-height:1}
.mr-source{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);background:var(--sky);border:1px solid var(--sky-2);
  padding:3px 9px;border-radius:30px;white-space:nowrap;
}
.mr-text{
  font-size:15px;color:var(--ink);line-height:1.56;flex:1 0 auto;
}
.mr-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.mr-author{font-size:13.5px;font-weight:700;color:var(--ink)}
.mr-sub{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- Showcase controls ---------- */
.mr-controls{
  display:flex;flex-wrap:wrap;gap:24px 38px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 24px;box-shadow:var(--shadow-sm);margin-bottom:22px;
}
.mr-fgroup{display:flex;flex-direction:column;gap:10px}
.mr-flabel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.mr-fbtns{display:flex;flex-wrap:wrap;gap:8px}
.mr-fbtn{
  font-family:var(--sys);font-size:13.5px;font-weight:600;color:var(--body);
  background:var(--bg);border:1.5px solid var(--line);border-radius:30px;
  padding:8px 16px;cursor:pointer;transition:all .15s ease;white-space:nowrap;
}
.mr-fbtn:hover{border-color:var(--tint);color:var(--blue)}
.mr-fbtn.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(9,84,149,.22)}
.mr-countline{font-size:14px;color:var(--secondary);font-weight:600;margin:0 0 18px}
.mr-empty{font-size:16px;color:var(--secondary);text-align:center;padding:40px 0}

/* ---------- Load more ---------- */
.mr-more-wrap{display:flex;justify-content:center;margin-top:34px}
.mr-more{cursor:pointer}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .mr-grid,.mr-grid-static{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mr-grid,.mr-grid-static{grid-template-columns:1fr}
  .mr-controls{gap:18px 24px;padding:18px}
  .mr-headline{padding:28px 22px}
  .mr-headline-rating{font-size:52px}
  .mr-headline-star{font-size:26px}
}
@media (max-width:375px){
  .mr-controls{padding:16px 14px}
  .mr-fbtn{padding:7px 13px;font-size:13px}
}