/* ============================================================
   PRV Blocks — greviews.css
   Google Reviews block skin only: header, cards, avatar, stars,
   read-more clamp, and the cards-per-view steps.

   Track, arrows, dots, sr-only and focus rings live in base.css.
   No :root block. Every var() carries a literal fallback.

   CARDS PER VIEW IS SET HERE ON PURPOSE — prv-slider.js measures
   the rendered slide width and derives paging from it, so changing
   the flex-basis rules below is the only place per-view changes.
   ============================================================ */

.prv-greviews{
  --prv-track-gap: var(--prv-space-sm, 16px);
}

/* ---------- Header ---------- */
.prv-greviews .prv-greviews-head{
  text-align: center;
  margin-bottom: var(--prv-space-lg, 24px);
}
/* Award badge: held off at every width by request. The markup ships so
   re-enabling is a CSS-only change; a hidden lazy image is never fetched. */
.prv-greviews .prv-greviews-head__badge{ display: none; }

.prv-greviews .prv-greviews-head__stars{
  color: var(--prv-star, #F5A623);
  font-size: var(--prv-size-md, 18px);
  letter-spacing: 6px;
  line-height: 1;
  padding-left: 6px;   /* optical: cancels the trailing letter-spacing */
}
/* Doubled ancestry: Rey and Elementor both style h2 inside content. */
.prv-greviews .prv-greviews-head .prv-greviews-head__title{
  margin: var(--prv-space-xs, 12px) 0 0;
  color: var(--prv-blue-dark, #0F4682);
  font-size: var(--prv-size-lg, 22px);
  font-weight: var(--prv-weight-bold, 700);
  line-height: var(--prv-leading-tight, 1.15);
  letter-spacing: var(--prv-tracking-tight, -0.015em);
  text-wrap: balance;
}
.prv-greviews .prv-greviews-head__sub{
  padding-top: var(--prv-space-2xs, 8px);
  font-size: var(--prv-size-base, 16px);
  color: var(--prv-text-body, #6B7683);
}

/* ---------- Card ----------
   flex-basis is set per width step at the bottom of this file. */
.prv-greviews .prv-track .prv-greviews-card{
  flex: 0 0 100%;
  width: auto;
  display: flex; flex-direction: column;
  background: var(--prv-white, #FFFFFF);
  border: 1px solid var(--prv-line, #DCE1E7);
  border-radius: var(--prv-radius-lg, 12px);
  overflow: hidden;
  transition:
    box-shadow var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));
}
.prv-greviews .prv-greviews-card:hover{
  border-color: var(--prv-blue, #1868B3);
  box-shadow: var(--prv-shadow-md, 0 8px 24px rgba(10, 34, 64, 0.10));
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .prv-greviews .prv-greviews-card{ transition: none; }
  .prv-greviews .prv-greviews-card:hover{ transform: none; }
}

/* ---------- Top strip ---------- */
.prv-greviews .prv-greviews-card__strip{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--prv-space-xs, 12px);
  padding: var(--prv-space-xs, 12px) var(--prv-space-sm, 16px);
  background: var(--prv-surface-alt, #F2F4F7);
  border-bottom: 1px solid var(--prv-line, #DCE1E7);
}
.prv-greviews .prv-greviews-card__src{
  display: flex; align-items: center; gap: var(--prv-space-2xs, 8px);
  font-size: var(--prv-size-base, 16px); font-weight: var(--prv-weight-bold, 700);
}
.prv-greviews .prv-greviews-card__src img{ display: block; width: 20px; height: 20px; }
.prv-greviews .prv-greviews-card__stars{
  flex: 0 0 auto;
  color: var(--prv-star, #F5A623);
  font-size: var(--prv-size-base, 16px);
  letter-spacing: 2px; line-height: 1;
}

/* ---------- Body ---------- */
.prv-greviews .prv-greviews-card__body{
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  gap: var(--prv-space-xs, 12px);
  padding: var(--prv-space-sm, 16px);
  background: var(--prv-white, #FFFFFF);
}
.prv-greviews .prv-greviews-card__who{
  display: flex; align-items: center; gap: var(--prv-space-xs, 12px);
}
.prv-greviews .prv-greviews-card__id{ flex: 1 1 auto; min-width: 0; }
.prv-greviews .prv-greviews-card__avatar{
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;   /* avatar geometry, block-local */
  border-radius: var(--prv-radius-round, 50%);
  background: var(--prv-navy, #0A2240);
  color: var(--prv-white, #FFFFFF);
  font-size: var(--prv-size-base, 16px); font-weight: var(--prv-weight-bold, 700); line-height: 1;
}
.prv-greviews .prv-greviews-card__name{
  font-size: var(--prv-size-base, 16px); font-weight: var(--prv-weight-bold, 700); line-height: var(--prv-leading-snug, 1.3);
  overflow-wrap: break-word;
}
.prv-greviews .prv-greviews-card__loc{
  padding-top: 2px;
  font-size: var(--prv-size-sm, 14px);
  color: var(--prv-text-body, #6B7683);
}

/* Read-more clamp. Line count lives here — the script only measures whether
   anything is hidden and shows or hides the toggle accordingly. */
.prv-greviews .prv-greviews-card__text{
  font-size: var(--prv-size-base, 16px);
  color: var(--prv-text-body, #6B7683);
  line-height: var(--prv-leading-relaxed, 1.65);
  text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.prv-greviews .prv-greviews-card__text.is-open{ display: block; overflow: visible; }

/* Read-more toggle. Doubled class and full reset: Rey styles bare `button`
   with uppercase and letter-spacing, which rendered this as "READ MORE" with
   tracking. Do not reduce to one class. */
.prv-greviews .prv-greviews-card__more.prv-greviews-card__more{
  align-self: flex-start;
  min-height: var(--prv-hit-min, 44px);
  min-width: 0; width: auto;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none; background-image: none;
  font: inherit;
  font-size: var(--prv-size-sm, 14px);
  font-weight: var(--prv-weight-regular, 400);
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--prv-blue, #1868B3);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  box-shadow: none;
}
.prv-greviews .prv-greviews-card__more.prv-greviews-card__more:hover{
  color: var(--prv-text-link-hover, #0F4682);
  background: none;
  transform: none;
}
.prv-greviews .prv-greviews-card__more.prv-greviews-card__more[hidden]{ display: none; }

/* ---------- Full-width action bar ---------- */
.prv-greviews .prv-greviews-card__cta{
  display: flex; align-items: center; justify-content: center;
  min-height: var(--prv-hit-min, 44px);
  margin-top: auto;
  border-top: 1px solid var(--prv-line, #DCE1E7);
  color: var(--prv-blue, #1868B3);
  font-size: var(--prv-size-sm, 14px); font-weight: var(--prv-weight-medium, 500);
  text-decoration: none;
  transition: background-color var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));
}
.prv-greviews .prv-greviews-card__cta:hover{
  background: var(--prv-surface-alt, #F2F4F7);
  color: var(--prv-text-link-hover, #0F4682);
}

/* ---------- Width steps ----------
   Keyed to data-prv-w, which prv-slider.js writes on the block after
   measuring THE BLOCK's own width.
   Not @media: this page inflates the layout viewport, so a 466px-wide block
   was matching the 768px tablet rules and putting the arrows on top of the
   review text. Not @container: an at-rule can be dropped wholesale by a CSS
   field that does not parse it, which would strand the arrows at
   display:none on every width. Plain attribute selectors always parse.

   Cumulative — a wide block carries every smaller step too.
     xs   block >=  520px
     md   block >=  700px   2 up, arrows on
     lg   block >=  940px   3 up
     xl   block >= 1240px   wider gap
   -------------------------------------------------------------- */
.prv-greviews[data-prv-w~="xs"] .prv-greviews-head .prv-greviews-head__title{
  font-size: var(--prv-size-lg, 22px);
}
.prv-greviews[data-prv-w~="md"] .prv-greviews-head .prv-greviews-head__title{
  font-size: var(--prv-size-xl, 28px);
}
.prv-greviews[data-prv-w~="lg"] .prv-greviews-head .prv-greviews-head__title{
  font-size: var(--prv-size-xl, 28px);
}
.prv-greviews[data-prv-w~="xl"] .prv-greviews-head .prv-greviews-head__title{
  font-size: var(--prv-size-2xl, 36px);
}

.prv-greviews[data-prv-w~="md"] .prv-track .prv-greviews-card{
  flex-basis: calc((100% - var(--prv-track-gap)) / 2);
}
.prv-greviews[data-prv-w~="md"] .prv-nav.prv-nav{ display: inline-flex; }

.prv-greviews[data-prv-w~="lg"] .prv-greviews-head{ margin-bottom: var(--prv-space-xl, 32px); }
.prv-greviews[data-prv-w~="lg"] .prv-track .prv-greviews-card{
  flex-basis: calc((100% - 2 * var(--prv-track-gap)) / 3);
}

.prv-greviews[data-prv-w~="xl"]{ --prv-track-gap: var(--prv-space-lg, 24px); }

/* Pre-JS fallback only. Once the script has measured, data-prv-w exists and
   none of this matches, so it can never fight the real steps above. */
@media (min-width: 990px){
  .prv-greviews:not([data-prv-w]) .prv-track .prv-greviews-card{
    flex-basis: calc((100% - 2 * var(--prv-track-gap)) / 3);
  }
}