/* Mock B — Google reviews branding: white G+Google badge + separate rating chip.
   Stars live only in .rating-chip / review cards — never beside the Google mark.
   Pages override via CSS variables to match Ember / Folio / HVAC themes. */
:root {
  --grb-fg: inherit;
  --grb-muted: inherit;
  --grb-subtle: inherit;
  --grb-chip-bg: transparent;
  --grb-chip-border: rgba(127, 127, 127, 0.35);
  --grb-star: #f4b400;
  --grb-badge-bg: #fff;
  --grb-badge-fg: #202124;
  --grb-radius: 8px;
  --grb-gap: 10px;
}

.g-attr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grb-gap);
  margin: 0 0 1rem;
}

.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grb-badge-bg);
  color: var(--grb-badge-fg);
  border-radius: var(--grb-radius);
  padding: 7px 12px 7px 8px;
  line-height: 1;
  text-decoration: none;
}

.g-badge .g-mark,
.g-badge img.g-mark {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.g-badge .word {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--grb-badge-fg);
}

.rating-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  background: var(--grb-chip-bg);
  border: 1px solid var(--grb-chip-border);
  border-radius: var(--grb-radius);
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--grb-muted);
  line-height: 1.25;
}

.rating-chip strong {
  color: var(--grb-fg);
  font-weight: 700;
}

.rating-chip .stars {
  color: var(--grb-star);
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.rating-chip .asof {
  color: var(--grb-subtle);
  font-size: 0.68rem;
}

/* Compact variant for hero/stat pills */
.g-attr-row--compact {
  margin: 0;
  gap: 8px;
}
.g-attr-row--compact .g-badge {
  padding: 5px 10px 5px 6px;
}
.g-attr-row--compact .g-badge .g-mark,
.g-attr-row--compact .g-badge img.g-mark {
  width: 16px;
  height: 16px;
}
.g-attr-row--compact .g-badge .word {
  font-size: 0.75rem;
}
.g-attr-row--compact .rating-chip {
  padding: 5px 10px;
  font-size: 0.72rem;
}
.g-attr-row--compact .rating-chip .asof {
  font-size: 0.62rem;
}

/* Theme hooks — Ember (design-1) */
[data-theme="ember"] .g-attr-row,
.band-elevated .g-attr-row {
  --grb-fg: var(--fg, #f3e6d4);
  --grb-muted: var(--muted, #c4b09a);
  --grb-subtle: var(--subtle, #8f7b6c);
  --grb-chip-bg: var(--bg-elevated, #1c1412);
  --grb-chip-border: var(--line, rgba(243, 230, 212, 0.12));
  --grb-star: var(--star, #e8c9a0);
}
[data-theme="light"] .g-attr-row {
  --grb-fg: var(--fg, #1c1412);
  --grb-muted: var(--muted, #5a4740);
  --grb-subtle: var(--subtle, #7d675c);
  --grb-chip-bg: var(--bg-elevated, #fffaf3);
  --grb-chip-border: var(--line, rgba(28, 20, 18, 0.12));
  --grb-star: #c4452d;
}

/* Folio / design-3 light */
.folio-reviews-straddle + .g-attr-row,
.g-attr-row.grb-folio,
main .g-attr-row.grb-folio {
  --grb-fg: #1c1412;
  --grb-muted: #5a4740;
  --grb-subtle: #7d675c;
  --grb-chip-bg: #fff;
  --grb-chip-border: rgba(28, 20, 18, 0.12);
  --grb-star: #c4452d;
}

/* HVAC theme hooks via host modifiers */
.g-attr-row.grb-hvac-dark {
  --grb-fg: #fff;
  --grb-muted: rgba(255, 255, 255, 0.78);
  --grb-subtle: rgba(255, 255, 255, 0.55);
  --grb-chip-bg: rgba(255, 255, 255, 0.06);
  --grb-chip-border: rgba(255, 255, 255, 0.18);
  --grb-star: #f4b400;
}
.g-attr-row.grb-hvac-sand {
  --grb-fg: #1a2e1a;
  --grb-muted: #4a3f35;
  --grb-subtle: #6b5d4f;
  --grb-chip-bg: #f7f1e8;
  --grb-chip-border: rgba(26, 46, 26, 0.15);
  --grb-star: #c45c26;
}
.g-attr-row.grb-hvac-navy {
  --grb-fg: #0b1c33;
  --grb-muted: #3d4f66;
  --grb-subtle: #6b7c90;
  --grb-chip-bg: #fff;
  --grb-chip-border: rgba(11, 28, 51, 0.14);
  --grb-star: #e8a317;
}