/**
 * BPS Lite — rating component
 * ============================================================================
 * Port of Base 3.11.7 `assets/scss/_bps-rating.scss` (2026-09-22), hand-compiled
 * to plain CSS 2026-09-23. Hand-written for the same reason as
 * bps-lite-shapes.css: Lite's compiler needs an active Base.
 *
 * A review score as ONE unit. Replaces the `trust-badge` chip used as a review
 * score (tick + stars + tiny text in a pale box stretched across the column).
 * Mark, 2026-09-22: "looks very amateurish and dismissive".
 *
 * ONE chip on a CONTAINER picks the style; the parts are plain widgets inside:
 *
 *   container    Decorator chip:  bps-rating-score | bps-rating-inline | bps-rating-card
 *     heading      Decorator chip:  bps-rating-number    "4.9"   (HTML tag: div)
 *     text-editor  Decorator chip:  bps-rating-stars     "★★★★★"
 *     text-editor  Decorator chip:  bps-rating-caption   "from 2,400+ reviews"
 *
 * Each style class is self-sufficient. DOM order of the parts does not matter.
 * Works with the container set to Full or Boxed (Boxed = its .e-con-inner).
 *
 * Star colour: --bps-rating-star, default the band's --accent.
 *
 * Lite difference from Base: Lite has no --bps-border-color, so every border
 * reads var(--bps-border-color, var(--border-color)) — Lite's own border token.
 * The card goes one further and reads --light-border first (see the card block).
 *
 * The star and caption rules are two classes deep on purpose: the band's own
 * `.section.light p` (0,2,1) paints paragraph ink and would take them.
 */

.bps-rating-score, .bps-rating-inline, .bps-rating-card {
  --bps-rating-star: var(--accent);
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

/* The layout box: the container itself, or its .e-con-inner when Boxed. */
.e-con.bps-rating-score:not(.e-con-boxed),
.e-con.bps-rating-score > .e-con-inner,
.e-con.bps-rating-card:not(.e-con-boxed),
.e-con.bps-rating-card > .e-con-inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "n s" "n c";
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
}
.e-con.bps-rating-inline:not(.e-con-boxed),
.e-con.bps-rating-inline > .e-con-inner {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
}

/* Elementor's own spacing on the parts would fight the layout. */
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .elementor-element { margin: 0; width: auto; max-width: 100%; }
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .elementor-widget-text-editor p,
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .elementor-heading-title { margin: 0; }

/* --- The parts ----------------------------------------------------------- */
.bps-rating-number  { grid-area: n; }
.bps-rating-stars   { grid-area: s; }
.bps-rating-caption { grid-area: c; }

:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .bps-rating-number .elementor-heading-title {
  color: var(--text-highlight);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .bps-rating-stars,
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .bps-rating-stars p {
  color: var(--bps-rating-star);
  letter-spacing: 0.12em;
  line-height: 1.1;
  font-size: 0.95rem;
}
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .bps-rating-caption,
:is(.bps-rating-score, .bps-rating-inline, .bps-rating-card) .bps-rating-caption p {
  color: var(--text-color2);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* --- Score — the numeral leads, an accent rule, no box -------------------- */
.e-con.bps-rating-score:not(.e-con-boxed),
.e-con.bps-rating-score > .e-con-inner { column-gap: 14px; row-gap: 4px; }
/* `.section .e-con` form: bps-lite-shapes.css sets `.section .e-con { border-color:
 * var(--border-color) }` at (0,2,0), which beat a bare .bps-rating-score and turned
 * the accent rule grey. Measured 2026-09-23. */
.bps-rating-score,
.section .e-con.bps-rating-score {
  /* Elementor writes container padding at (0,3,0); this is the component's own. */
  padding-inline-start: 18px !important;
  border-inline-start: 3px solid var(--accent);
}
.bps-rating-score .bps-rating-number .elementor-heading-title { font-size: clamp(2.25rem, 3.6vw, 3rem); }
.bps-rating-score .bps-rating-stars   { align-self: end; }
.bps-rating-score .bps-rating-caption { align-self: start; }

/* --- Inline — one quiet line: stars · number | caption --------------------- */
.bps-rating-inline .bps-rating-stars   { order: 1; }
.bps-rating-inline .bps-rating-number  { order: 2; }
.bps-rating-inline .bps-rating-caption {
  order: 3;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--bps-border-color, var(--border-color));
}
.bps-rating-inline .bps-rating-number .elementor-heading-title { font-size: 1rem; }

/* --- Card — hugs its content on its own light surface ---------------------- */
.e-con.bps-rating-card:not(.e-con-boxed),
.e-con.bps-rating-card > .e-con-inner { column-gap: 16px; row-gap: 3px; }
/* Same (0,2,0) shapes rule as the score block above. The card's lines use Lite's
 * --light-border: it is a light surface, so on a dark band the band's own border
 * token (#444-ish) would draw a harsh dark frame round a white card. */
.bps-rating-card,
.section .e-con.bps-rating-card {
  /* Own light surface, so it reads on a dark band too — the same reset `.card` uses. */
  background: var(--light-bg);
  --text-color:     var(--light-text);
  --text-color2:    var(--light-text2);
  --text-highlight: var(--light-text-highlight);
  border: 1px solid var(--light-border, var(--bps-border-color, var(--border-color)));
  border-radius: 10px;
  padding: 16px 22px !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--light-text-highlight) 8%, transparent);
}
.bps-rating-card .bps-rating-number {
  padding-inline-end: 16px;
  border-inline-end: 1px solid var(--light-border, var(--bps-border-color, var(--border-color)));
  align-self: stretch;
  display: flex;
  align-items: center;
}
.bps-rating-card .bps-rating-number .elementor-heading-title { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.bps-rating-card .bps-rating-stars   { align-self: end; }
.bps-rating-card .bps-rating-caption { align-self: start; }