/* testimonial_panel block.
   CSS ported from design-export/base.css; no literal colour, every value a token.
   Split testimonial panel with stats.

   The template emits four modifier families — --bg-{background},
   --accent-{accent}, --{layout} and the padding class. Only the base element was
   implemented, so background, accent and layout were all inert; --quote-right in
   particular reversed the DOM order in PHP while the CSS kept the wide column on
   the left, so the stats got the wide track and the quote got the narrow one.

   The accent is now a single local custom property, --tp-accent, which the four
   accent-bearing parts read. Same mechanism as the --c ramp on levels_ladder and
   pathway_routes: one declaration per variant instead of four. */

.testimonial-panel {
  --tp-accent: var(--accent-on-dark);
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  padding: 2.1rem 2.2rem;
}

/* ------------------------------------------------------------------ ground
   `dark` is the only value the field offers, and the template defaults to it, so
   this restates the base ground rather than changing it. It exists so the
   modifier is real and so a second ground can be added later without moving the
   rule. */
.testimonial-panel--bg-dark { background: var(--surface-dark); }

/* ------------------------------------------------------------------ accent
   Following the resolution already applied to stats_banner (see
   pagebuilder/stats_banner/stats_banner.css): `lime` IS the brand's own on-dark
   accent, so it is the default and needs no rule; `white` does something.

   `blue` and `magenta` are removed from the field for the same reason magenta
   was removed there — a mid-tone brand fill does not carry as TEXT on the navy
   ground (bridge.css records 2.07:1 on ucdon's blue, 1.41:1 on ucnl's green,
   2.20:1 on hesta's). A row still holding one of those stored values matches no
   rule and therefore inherits --tp-accent's default, which is legible. */
.testimonial-panel--accent-white { --tp-accent: var(--white); }

.testimonial-panel__quote-mark,
.testimonial-panel__quote em,
.testimonial-panel__stats-heading { color: var(--tp-accent); }

/* ------------------------------------------------------------------ layout
   quote-left  the quote takes the wide track (the default)
   quote-right the STATS are printed first in the DOM by the template, so reading
               order stays sensible; the wide track has to move with them
   quote-only  no stats, so no grid — just a comfortable measure, centred */
.testimonial-panel__inner--split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.4rem;
  align-items: center;
}
.testimonial-panel--quote-right .testimonial-panel__inner--split {
  grid-template-columns: 1fr 1.3fr;
}
.testimonial-panel--quote-only .testimonial-panel__quote-col {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.testimonial-panel--quote-only .testimonial-panel__quote { max-width: none; }

/* ------------------------------------------------------------------ parts */
.testimonial-panel__quote-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: .7;
}
.testimonial-panel__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.38;
  color: var(--white);
  margin: .6rem 0 1rem;
}
.testimonial-panel__quote em { font-style: italic; }
.testimonial-panel__attribution { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .78); }
.testimonial-panel__stats-heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.testimonial-panel__stat + .testimonial-panel__stat { margin-top: 1rem; }
.testimonial-panel__stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.testimonial-panel__stat-label { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .78); }

/* Below the collapse the grid is one column, so the visual swap quote-right
   describes no longer exists and reading order is the DOM order either way. */
@media (max-width: 64em) {
  .testimonial-panel__inner--split,
  .testimonial-panel--quote-right .testimonial-panel__inner--split {
    grid-template-columns: 1fr;
  }
}