/* ===== GOOGLE REVIEWS (inc/google-reviews.php) =====
   One block, two placements: a band above the footer on every page, and section 6 of the
   homepage. Brand rules hold: ink type, oak only for the stars and hairlines, near-square
   corners. The only colours that are not ours are inside Google's G, which keeps its own.
   Google's rules shape the score: the G on white with one G-width of clear space round it,
   and no stars anywhere near it or the word Google (stars live in the cards only). */

.greviews, .greviews-direct-section { position: relative; --greviews-small: #6B6662; }   /* 5.7:1 on white, 5.0:1 on the ground */
.greviews--band { padding: 84px 0; background: var(--qfm-white); border-top: 1px solid var(--qfm-rule); }

/* ---- heading row */
.greviews-head { margin-bottom: 40px; }
.greviews--band .greviews-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
}
.greviews-heading .label { margin-bottom: 10px; }
.greviews-title { font-size: 34px; letter-spacing: -0.5px; margin: 0; }
.greviews--home .greviews-head { margin-bottom: 44px; }
.greviews--home .greviews-head h2 { margin-bottom: 18px; }

/* the score: G, rating, count, as-of date - one link to the profile, so the claim is one tap
   from its proof. No border box: Google wants one G-width of clear space round the G, and a
   box that close would sit inside it. */
.greviews-score {
  display: inline-flex; align-items: center; gap: 30px;      /* = the G's width: its clear space */
  color: var(--qfm-ink); text-decoration: none; line-height: 1.25; padding: 2px 0;
}
.greviews-score:hover { text-decoration: none; color: var(--qfm-ink); }
.greviews-score:hover .greviews-rating { text-decoration: underline; text-decoration-color: var(--qfm-oak); text-underline-offset: 4px; }
.greviews-score:focus-visible { outline: 2px solid var(--qfm-oak); outline-offset: 6px; }
.greviews-figures { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.greviews-rating { font-size: 17px; font-weight: 600; color: var(--qfm-ink); }
.greviews-rating strong { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin-right: 2px; }
.greviews-count { font-size: 14px; font-weight: 600; color: var(--greviews-small); }
.qfm-g { display: block; flex: none; }

/* ---- a customer's own stars, inside their card */
.qfm-stars { display: inline-flex; gap: 2px; line-height: 0; flex: none; }
.qfm-star svg { width: 16px; height: 16px; display: block; fill: none; stroke: var(--greviews-small); stroke-width: 1.5; }
.qfm-star.is-on svg { fill: var(--qfm-oak); stroke: var(--qfm-oak); }

/* ---- cards */
.greviews-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.greviews-card { margin: 0; display: flex; }
.greviews-card figure {
  margin: 0; width: 100%; display: flex; flex-direction: column;
  background: var(--qfm-white); border: 1px solid var(--qfm-rule); border-radius: var(--radius-lg);
  padding: 26px 24px 22px; box-shadow: var(--shadow-sm);
}
.greviews--band .greviews-card figure { background: var(--qfm-ground); border-color: transparent; box-shadow: none; }
.greviews-card .qfm-stars { margin-bottom: 14px; }
.greviews-text { margin: 0; flex: 1; font-size: 15px; line-height: 1.75; color: var(--qfm-text); }
.greviews-text p { margin: 0; }
/* a fade, not line-clamp: reviews have paragraph breaks, and line-clamp drops its "..." onto
   whatever line is seventh, including an empty one between two paragraphs */
.greviews-text.is-clamped p {
  max-height: calc(1.75em * 7); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
          mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.greviews-more {
  align-self: flex-start; margin-top: 8px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--qfm-ink);
  text-decoration: underline; text-decoration-color: var(--qfm-oak); text-underline-offset: 3px;
}
.greviews-more:hover { color: var(--qfm-oak-deep); }
.greviews-more:focus-visible { outline: 2px solid var(--qfm-oak); outline-offset: 2px; }
.greviews-who { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--qfm-rule); display: flex; flex-direction: column; gap: 4px; }
.greviews-name { font-weight: 800; font-size: 15px; color: var(--qfm-heading); }
.greviews-meta { font-size: 13px; color: var(--greviews-small); }
.greviews-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--qfm-rule); text-underline-offset: 3px; }
.greviews-meta a:hover { color: var(--qfm-ink); text-decoration-color: var(--qfm-oak); }
.greviews-note { margin: 18px 0 0; font-size: 13px; color: var(--greviews-small); text-align: center; }
.greviews-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- homepage only: the review the owner was given directly, not on Google - set apart and
   labelled so it can never be taken for a Google review */
.greviews-direct-section { padding: 0 0 84px; }
.greviews-direct {
  margin: 0; padding: 24px 26px 20px; border-radius: var(--radius-lg);
  background: var(--qfm-ground); border-left: 3px solid var(--qfm-oak);
}
.greviews-direct-source { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--greviews-small); letter-spacing: .02em; }
.greviews-direct-title { margin: 0 0 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.2px; color: var(--qfm-heading); }
.greviews-direct .greviews-text { max-width: 860px; }

/* ---- the two links */
.greviews-actions { margin: 36px 0 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* no agreed reviews yet: the score and the two links still make a complete band */
.greviews--nocards.greviews--band .greviews-head { margin-bottom: 0; }
.greviews--nocards .greviews-actions { margin-top: 28px; }
.greviews--nocards.greviews--band .greviews-actions { justify-content: flex-start; }
.greviews-btn {
  display: inline-block; padding: 14px 28px; border-radius: var(--radius-md);
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-decoration: none;
  transition: all var(--transition);
}
.greviews-btn--all { background: var(--qfm-ink); color: var(--qfm-ground); box-shadow: inset 0 -3px 0 var(--qfm-oak); border: 2px solid var(--qfm-ink); }
.greviews-btn--all:hover { background: var(--qfm-ink-soft); color: var(--qfm-ground); text-decoration: none; }
.greviews-btn--write { border: 2px solid var(--qfm-ink); color: var(--qfm-ink); }
.greviews-btn--write:hover { border-color: var(--qfm-oak); color: var(--qfm-ink); text-decoration: none; background: var(--qfm-ground); }
.greviews-btn:focus-visible { outline: 2px solid var(--qfm-oak); outline-offset: 3px; }

/* ---- the hero line on the homepage photo: words only (no stars by the Google name, and no G
   on a photograph - Google allows its G on white or black only) */
.hero-rating a { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-rating a:hover { text-decoration: underline; text-decoration-color: var(--qfm-oak); text-underline-offset: 3px; }
.hero-rating-sep { opacity: .6; margin: 0 2px; }
.hero-rating-g { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hero-rating-g .qfm-g { width: 14px; height: auto; }
.hero-content .hero-rating { border-radius: 14px; line-height: 1.4; font-size: 15px; max-width: none; padding: 6px 16px 6px 6px; }
.hero-rating a { align-items: center; gap: 12px; flex-wrap: nowrap; }
.hero-rating-text { display: block; flex: 1 1 auto; min-width: 0; }

/* ---- tablets and phones: one swipeable row instead of three tall cards stacked on every page */
/* the scroll region: reachable and visible from the keyboard */
.greviews-scroll:focus-visible { outline: 2px solid var(--qfm-oak); outline-offset: 6px; }

@media (max-width: 992px) {
  .greviews--band { padding: 64px 0; }
  .greviews-direct-section { padding-bottom: 64px; }
  .greviews-title { font-size: 28px; }
  .greviews-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -24px; padding: 0 24px 10px; scroll-padding-left: 24px; }
  .greviews-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); }
  .greviews-card { scroll-snap-align: start; }
}
/* the fixed call/WhatsApp bar on phones must not cover a focused link (WCAG 2.4.11) */
@media (max-width: 768px) { html { scroll-padding-bottom: 72px; } }
@media (max-width: 480px) {
  .greviews-rating strong { font-size: 23px; }
  .greviews-scroll { margin: 0 -16px; padding: 0 16px 10px; scroll-padding-left: 16px; }
  .hero-content .hero-rating { font-size: 14px; }
  .greviews-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .greviews-btn { transition: none; }
}
@media print {
  .greviews-more, .greviews-actions { display: none; }
  .greviews-text.is-clamped p { max-height: none; -webkit-mask-image: none; mask-image: none; }
}