/* ReviewsBlock — HOME SKIN.
 *
 * A-1 merge (Step 10, June 2026): the reviews component now has ONE canonical
 * stylesheet — css/ReviewsBlock.css — shared by every page that renders the
 * block (home + apartment + district). This file is the HOME skin: it pulls in
 * that shared base, adds the home-only header rules (minimal head + aggregate /
 * per-platform score row), and restores — scoped to `.rb--minimal` on the home
 * <section class="rb rb--minimal" id="reviews"> — the three places the home
 * intentionally diverges from the apartment design:
 *   • roomier section padding (var(--section-y) vs the apt clamp)
 *   • a calmer card hover (hairline border, no lift) instead of the apt lift
 *   • a quiet sentence-case "verify" link instead of the apt uppercase badge
 * Apartment/district pages load ReviewsBlock.css directly and are unaffected.
 */
@import "ReviewsBlock.css";

/* ── Minimal header (home) — eyebrow + title + one line + inline platforms ── */
.rb__head--minimal { display: block; margin-bottom: clamp(2rem, 4vw, 3rem); }
.rb__head--minimal .rb__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.45);
  margin: 0 0 0.7rem;
}
.rb__head--minimal .rb__title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.7rem;
}
.rb__head--minimal .rb__intro {
  margin: 0 0 1.4rem;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: hsl(var(--ink) / 0.55);
  max-width: 60ch;
}

/* Inline platform row — blended average + per-platform breakdown */

/* Hero: blended average + count — the at-a-glance trust signal */
.rb__agg {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rb__agg-score {
  display: flex;
  align-items: baseline;
  font-size: clamp(1.75rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(var(--ink));
  font-variant-numeric: tabular-nums;
}
.rb__agg-score small { font-size: 0.4em; font-weight: 600; color: hsl(var(--ink) / 0.4); margin-left: 0.12em; }



/* Divider between hero and breakdown */
.rb__agg + .rb__plat-list { position: relative; }
.rb__agg + .rb__plat-list::before {
  content: ""; position: absolute; left: calc(var(--space-8) * -0.5); top: 50%;
  width: 1px; height: 2.2em; transform: translateY(-50%);
  background: hsl(var(--hairline));
}
/* Breakdown: compact secondary per-platform row */
.rb__plat-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
/* Lead variant — platform scores are now the primary signal, so give them air + size */
.rb__plat-list--lead { margin-top: var(--space-6); gap: var(--space-3) var(--space-8); }
.rb__plat-list--lead .rb__plat-name { font-size: var(--fs-base); }
.rb__plat-list--lead .rb__plat-score { font-size: var(--fs-xl); }
.rb__plat { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.rb__plat-name { font-size: var(--t-label); font-weight: 600; letter-spacing: -0.005em; }
.rb__plat-score { font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.01em; color: hsl(var(--ink)); font-variant-numeric: tabular-nums; }
.rb__plat-score small { font-size: 0.68em; font-weight: 500; color: hsl(var(--ink) / 0.4); }
.rb__plat-count { font-size: var(--fs-xs); font-weight: 500; color: hsl(var(--ink) / 0.45); font-variant-numeric: tabular-nums; }
.rb__plat-count::before { content: "·\00a0"; color: hsl(var(--ink) / 0.3); }
@media (max-width: 560px) {
  .rb__agg + .rb__plat-list::before { display: none; }
}
/* Basis line — quiet provenance note above the platform aggregate */



/* Verify-link arrow — home variant only (apt uses a badge mark instead) */
.rb__card-verify-arrow { font-size: 0.85em; opacity: 0.7; }

/* ── Home skin overrides (rb--minimal) — restore the home's calmer, roomier
 *    review design over the shared apartment base. Each rule below is the home's
 *    pre-merge value; without the scope the page would inherit the apt design. ── */
.rb.rb--minimal { padding: var(--section-y) 0; }

/* Card as a quiet quote, not a button: hairline border, no fill, no lift. */
.rb--minimal .rb__card:hover {
  border-color: hsl(var(--hairline)) !important;
  background: transparent !important;
  transform: none;
}

/* Verify link: sentence-case, low-key, underline-on-hover (apt is uppercase + opacity). */
.rb--minimal .rb__card-verify {
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--ink) / 0.72);
  transition: color var(--dur-fast) var(--ease-standard);
}
.rb--minimal .rb__card-verify:hover {
  opacity: 1;
  color: hsl(var(--ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Controls row carries an extra top gap on the home layout only. */
.rb--minimal .rb__controls { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  .rb--minimal .rb__card:hover { transform: none; }
}