/* =========================================================================
   template-parts/section-testimonials.php
   Moved out of the partial's inline <style id="rv-testimonials-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

.rv-testi { overflow: hidden; } /* section padding comes from .es-section (utilities.css) */
/* Surface colours resolve through tokens rather than a literal #fff: identical
   in light mode, and correct once the dark-mode token block goes live. */
.rv-testi--tint  { background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg-surface) 100%); }
.rv-testi--white { background: var(--bg-surface); }
.rv-testi--gray  { background: var(--gray-50); }

/* ---- Third-party review platform trust strip ---- */
.rv-review-strip {
  max-width: 940px;
  margin: 0 auto var(--gap-fluid-xl);
}

/* --fs-eyebrow, not the 11px this was. Every other mono uppercase label on
   the site is 12px, and 11px uppercase with 1.4px tracking was the smallest
   text on either page. */
.rv-review-strip-label {
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.rv-review-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

/* ── Five or more platforms ─────────────────────────────────
   `auto-fit` fits as many 150px tracks as the container allows, which is
   right for three or four badges: the tracks collapse to the item count and
   the row is full and even at every width.

   At five it breaks. The column count follows the WIDTH, not the item
   count, so any width where exactly four tracks fit (roughly 600 to 750px)
   leaves the fifth badge alone in column one of a second row, quarter
   width, with three empty tracks beside it. The 2-column phone rule below
   does the same thing at 2 + 2 + 1.

   Flex wrapping fixes it because a short last row centres instead of
   left-aligning into empty tracks. The max-width is what stops that lone
   badge from stretching to the full container and reading as a different,
   larger component than the four above it.

   Scoped to a modifier rather than replacing the grid, so the three-badge
   strip on the home, About, Plus, White-Label and CRO pages is untouched. */
.rv-review-badges--many {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.rv-review-badges--many .rv-review-badge {
  flex: 1 1 150px;
  max-width: 240px;
}

.rv-review-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 14px);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.rv-review-badge:hover {
  border-color: var(--brand-300);
  transform: translateY(-3px);
}

.rv-rb-logo {
  height: 26px;
  max-width: min(120px, 100%);  /* the 120px cap, but never wider than the
                                 badge holding it: at a 320px viewport the
                                 badge's content box is 113px and a fixed
                                 cap pushed the logo past its own edge */
  width: auto;
  object-fit: contain;
  display: block;
}

.rv-rb-stars {
  position: relative;
  display: inline-block;
  font-size: var(--fs-body-sm);
  line-height: 1;
}

/* The score as the site's star, assets/svg/star.svg (10 Sep 2026), through
   the shared .es-stars strip in utilities.css. It used to be the text glyph
   drawn twice, a grey row and a gold copy clipped to the rating; the same
   pair is now the strip's track and fill. The line box above keeps the row
   at the height the glyph gave it. */
.rv-rb-stars .es-stars {
  --stars-size: 14px;
  --stars-track: var(--gray-300);
  color: var(--star-color);
}

.rv-rb-score {
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}

.rv-rb-score strong {
  color: var(--text-heading);
  font-size: var(--fs-body-sm);
  font-weight: var(--font-extrabold);
}

/* A platform we are listed on but have no published score for. The badge
   is the logo alone, so it centres in the cell instead of sitting at the
   top of a box sized for two more rows that are not there. Same card,
   same height, no gap where a star row would have been. */
.rv-review-badge--logo {
  justify-content: center;
  align-items: center;
}

.rv-review-badge--logo .rv-rb-logo { margin: auto; }

@media (max-width: 767px) {
  /* `minmax(0, 1fr)` rather than a bare `1fr`. A `1fr` track has an
     automatic minimum of `auto`, which is the width of its content, so
     the two badges floored at 150px each: 150 + 14 + 150 is 314, against
     296 of container at a 320px viewport, and the right-hand badge was
     cut off at the edge of the screen on every page that runs this strip.
     Explicitly flooring the tracks at zero lets them take the width they
     are given and the rating wraps inside the badge instead.

     Nothing changes above about 344px, which is where two 150px badges
     and their gap start fitting on their own. */
  .rv-review-badges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- Auto-scrolling testimonial marquee ---- */
/* Five stars from assets/svg/star.svg via .es-stars (utilities.css), at the
   reference's 12px. The font size stays because it sets the row's line box,
   which keeps the card's rhythm where the text glyphs had it. */
.rv-testi-stars {
  color: var(--star-color);
  font-size: var(--fs-body);
  margin-bottom: 18px;
}

.rv-testi-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.rv-testi-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-surface);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.rv-testi-author-meta { text-align: left; min-width: 0; }

.rv-testi-author-meta strong {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--text-heading);
}

/* --fs-eyebrow rather than 11px. This is the client's own name and location
   under their quote, and it was the smallest text on either page: uppercase,
   tracked, in muted ink, at a size nothing else on the site uses. */
.rv-testi-author-meta span {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Marquee track with left/right fade mask */
.rv-testi-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  overflow: hidden;
}

.rv-testi-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: rvTestiScroll 55s linear infinite;
  padding: 6px 0 14px;
}

.rv-testi-track:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rv-testi-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

@keyframes rvTestiScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rv-testi-card {
  width: 380px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 14px);
  padding: 28px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.rv-testi-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-4px);
}

.rv-testi-card .rv-testi-stars { font-size: var(--fs-caption); margin-bottom: 12px; }

/* --fs-card-title, the same size every other card heading on both pages
   uses. At the 16px this was, a testimonial card's heading was the only
   h3 on the page smaller than the body copy sitting two cards over. */
.rv-testi-card h3 {
  font-size: var(--fs-card-title);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  margin-bottom: 10px;
}

/* --fs-body-sm, matching the card copy in the feature grid and the pricing
   tables, rather than a 14px used nowhere else in a card. */
.rv-testi-card p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.rv-testi-card .rv-testi-author img { width: 38px; height: 38px; }

@media (max-width: 767px) {
  .rv-testi-card { width: 300px; }
}

/* Optional closing CTA, centred under the marquee. */
.rv-testi-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-fluid-lg);
}