/* ============================================================================
   REVIEW CARD — shared component
   Used by /testimonials.php (grid of 30) and the "Client testimonials" swiper
   on the home page. Follows the pattern Google uses for its review lists: an
   avatar, the reviewer's name and organisation, a row of amber stars, then the
   quote.

   Two avatar treatments:
     .gr-avatar              coloured circle with the reviewer's initial
     .gr-avatar--logo        the client's own logo on white, used on the home
                             page where real brand marks are available and
                             carry more weight than an initial

   The .gr-* prefix is unused elsewhere in app.css, so these rules are
   deliberately unscoped and safe to load on any page.

   Author names are plain divs rather than headings on purpose: a review byline
   is not a document section, and 39 of them as <h3> would both pollute the
   heading outline and pull against the site-wide heading ladder in app.css.
   ============================================================================ */

.gr-card {
  --gr-ink: #202124;          /* primary text  */
  --gr-body: #3c4043;         /* review body   */
  --gr-muted: #5f6368;        /* organisation  */
  --gr-line: #dadce0;         /* card border   */
  --gr-star: #fbbc04;         /* rating amber  */
  --gr-link: #1a73e8;         /* "Read more"   */

  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--gr-line);
  border-radius: 8px;
  padding: 1.25rem 1.35rem 1.15rem;
  height: 100%;
}

/* Grid — the testimonials page ---------------------------------------------
   Replaces the previous masonry row. With the quote clamped to a fixed number
   of lines the cards are near enough the same height that ragged masonry
   columns read as untidy rather than deliberate, and a plain grid keeps every
   row aligned without the extra script. */
.gr-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 576px) { .gr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .gr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Header: avatar + byline --------------------------------------------------- */
.gr-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.gr-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gr-av, #5f6368);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  overflow: hidden;
}
/* Logo variant: the mark sits on white and is contained, never cropped. */
.gr-avatar--logo {
  background: #fff;
  border: 1px solid var(--gr-line);
  padding: 3px;
}
.gr-avatar--logo picture { display: flex; width: 100%; height: 100%; }
.gr-avatar--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gr-byline { min-width: 0; }
.gr-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gr-ink);
  line-height: 1.3;
}
.gr-org {
  font-size: .8125rem;
  color: var(--gr-muted);
  line-height: 1.35;
  margin: .1rem 0 0;
  overflow-wrap: anywhere;
}

/* Stars --------------------------------------------------------------------- */
.gr-stars {
  display: flex;
  gap: 1px;
  margin-bottom: .55rem;
}
.gr-stars svg {
  width: 16px;
  height: 16px;
  fill: var(--gr-star);
  flex: 0 0 auto;
}

/* Quote --------------------------------------------------------------------- */
.gr-body {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--gr-body);
  margin: 0;
  overflow-wrap: break-word;
}
/* Applied only where quotes are long enough to need it (the testimonials
   page). The home-page quotes all fit, so they carry no clamp. */
.gr-body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read more" --------------------------------------------------------------
   Rendered by script only on the cards whose quote is actually taller than the
   clamp, so short reviews carry no dead control. */
.gr-more {
  align-self: flex-start;
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gr-link);
  font-size: .9375rem;
  font-family: inherit;
  cursor: pointer;
}
.gr-more[hidden] { display: none; }
.gr-more:hover { text-decoration: underline; }
.gr-more:focus-visible { outline: 2px solid var(--gr-link); outline-offset: 3px; border-radius: 2px; }