/* ==========================================================================
   REVIEW STRIP — two chips, side by side (Sushil, 07.08.2026 item A)
   --------------------------------------------------------------------------
   THEME-OWNED SHEET. Every other file in assets/css is a byte-identical copy
   of the v4.3 static build and is enqueued, never edited. This one is new, so
   that guarantee holds. It loads last, after figures.css, and therefore
   outranks the .ratings--hero grid it replaces.

       ( Clutch 4.5 ****½ (11 reviews) )  ( HubSpot Partner 4.9 ****½ (10 reviews) )

   Reading order inside each chip is logo -> score -> stars -> count: the mark
   says whose rating it is before the number is read.

   WHY TWO CHIPS RATHER THAN ONE PLATE WITH A DIVIDER.
   The first build put both platforms on a single plate separated by a 1px
   hairline. Two things were wrong with it. The hairline was too faint to
   demarcate anything at 14px tall and 18% opacity. And because the pair sized
   as ONE box with `flex-wrap: nowrap`, a column narrower than the content did
   not wrap -- it overflowed, and the text spilled through the rounded edge
   (measured: scrollWidth 490 against clientWidth 483).

   Two chips fix both at once. Each is its own rounded surface, so the
   separation is a real edge rather than a line; and each sizes independently,
   so a narrow column drops the second chip to the next row instead of
   bursting the container. Nothing can overflow, at any width.
   ========================================================================== */

.ratings.ratings--inline {
  display: flex;
  flex-wrap: wrap;                 /* chips drop to the next row; never overflow */
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  margin-top: var(--space-5);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- the chip ------------------------------------------------------------- */
.ratings--inline .rrate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;                    /* lets the chip shrink rather than push out */
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ratings--inline .rrate:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.14);
  text-decoration: none;
}

/* The separator element is gone from the markup; this is belt-and-braces in
   case an older cached copy of the block is still being served. */
.ratings--inline .rrate__sep { display: none; }

/* ---- stars ---------------------------------------------------------------
   Two stacked copies of the same five glyphs: a muted row underneath and a
   coloured row on top, clipped to the share of five the score actually
   earned. The width is set inline, per platform, computed from the score.
   The markup this replaced hard-coded five FULL stars next to a 4.5, so the
   graphic contradicted the number beside it.                                */
.ratings--inline .rrate__stars {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 1;
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  color: rgba(100, 116, 139, 0.32);
}

.ratings--inline .rrate__stars::before { content: "\2605\2605\2605\2605\2605"; }

.ratings--inline .rrate__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-primary-bright);   /* unchanged, as he asked */
}

.ratings--inline .rrate__fill::before { content: "\2605\2605\2605\2605\2605"; }

/* ---- logo, score, count --------------------------------------------------- */
.ratings--inline .rrate__logo { display: block; height: 12px; width: auto; flex: none; }
.ratings--inline .rrate__logo--hubspot { height: 11px; }
.ratings--inline .rrate__logo--ondark { display: none; }

.ratings--inline .rrate__score {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--color-text);
}

/* Completes the label ("HubSpot" + "Partner"), so it hugs the mark rather
   than taking the full flex gap. */
.ratings--inline .rrate__suffix {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-text);
  margin-left: -2px;
}

/* Stars follow the score so the pair reads as one unit: "4.5 ****". */
.ratings--inline .rrate__score + .rrate__stars { margin-left: -2px; }

.ratings--inline .rrate__count {
  font-size: 0.65rem;
  line-height: 1;
  color: var(--color-text-muted);
}

/* ---- over dark bands ------------------------------------------------------ */
.hero--dark .ratings--inline .rrate,
.section--dark .ratings--inline .rrate {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.hero--dark .ratings--inline .rrate:hover,
.section--dark .ratings--inline .rrate:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
}

.hero--dark .ratings--inline .rrate__score,
.hero--dark .ratings--inline .rrate__suffix,
.section--dark .ratings--inline .rrate__score,
.section--dark .ratings--inline .rrate__suffix { color: rgba(255, 255, 255, 0.92); }

.hero--dark .ratings--inline .rrate__count,
.section--dark .ratings--inline .rrate__count { color: rgba(255, 255, 255, 0.55); }

.hero--dark .ratings--inline .rrate__stars,
.section--dark .ratings--inline .rrate__stars { color: rgba(255, 255, 255, 0.22); }

/* The black wordmark swaps for the white one; the HubSpot mark reads on both
   and is not duplicated. */
.hero--dark .ratings--inline .rrate__logo--onlight,
.section--dark .ratings--inline .rrate__logo--onlight { display: none; }

.hero--dark .ratings--inline .rrate__logo--ondark,
.section--dark .ratings--inline .rrate__logo--ondark { display: block; }

/* ==========================================================================
   LEGACY CARDS — star row only
   --------------------------------------------------------------------------
   The 52 non-hero blocks keep their original two-card design. The ONLY thing
   corrected is the star row, which hard-coded five full stars beside a 4.5 and
   a 4.9 in every copy.

   v2.css already sets this element's colour, font-size, letter-spacing,
   line-height and margin. Those are deliberately NOT restated: the glyph
   metrics must stay identical or the cards shift. All that is added is the
   positioning context, a muted base row, and the coloured overlay clipped to
   the earned share -- inline width, computed from the score in PHP.
   ========================================================================== */

.rating-card__stars {
  position: relative;
  display: inline-block;
  color: rgba(100, 116, 139, 0.32);   /* the un-earned remainder */
}

.rating-card__stars::before { content: "\2605\2605\2605\2605\2605"; }

.rating-card__stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-primary-bright); /* unchanged, as he asked */
}

.rating-card__stars-fill::before { content: "\2605\2605\2605\2605\2605"; }

/* On dark bands the muted remainder needs to read against the plate, not the
   page. The card keeps its light surface there, so this stays as-is; stated
   explicitly so a future dark-card change does not silently hide the base row. */
.section--dark .rating-card__stars,
.hero--dark .rating-card__stars { color: rgba(100, 116, 139, 0.32); }

/* ---- mobile ---------------------------------------------------------------
   Below 600px the two chips will not share a line on any real handset, so
   stop pretending: give each its own full-width row, left-aligned, with the
   internals spaced out rather than crammed. Tap targets grow to 32px, which
   is what makes these usable as links on a phone rather than merely legible. */
@media (max-width: 600px) {
  .ratings.ratings--inline {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }

  .ratings--inline .rrate {
    width: 100%;
    justify-content: flex-start;
    min-height: 32px;
    padding: 7px 14px;
    border-radius: 10px;
  }

  /* Push the review count to the far edge so each row has the same shape and
     the eye can scan the two counts down a single rail. */
  .ratings--inline .rrate__count { margin-left: auto; }
}

/* Very narrow (≤360px): the count would crowd the stars, so let it sit under
   nothing and simply shrink the type a step instead of wrapping the row. */
@media (max-width: 360px) {
  .ratings--inline .rrate { padding: 7px 11px; gap: 5px; }
  .ratings--inline .rrate__count { font-size: 0.625rem; }
  .ratings--inline .rrate__stars { font-size: 0.6rem; }
}