/* ==========================================================================
   TESTIMONIALS PAGE
   Enqueued by page-testimonials.php only.

   THE GROUND RHYTHM
   -----------------
   The front page alternates --base / --surface / --void / copper. This page
   used to be --void end to end, which is unreadable at 38 cards long:

     .tr-hero      --void       (dark — the fixed nav and white H1 live here)
     .tr-summary   .sect-light  (--base — totals + rating spread)
     .tr-reviews   .sect-light  (--base — the wall of 38)
     .tr-cta       .sect-copper (the closing band)

   `.sect-light` / `.sect-copper` are defined globally in assets/css/chrome.css
   and bring their own child overrides (headings, body copy, strong, eyebrow,
   outline button, chips, crumbs). Nothing here re-declares those. What this
   file owns is the page-specific components on top of those grounds.

   THE ACCENT FLIP — read this before touching a colour
   ----------------------------------------------------
   --copper-hot is for DARK grounds ONLY. On --base and --surface it fails
   contrast. Every copper value below is --copper, and it is switched by
   ground through the local --tr-* custom properties so the rule that consumes
   them is written once:

     dark  ground  →  --tr-star / --tr-accent = --copper-hot
     light ground  →  --tr-star / --tr-accent = --copper

   There is no amber in this file any more. The old --tr-star: #F59E0B was a
   raw hex the design used for star glyphs, which broke the token rule and sat
   outside the copper family.

   Everything is scoped under `.pcr-testimonials`. This page reuses the front
   page's card markup — `.rail > figure.review`, `.stars`, `q`, `.r-author` —
   but NOT front.css or front-addendum.css, which are front-page only (see
   inc/assets.php). So the card treatment below is written from scratch against
   the tokens rather than inherited.
   ========================================================================== */

.pcr-testimonials {
  /* Dark-ground defaults. Overridden one level down for the light bands. */
  --tr-star: var(--copper-hot);
  --tr-star-empty: var(--on-dark-line);
  --tr-accent: var(--copper-hot);
  --tr-bar: 12px;
  --tr-gap: clamp(16px, 1.8vw, 26px);

  background: var(--void);
  color: var(--on-dark);
}

/* The light bands. Declaring the accent HERE — on the ground, not on the
   component — is what guarantees no rule further down can accidentally reach
   for copper-hot on --base. */
.pcr-testimonials .sect-light {
  --tr-star: var(--copper);
  --tr-star-empty: var(--line);
  --tr-accent: var(--copper);
}

/* The closing band sits on copper itself, so its accent is white. */
.pcr-testimonials .sect-copper {
  --tr-star: #fff;
  --tr-star-empty: rgba(255, 255, 255, .45);
  --tr-accent: #fff;
}

/* Stars. pcr_reviews() emits only `ri-star-fill`, one per whole star, so the
   filled glyph is the only one that renders today. `.ri-star-line` is styled
   alongside it so an unfilled star inherits the ground's own hairline colour
   the moment one is ever emitted, rather than silently vanishing into
   `currentColor`. */
.pcr-testimonials .ri-star-fill { color: var(--tr-star); }
.pcr-testimonials .ri-star-line { color: var(--tr-star-empty); }

/* The nav is fixed and `.pcr-inner .section:first-child` in chrome.css
   reserves its height. This page wants a taller opening, so it re-derives the
   same offset rather than hard-coding a second magic number. */
.pcr-testimonials .section.tr-hero {
  padding-top: calc(var(--pcr-nav-offset) + var(--sp-3xl));
}

/* ============================================================== HERO ===== */
.pcr-testimonials .tr-title {
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-lg);
  color: #fff;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.pcr-testimonials .tr-lede {
  max-width: var(--measure-tight);
  color: var(--on-dark-mute);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}

/* =========================================================== SUMMARY ===== */
/* The ground itself is `.sect-light`. All that is added here is the internal
   two-up arrangement and the bar treatment — the ink, the body colour and the
   accent are all inherited from the global light system. */
.pcr-testimonials .tr-summary__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.pcr-testimonials .tr-summary__line {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
/* Must beat `.sect-light strong { color: var(--ink) }` — it does, and it says
   the same thing, so it is here only to hold the display face. */
.pcr-testimonials .tr-summary__line strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.pcr-testimonials .tr-summary__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-md);
  color: var(--tr-star);
  font-size: 1.35rem;
  line-height: 1;
}

.pcr-testimonials .tr-summary__note {
  margin: var(--sp-md) 0 0;
  max-width: 52ch;
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.pcr-testimonials .tr-summary__note + .tr-summary__note {
  margin-top: var(--sp-xs);
}

/* --- rating spread --------------------------------------------------------
   Five rows, each a square-ended bar. Square ends, not rounded: the brand cut
   is a chamfer and `--cut-pill` is off-brand.

   On --base the track is --line, not the old --on-dark-wash. A 4% white wash
   is invisible on a light ground — the track simply vanishes and the bar reads
   as a floating slab with no scale. --line is the token for "a rule on a light
   surface" and it matches the card borders below, so the section reads as one
   printed sheet.
   -------------------------------------------------------------------------- */
.pcr-testimonials .tr-bars {
  display: grid;
  gap: var(--sp-xs);
}

.pcr-testimonials .tr-bars__title {
  margin: 0 0 var(--sp-2xs);
  color: var(--tr-accent);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pcr-testimonials .tr-bar {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) 2.4em;
  gap: var(--sp-sm);
  align-items: center;
  color: var(--ink-light);
  font-size: var(--fs-xs);
}

.pcr-testimonials .tr-bar__label { white-space: nowrap; }

.pcr-testimonials .tr-bar__track {
  height: var(--tr-bar);
  background: var(--line);
  clip-path: var(--clip-xs);
}

.pcr-testimonials .tr-bar__fill {
  display: block;
  height: 100%;
  background: var(--tr-accent);
  clip-path: var(--clip-xs);
  transition: width var(--t-slow) var(--ease);
}

.pcr-testimonials .tr-bar__n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .pcr-testimonials .tr-summary__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: start;
  }
}

/* ========================================================== REVIEWS ===== */
/* A hairline between the two light bands. Without it the summary and the wall
   merge into one 4-screen-tall grey block and the summary stops reading as its
   own section. `--line` is the token for this; there is no white equivalent in
   the system. */
.pcr-testimonials .tr-reviews {
  border-top: 1px solid var(--line);
}

.pcr-testimonials .tr-reviews__count {
  margin-bottom: var(--sp-lg);
  color: var(--tr-accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --- the wall -------------------------------------------------------------
   `pcr_reviews()` returns a `.rail` wrapper. On the front page that is a
   horizontal scroller sized for five cards; here it holds every review.

   THREE COLUMNS, NOT A GRID. Thirty-eight reviews run from about twelve words
   to about ninety, so a uniform grid produces two 400px holes per row and the
   eye cannot find the next card. Multicol packs them instead: `column-count`
   with `break-inside: avoid` puts the long and short quotes side by side with
   no dead space and no JS.

   Reading order is down-then-across, not across-then-down. For a wall of
   equal-status client quotes that is the right trade — every card is fully
   visible at the same time and none is truncated — and it is the only masonry
   that survives a resize and a print stylesheet.

   The selector is `.pcr-testimonials .tr-grid .rail` rather than
   `.pcr-testimonials .rail` deliberately: front.css declares `.rail` as
   `display:flex; width:max-content`, and the extra class keeps this rule
   winning even if that stylesheet is ever loaded on this page. `width`,
   `padding` and `overflow` have to be reset for the same reason — a
   max-content flex row overflows at any viewport.
   -------------------------------------------------------------------------- */
.pcr-testimonials .tr-grid .rail {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  column-count: 3;
  column-gap: var(--tr-gap);
}

@media (max-width: 1100px) {
  .pcr-testimonials .tr-grid .rail { column-count: 2; }
}

@media (max-width: 720px) {
  .pcr-testimonials .tr-grid .rail { column-count: 1; }
}

/* --- one card -------------------------------------------------------------
   A plain block, NOT `display:flex`. A flex container is a multicol child
   whose height is content-driven, and `break-inside: avoid` is applied to
   that child — engines are markedly less reliable about honouring it on a flex
   formatting context than on a block one, and when it is dropped a long quote
   gets sliced in half across the column gap. `break-inside` is declared twice
   because `avoid-column` is the precise value but `avoid` is the one with the
   long support history; the first that parses wins.

   Because the cards size to their own content, the author block needs no
   `margin-top: auto` and no equal-height trick — which is exactly what makes
   this layout better than the grid it replaces.

   The spacing between cards is a margin, not a gap: multicol has no `gap`
   between items on the block axis, only `column-gap`.
   -------------------------------------------------------------------------- */
.pcr-testimonials .review {
  display: block;
  margin: 0 0 var(--tr-gap);
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  break-inside: avoid-column;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pcr-testimonials .review:hover {
  border-color: var(--copper-edge);
  box-shadow: var(--sh-1);
}

.pcr-testimonials .review .stars {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--sp-md);
  color: var(--tr-star);
  font-size: 1.0625rem;
  line-height: 1;
}
.pcr-testimonials .review .stars__icons {
  display: inline-flex;
  gap: 3px;
}
.pcr-testimonials .review .stars__value {
  color: var(--ink-light);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* The client's words. `quotes: none` drops the typographic " marks the <q>
   element adds by default — they render heavier than the rest of the copy and
   were reading as part of the review — and the card carries no decorative
   quote glyph of its own, so the words stand alone. Verbatim text, set only;
   nothing here touches the string pcr_reviews() prints. */
.pcr-testimonials .review q {
  display: block;
  margin: 0 0 var(--sp-md);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  overflow-wrap: anywhere;
}

/* The note on a quote Fiverr cut off. It is injected straight after the
   quote's </q>, and deliberately quiet — it explains an absence, it is not part
   of the review, and it must not read as though we had written it. */
.pcr-testimonials .review .r-trunc {
  margin: 0 0 var(--sp-md);
  color: var(--support);
  font-size: var(--fs-3xs);
  font-style: italic;
  line-height: 1.5;
}

.pcr-testimonials .review .r-response {
  margin: 0 0 var(--sp-lg);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 2px solid var(--tr-accent);
  background: var(--copper-wash);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.pcr-testimonials .review .r-response strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pcr-testimonials .review .r-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
}
.pcr-testimonials .review .r-author strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.pcr-testimonials .review .r-meta {
  display: inline-flex;
  align-items: center;
  /* Country names are long ("United Arab Emirates") and the column gets narrow
     before the wall does — without this the country wraps under itself and the
     flag ends up stranded on its own line. */
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink-light);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* The flag is decorative — the country name sits beside it — so it carries an
   empty alt in the markup and must not be stretched by its 20x14 box. The ring
   is a dark hairline here, not `rgba(255,255,255,.18)`: a white ring on a white
   card is invisible and the flag edges bleed into the surface. */
.pcr-testimonials .review .r-flag {
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(10, 13, 20, .12);
}

.pcr-testimonials .tr-empty {
  color: var(--ink-light);
}

/* ============================================================== CTA ===== */
/* Full-bleed copper, matching the front page's `.cta`: a plain band, not a
   graphite box floating on it. The panel survives as the two-column layout
   only — its background, border and clip are all dropped, because a dark card
   on copper would fight the band instead of sitting inside it. */
.pcr-testimonials .tr-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255, 255, 255, .38);
}

.pcr-testimonials .tr-cta__copy h2 {
  color: #fff;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.pcr-testimonials .tr-cta__copy p {
  margin-top: var(--sp-sm);
  max-width: 52ch;
  color: rgba(255, 255, 255, .9);
  line-height: var(--lh-body);
}

.pcr-testimonials .tr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

/* `.sect-light` redraws `btn--outline-light` with ink, which is right for a
   light ground and wrong here: on copper the white-on-white version from
   components.css is correct, but its --on-dark-line border is too faint
   against a saturated ground. Same treatment as the front page's `.btn-outline`. */
.pcr-testimonials .sect-copper .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .6);
}
.pcr-testimonials .sect-copper .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}

@media (max-width: 760px) {
  .pcr-testimonials .tr-cta__panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .pcr-testimonials .tr-cta__actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* ======================================================== NARROW PHONES ==
   390px and below. The wall is already one column at 720px; what is left is
   the horizontal overflow that long unbroken strings in a review (a URL, a
   part number, a pasted token) would otherwise cause. `overflow-wrap` on the
   quote and the meta covers the text; `overflow-x: clip` on the page is the
   backstop for the flag and the chamfered cards, and does not create a scroll
   container the way `hidden` would.
   ========================================================================== */
@media (max-width: 420px) {
  .pcr-testimonials { overflow-x: clip; }
  .pcr-testimonials .review { padding: var(--sp-lg); }
  .pcr-testimonials .tr-bar {
    grid-template-columns: 3.6em minmax(0, 1fr) 2.2em;
    gap: var(--sp-xs);
  }
  .pcr-testimonials .tr-summary__line { font-size: var(--fs-lg); }
}

/* ============================================================== PRINT ===
   A wall of 38 cards is exactly the thing someone prints. Multicol reflows
   across pages correctly, but the chamfered clip-path and the copper accents
   cost toner for nothing on paper.
   ========================================================================== */
@media print {
  .pcr-testimonials .tr-reviews,
  .pcr-testimonials .tr-summary { background: #fff; }
  .pcr-testimonials .review {
    border: 1px solid #ccc;
    clip-path: none;
  }
  .pcr-testimonials .ri-star-fill { color: #000; }
}