/* ============================================================
   PROCOM — Trust badges, Google rating and review grid
   Loaded after procom-site.css. Tokens only: every colour,
   space, radius and duration below is a var() from procom-ds.css.
   No hex literals, no Tailwind, no third-party CSS.
   ============================================================ */

/* ------------------------------------------------------------
   Stars
   The SVG inherits currentColor, so a parent (or .trust--on-dark)
   recolours both rows without touching this block. The empty row
   is dimmed with opacity rather than a second colour token so it
   stays correct on light and dark backgrounds alike.
   ------------------------------------------------------------ */
.trust-stars {
  display: inline-flex;
  align-items: center;
  color: var(--procom-orange);
  line-height: 0;
}

.trust-stars__svg {
  display: block;
  height: 1em;
  /* 5 stars at 20 units each = 100 wide, 20 tall. */
  width: 5em;
}

.trust-stars__track { opacity: 0.28; }
.trust-stars__fill  { opacity: 1; }

.trust-stars--sm { font-size: var(--fs-sm); }
.trust-stars--md { font-size: var(--fs-body); }
.trust-stars--lg { font-size: var(--fs-h4); }

/* ------------------------------------------------------------
   Rating badge
   ------------------------------------------------------------ */
.trust-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a.trust-rating:hover,
a.trust-rating:focus-visible { color: var(--text-accent); }

a.trust-rating:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.trust-rating__score {
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.trust-rating__count { color: var(--text-muted); }

/* pill — a bordered chip, for sitting on a busy background */
.trust-rating--pill {
  padding: var(--space-2) var(--space-4);
  border: var(--bw-hair) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

/* block — stacked and centred, for a sidebar or a form column */
.trust-rating--block {
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.trust-rating--block .trust-stars { font-size: var(--fs-h4); }

/* ------------------------------------------------------------
   Partner logos
   Greyscale at rest so a wall of vendor colours cannot outshout
   the page; full colour on hover and on keyboard focus.
   ------------------------------------------------------------ */
.trust-partners {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.trust-partners__logo {
  height: var(--space-5);
  width: auto;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.trust-partners__logo:hover,
.trust-partners__logo:focus-visible {
  filter: grayscale(0%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .trust-partners__logo { transition: none; }
}

/* ------------------------------------------------------------
   Strip — rating · Est. 2010 · logos
   ------------------------------------------------------------ */
.trust-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  /* Clear of the CTA button above it — 32px, the grid token. */
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-body);
}

/* Body size for the rating text, matching the strip. Set here rather than on
   .trust-rating so the pill/block variants elsewhere keep their own scale. */
.trust-strip .trust-rating { font-size: var(--fs-body); }

/* ~20px stars. The SVG is sized in em (height: 1em), so the star height IS
   this font-size — --fs-h4 is the 20px token. */
.trust-strip .trust-stars { font-size: var(--fs-h4); }

.trust-strip__est {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: var(--fs-body);
  color: var(--text-muted);
}

.trust-strip__sep {
  color: var(--text-muted);
  opacity: 0.6;
}

/* ------------------------------------------------------------
   On dark

   TEXT IS --grey-300, NOT ORANGE. The hero's orange glow sits
   directly behind this strip, and orange text on orange light is
   what made the badge vanish — the two are close enough in hue
   and value that the letterforms stop resolving. --grey-300 is
   the token the hero paragraph already uses (see procom-site.css
   .pc-hero__sub), so the strip now reads as part of the hero copy.

   The STARS stay --orange-300: a graphic mark, not text, and gold
   stars are what the eye is looking for in a rating.

   The pill is what makes both safe. A translucent --ink-900 panel
   puts a known dark ground under the strip instead of whatever
   part of the photograph happens to be behind it, so contrast no
   longer depends on the image.
   ------------------------------------------------------------ */
.trust--on-dark,
.trust--on-dark .trust-strip__est,
.trust--on-dark .trust-strip__sep,
.trust--on-dark .trust-rating,
.trust--on-dark .trust-rating__score,
.trust--on-dark .trust-rating__count {
  color: var(--grey-300);
}

.trust--on-dark .trust-stars { color: var(--orange-300); }

.trust--on-dark .trust-strip__sep { opacity: 0.75; }

.trust--on-dark a.trust-rating:hover,
.trust--on-dark a.trust-rating:focus-visible,
.trust--on-dark a.trust-rating:hover .trust-rating__score,
.trust--on-dark a.trust-rating:hover .trust-rating__count {
  color: var(--text-on-dark);
}

/* The pill.
   inline-flex so it hugs its contents rather than stretching the
   width of the hero column. --radius-pill is this system's fully
   round token (999px); there is no --radius-full.
   Horizontal padding is 20px, built from tokens as 16 + 4 rather
   than rounded to the nearest single token. */
.trust--on-dark {
  display: inline-flex;
  padding: var(--space-3) calc(var(--space-4) + var(--space-1));
  border-radius: var(--radius-pill);
  /* Fallback first: a solid-enough panel for engines with no
     backdrop-filter, where a 55% wash would leave the photograph
     legible through the text. */
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
}

@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .trust--on-dark {
    background: color-mix(in srgb, var(--ink-900) 55%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Logos on dark start brighter — a greyscale logo at 0.75 opacity
   disappears into a black background. */
.trust--on-dark .trust-partners__logo {
  opacity: 0.9;
  filter: grayscale(100%) brightness(1.8);
}

.trust--on-dark .trust-partners__logo:hover,
.trust--on-dark .trust-partners__logo:focus-visible {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* ------------------------------------------------------------
   On dark, in the footer

   .trust--on-dark carries pill chrome because the hero strip sits
   on a photograph and needs a known ground under it. The footer
   is already a flat dark surface, so that panel earns nothing
   here — and two stacked translucent pills in a footer column
   read as a mistake rather than a badge. The colour treatment
   stays; the panel is dropped.

   These are block-level so the rating and the logos stack rather
   than running together inline. The top margin rides on the
   elements themselves, so when either renders nothing there is no
   wrapper left behind holding empty space open.
   ------------------------------------------------------------ */
.pc-footer .trust--on-dark {
  display: flex;
  margin-top: var(--space-3);
  padding: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ------------------------------------------------------------
   Homepage review section
   Spacing mirrors .pc-services (90px/48px, 1200px inner) using
   the nearest grid tokens — --space-9 is 96px and --space-7 is
   48px, a 6px difference nobody can see, and it keeps this file
   free of raw pixel values.
   ------------------------------------------------------------ */
.trust-section {
  background: var(--bg-page);
  padding: var(--space-9) var(--space-7);
  font-family: var(--font-sans);
}

.trust-section__inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* ------------------------------------------------------------
   Review grid — 3 desktop / 2 tablet / 1 mobile
   ------------------------------------------------------------ */
.trust-reviews__heading {
  /* Boris Black Bloxx at weight 400. The brand guide's headings are
     NEVER bold — the face is already heavy, and synthesising bold on
     top of it smears the geometry. */
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-7);
}

.trust-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

/* ------------------------------------------------------------
   Review marquee — a single row scrolling sideways.

   The track carries two (or three) identical groups of cards and
   translates left by exactly one group's width before looping, so
   the copy behind it is already in place when the transform snaps
   back to zero. Blade sets --trust-marquee-shift to match the
   number of groups: -50% for two, -33.333% for three.

   NO GAP ON THE TRACK OR THE GROUPS — the spacing is a margin on
   each card instead. With a flex gap between groups, one group's
   width and the loop distance disagree by half a gap and the row
   visibly jolts once per cycle. Folding the gap into the card
   makes group width and travel distance the same number.
   ------------------------------------------------------------ */
.trust-marquee {
  /* Fixed card width: a marquee card cannot be fluid, since the
     loop distance is measured from it. */
  --trust-card-w: 360px;

  overflow: hidden;
  /* Cards enter and leave softly instead of being guillotined at
     the container edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--space-8), black calc(100% - var(--space-8)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black var(--space-8), black calc(100% - var(--space-8)), transparent 100%);
}

.trust-marquee__track {
  display: flex;
  /* flex-start, so expanding a card with Read more grows that card
     alone and leaves its neighbours at their natural height. */
  align-items: flex-start;
  width: max-content;
  animation: trust-marquee-scroll var(--trust-marquee-duration, 36s) linear infinite;
}

.trust-marquee__group {
  display: flex;
  align-items: flex-start;
}

@keyframes trust-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--trust-marquee-shift, -50%), 0, 0); }
}

/* Let a reader stop the row to finish a review — pointer or keyboard. */
.trust-marquee:hover .trust-marquee__track,
.trust-marquee:focus-within .trust-marquee__track {
  animation-play-state: paused;
}

.trust-marquee .trust-review {
  flex: 0 0 auto;
  width: var(--trust-card-w);
  margin-right: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  /* No animation at all. The row becomes an ordinary horizontal
     scroller the reader drives themselves — by touch, trackpad or
     scrollbar — so the reviews stay reachable. */
  .trust-marquee__track { animation: none; }

  .trust-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The duplicates exist only to feed the loop. Scrolling by hand
     past the same four reviews three times reads as a bug. */
  .trust-marquee__group[aria-hidden="true"] { display: none; }
}

.trust-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.trust-review__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-review__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-circle);
  background: var(--procom-orange);
  color: var(--text-on-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1;
  text-transform: uppercase;
}

.trust-review__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.trust-review__author {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--text-strong);
}

.trust-review__stars-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.trust-review__date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.trust-review__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Applied by JS only — never in the base rule. With scripting off the
   full review shows and no toggle exists, which is the safe failure.
   See the component for the reasoning. */
.trust-review__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trust-review__more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.trust-review__more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.trust-reviews__all {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-body);
}

.trust-reviews__all-link {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.trust-reviews__all-link:hover { color: var(--brand-hover); }

.trust-reviews__all-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------------------
   Form assurance (built now, wired in Phase 3)
   ------------------------------------------------------------ */
.trust-assurance {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-sans);
}

.trust-assurance__popia {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Breakpoints match procom-site.css: 1024 tablet, 720 mobile.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .trust-section { padding: var(--space-8) var(--space-5); }
  .trust-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .trust-reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .trust-reviews__heading { font-size: var(--fs-h3); }

  .trust-marquee { --trust-card-w: 300px; }
}

@media (max-width: 640px) {
  /* The hero CTA goes full width at this size, so the pill centres
     under it rather than hanging off the left edge. width: fit-content
     keeps it hugging its contents while the auto margins do the
     centring — inline-flex alone cannot be centred by a block parent
     without touching the hero's own styles. */
  .trust--on-dark {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .trust-strip {
    justify-content: center;
    gap: var(--space-3);
  }

  /* The dots are dropped once items stack, so a separator cannot end
     up orphaned at the start of a line. */
  .trust-strip__sep { display: none; }
}