/* ============================================================================
   REVIEWS — "Trusted by our winners"

   A fixed intro column beside a continuously scrolling rail of review cards.

   THE MARQUEE IS PURE CSS, no JavaScript at all. The card list is rendered
   twice; the track translates left by exactly one copy (its own width plus the
   gap that follows it) and then snaps back, which lands copy 2 precisely where
   copy 1 began — so the loop has no visible seam. Because the movement is a
   transform it stays on the compositor and does not relayout the page.

   Trustpilot green is NOT tokenised to the brand palette: it is Trustpilot's
   colour, and recolouring it to the site's blue would misrepresent the badge.
   ========================================================================== */

.hv-reviews {
  --rv-green: #00b67a;
  --rv-card: #ffffff;
  --rv-ink: var(--hv-ink, #0e1a26);
  --rv-muted: var(--hv-muted, #6b7885);
  --rv-line: var(--hv-line, #e6e9ee);
  --rv-gap: var(--hv-space-4, 1rem);

  position: relative;
  display: grid;
  gap: var(--hv-space-5, 1.25rem);
  align-items: center;
  padding: var(--hv-space-6, 1.75rem);
  border-radius: var(--hv-radius-xl, 22px);
  border: 1px solid var(--rv-line);
  overflow: hidden;
  /* Barely-there mint wash from the right, echoing the Trustpilot green
     without tinting the cards themselves. */
  background: linear-gradient(115deg, #ffffff 0%, #ffffff 52%, #f4fbf8 100%);
}

@media (min-width: 62rem) {
  .hv-reviews {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--hv-space-6, 1.75rem);
    padding: var(--hv-space-3, 1.75rem) var(--hv-space-7, 2.25rem);
  }
}

/* Optional watermark, bottom-left, behind everything. Only rendered when an
   image is set — see the Watermark setting. */
.hv-reviews__stag {
  position: absolute; left: -24px; bottom: -34px;
  width: 210px; height: 210px;
  pointer-events: none; z-index: 0;
  opacity: .06;
  background: var(--rv-watermark) no-repeat center / contain;
}

/* ---- intro column -------------------------------------------------------- */

.hv-reviews__intro {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: var(--hv-space-2, .45rem);
  min-width: 0;
}

.hv-rv-brandlink { text-decoration: none !important; }

.hv-rv-brand {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 2px;
}
.hv-rv-brand__tp { width: 24px; height: 24px; fill: var(--rv-green); display: block; }
.hv-rv-brand__g  { width: 22px; height: 22px; display: block; }
.hv-rv-brand__name {
  font-family: var(--hv-font, inherit);
  font-size: var(--hv-fs-h4, 1.125rem);
  font-weight: var(--hv-fw-black, 800);
  letter-spacing: -.01em;
  color: var(--rv-ink);
}

.hv-reviews__title {
  margin: 0;
  font-family: var(--hv-font-heading, inherit);
  font-size: var(--hv-fs-h3, 1.75rem);
  font-weight: var(--hv-fw-black, 800);
  line-height: var(--hv-lh-tight, 1.15);
  color: var(--rv-ink);
  text-wrap: balance;
}

/* Rating block — a link when a global link is set, a div when not; both must
   look identical, so the styling hangs off the class, not the element. */
.hv-reviews__score {
  display: flex; align-items: center; gap: var(--hv-space-3, .7rem);
  margin-top: var(--hv-space-3, .7rem);
  text-decoration: none !important;
  color: inherit;
}
.hv-reviews__rating {
  font-size: var(--hv-fs-h4, 1.125rem);
  font-weight: var(--hv-fw-black, 800);
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- stars --------------------------------------------------------------- */

.hv-rv-stars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.hv-rv-star {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  background: #dcdce6;             /* Trustpilot's empty-star grey */
  border-radius: 2px;
}
.hv-rv-star.is-on { background: var(--rv-green); }
.hv-rv-star svg { width: 13px; height: 13px; fill: #fff; display: block; }

.hv-rv-stars--lg .hv-rv-star { width: 22px; height: 22px; border-radius: 3px; }
.hv-rv-stars--lg .hv-rv-star svg { width: 17px; height: 17px; }

/* ---- marquee ------------------------------------------------------------- */

.hv-reviews__deck { position: relative; z-index: 1; min-width: 0; }

.hv-reviews__marquee {
  /* Clipped, not scrollable: reviews.js moves the track with a transform,
     which is sub-pixel and GPU-composited — a scroll position snaps to whole
     pixels and stuttered at this speed. The padding keeps card borders and
     focus rings off the clip edge, which clips vertically too.

     touch-action: pan-y hands horizontal gestures to the drag handler while
     leaving vertical ones to the page, so a swipe down the page still works
     even when it starts on a review. */
  overflow: hidden;
  padding-block: 6px 10px;
  touch-action: pan-y;
  cursor: grab;
}
.hv-reviews__marquee.is-dragging { cursor: grabbing; }
/* While dragging, text selection turns the whole rail blue. */
.hv-reviews__marquee.is-dragging,
.hv-reviews__marquee.is-dragging * { user-select: none; }

.hv-reviews__track {
  display: flex;
  gap: var(--rv-gap);
  width: max-content;
  will-change: transform;
}

.hv-rv-group {
  display: flex;
  align-items: stretch;
  gap: var(--rv-gap);
  flex: 0 0 auto;
}

.hv-rv-card {
  flex: 0 0 clamp(258px, 30vw, 340px);
  display: flex; flex-direction: column;
  gap: var(--hv-space-2, .45rem);
  padding: var(--hv-space-4, 1rem) var(--hv-space-4, 1rem) var(--hv-space-5, 1.25rem);
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: var(--hv-radius-lg, 16px);
  text-decoration: none !important;
  color: inherit;
  transition: border-color .18s ease;
}
a.hv-rv-card:hover { border-color: rgba(0, 182, 122, .5); }
a.hv-rv-card:focus-visible { outline: 2px solid var(--rv-green); outline-offset: 3px; }

.hv-rv-card__head {
  display: flex; align-items: center; gap: var(--hv-space-3, .7rem);
  min-width: 0;
}

.hv-rv-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: #e6f7f1;
  color: #0a8c5f;
  font-weight: var(--hv-fw-black, 800);
  font-size: var(--hv-fs-sm, .875rem);
  letter-spacing: .02em;
}
.hv-rv-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.hv-rv-card__who { flex: 1 1 auto; min-width: 0; }
.hv-rv-card__name {
  display: flex; align-items: center; gap: 5px;
  font-weight: var(--hv-fw-bold, 700);
  font-size: var(--hv-fs-body, 1rem);
  min-width: 0;
}
.hv-rv-card .hv-rv-card__name { color: var(--rv-ink); }

.hv-rv-verified { flex: 0 0 auto; display: inline-flex; }
.hv-rv-verified svg { width: 15px; height: 15px; display: block; }
.hv-rv-verified circle { fill: var(--rv-green); }

.hv-rv-card__when {
  flex: 0 0 auto;
  font-size: var(--hv-fs-xs, .75rem);
  color: var(--rv-muted);
  white-space: nowrap;
}

/* Clamped to three lines, so one long review can never make the whole rail
   tall. The browser adds its own ellipsis at the cut; the "Read more" below
   is rendered by PHP only when the text is actually longer than the clamp. */
.hv-rv-card .hv-rv-card__text,
.hv-rv-card__text {
  margin: 2px 0 0;
  font-size: var(--hv-fs-sm, .875rem);
  line-height: var(--hv-lh-normal, 1.6);
  color: #3d4a57;
  overflow-wrap: anywhere;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rv-clamp, 3);
  line-clamp: var(--rv-clamp, 3);
  overflow: hidden;
}

.hv-rv-card__more {
  margin-top: auto;            /* pinned to the foot, so cards line up */
  padding-top: var(--hv-space-2, .45rem);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hv-fs-xs, .75rem);
  font-weight: var(--hv-fw-bold, 700);
  color: #05865b;
}
a.hv-rv-card:hover .hv-rv-card__more { text-decoration: underline; }

/* ---- view more ----------------------------------------------------------- */

.hv-rv-morewrap {
  display: flex; justify-content: center;
  margin-top: var(--hv-space-4, 1rem);
}

/* !important on the background and colour of every state: Elementor's global
   kit styles bare links and buttons (the old site's pink) at a specificity a
   lone class cannot beat. Same fix the meter's arrows needed. */
.hv-rv-more,
.hv-rv-more:hover,
.hv-rv-more:focus,
.hv-rv-more:active {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.62em 1.25em;
  border-radius: var(--hv-radius-pill, 999px) !important;
  background: #ffffff !important;
  color: var(--rv-ink) !important;
  border: 1px solid var(--rv-line) !important;
  font-size: var(--hv-fs-sm, .875rem);
  font-weight: var(--hv-fw-bold, 700);
  line-height: 1;
  text-decoration: none !important;
  transition: border-color .16s ease, color .16s ease;
}
.hv-rv-more:hover,
.hv-rv-more:focus-visible {
  border-color: var(--rv-green) !important;
  color: #05865b !important;
}
.hv-rv-more:focus-visible { outline: 2px solid var(--rv-green); outline-offset: 2px; }
.hv-rv-more__arrow { font-size: 1.05em; line-height: 1; }

/* ---- embedded widget ----------------------------------------------------- */

.hv-reviews__embed { position: relative; z-index: 1; min-width: 0; }
.hv-reviews__embed iframe { max-width: 100%; }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 61.99rem) {
  .hv-reviews { padding: var(--hv-space-5, 1.25rem); }
  .hv-rv-card { flex: 0 0 min(320px, 78vw); }
}

/* Phones. Stacked, the panel was carrying desktop-sized avatars, stars and
   padding down a 390px screen, which is what made it tower. Everything that
   contributes height is stepped down together so the proportions hold rather
   than one part shrinking out of scale with the rest. */
@media (max-width: 47.99rem) {
  .hv-reviews {
    padding: var(--hv-space-4, 1rem);
    gap: var(--hv-space-3, .7rem);
    border-radius: var(--hv-radius-lg, 16px);
  }

  /* Logo and heading share one row instead of stacking. The wordmark is
     dropped because the line underneath already reads "on Trustpilot" —
     saying it twice costs a whole row of height for no information. */
  .hv-reviews__intro {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .hv-rv-brandlink,
  .hv-rv-brand { flex: 0 0 auto; }
  .hv-rv-brand { margin-bottom: 0; }
  .hv-rv-brand__name { display: none; }
  .hv-rv-brand__tp { width: 22px; height: 22px; }
  .hv-rv-brand__g { width: 21px; height: 21px; }

  /* Sized to its text, not stretched, so it can sit centred beside the logo. */
  .hv-reviews__title { flex: 0 1 auto; }

  /* flex-basis 100% forces the rating onto its own row under the pair above. */
  .hv-reviews__score { flex: 1 0 100%; justify-content: center; margin-top: 0; gap: var(--hv-space-2, .45rem); }
  .hv-reviews__rating { font-size: var(--hv-fs-body, 1rem); }

  .hv-rv-stars--lg .hv-rv-star { width: 18px; height: 18px; }
  .hv-rv-stars--lg .hv-rv-star svg { width: 14px; height: 14px; }

  .hv-reviews__marquee { padding-block: 4px 6px; }

  /* Wider and shorter: a wider card fits more words per line, so two lines
     hold what three did on a narrow one — less height for the same review. */
  .hv-rv-card {
    flex: 0 0 min(340px, 88vw);
    gap: 3px;
    padding: var(--hv-space-3, .7rem);
  }
  .hv-rv-card__head { gap: var(--hv-space-2, .45rem); }
  .hv-rv-avatar { width: 34px; height: 34px; font-size: var(--hv-fs-xs, .75rem); }
  .hv-rv-card__name { font-size: var(--hv-fs-sm, .875rem); }
  .hv-rv-card .hv-rv-card__text,
  .hv-rv-card__text { font-size: var(--hv-fs-xs, .78rem); line-height: 1.5; --rv-clamp: 2; }
  .hv-rv-card__more { padding-top: 4px; }

  .hv-rv-morewrap { margin-top: var(--hv-space-3, .7rem); }
  .hv-rv-more,
  .hv-rv-more:hover,
  .hv-rv-more:focus,
  .hv-rv-more:active { padding: 0.55em 1.05em; font-size: var(--hv-fs-xs, .75rem); }
}

@media (max-width: 30rem) {
  .hv-reviews__title { font-size: var(--hv-fs-h4, 1.4rem); }
  .hv-reviews__stag { width: 150px; height: 150px; }
}

/* Movement off. The second copy is hidden (it exists only to hide the loop's
   seam) and the row becomes an ordinary scroller, so every review is still
   reachable rather than frozen off-screen. */
@media (prefers-reduced-motion: reduce) {
  /* Nothing advances on its own — reviews.js checks the same preference — but
     the rail stays draggable, so both copies are kept to preserve the loop. */
  .hv-reviews__track { transition: none; }
}