/* ---------- Reviews (Google social proof) ----------
   Layout 2a (2026-10-01): a left-aligned header row with the overall
   rating block on the right (home only, its count label the Google
   link), one row of three equal-height cards, and the broker CTA
   centred under them (the Google note above it on broker pages only,
   2026-10-02). Phones get design 6a (2026-10-02, the max-width: 767px block):
   the rating as a pill on the eyebrow's line, the cards as a sideways
   snap-scroll ending on a "See all" card, the CTA a centred pill.
   Markup: templates/partials/review-grid.php + review-card.php. */
.reviews {
  background: var(--surface-alt);
}
.reviews-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 48px;
  margin-bottom: 56px;
}
.reviews-head {
  margin-bottom: 56px;
}
.reviews-header .reviews-head {
  margin-bottom: 0;
}
.reviews-head .eyebrow {
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.reviews-head h2 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--text-heading);
  margin-bottom: 16px;
}
/* The home heading shares its row with the rating block and wraps to two
   lines; a broker page's "What clients say about <name>" stands alone and
   spans the container so it reads as one line (Kyle, 6 Oct 2026). The cap
   is sized so "Don't take our word for it," fills the first line at the
   56px size (764px) and the break falls at the comma; at 720px it fell
   after "for" (Kyle, 8 Oct 2026). */
.reviews-header .reviews-head h2 {
  max-width: 800px;
}
.reviews-head .section-sub {
  font-size: 1.125rem;
  margin: 0;
}
/* The overall Google rating: the number over five stars over the label,
   set off from the heading by a hairline. */
.reviews-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-left: 1px solid rgba(0, 51, 55, 0.18);
  padding-left: 40px;
}
.reviews-rating strong {
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  color: var(--ocean);
}
.reviews-rating .stars svg {
  width: 24px;
  height: 24px;
}
/* The label is the link to every review on Google, underlined like the
   phone pill's count. */
.reviews-rating-label {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 51, 55, 0.35);
}
.reviews-rating-label:hover {
  color: var(--ocean);
  text-decoration-color: currentColor;
}
/* The review count leads the label as a figure of its own, in the
   rating's ink, so the eye reads "5.0 ... 168 Google reviews". */
.reviews-rating-count {
  color: var(--ocean);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  margin-right: 2px;
}
/* The phone-only rating pill (templates/pages/index.php) and the
   phone-only "See all" card: desktop has the rating block and the Google
   note instead. */
.reviews-pill,
.review-see-all {
  display: none;
}
.stars {
  display: inline-flex;
  gap: 2px;
  white-space: nowrap;
}
.stars svg {
  width: 17px;
  height: 17px;
  fill: var(--star-gold);
  stroke: none;
}
/* The prev/next buttons, top-right of the row (script.js pages the grid
   and hides the row when every card fits in one). */
.review-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.review-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--ocean);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    transform 0.3s var(--ease-brand),
    opacity 0.3s var(--ease-brand);
}
.review-nav-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.review-nav-btn:hover:not(:disabled) {
  transform: translateY(var(--lift-hover));
}
.review-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.review-nav-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* One row of cards, every card the row's height: an expanded card grows
   inline and its neighbours stretch to match. Without script.js every
   card shows and the grid wraps. */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
  touch-action: pan-y; /* sideways touches are the swipe, vertical ones scroll */
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}
/* While a finger drags the row (script.js sets data-drag and the inline
   transform) it tracks without easing and the text does not select. */
.review-grid[data-drag] {
  transition: none;
  user-select: none;
  -webkit-user-select: none;
}
/* The dot strip under a swipeable row (the home loan-type and process
   tracks), built by script.js: a "Swipe for more" hint (gone once the
   first page has turned), a window of five dots that slides along the
   pages (an end dot shrinks while pages lie beyond it), centred. Phones
   show it; wider screens never do. */
.swipe-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.swipe-dots[hidden] {
  display: none;
}
.swipe-dots[data-paged] .swipe-hint {
  display: none;
}
.swipe-dot-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.swipe-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition:
    background 0.3s var(--ease-brand),
    transform 0.3s var(--ease-brand);
}
.swipe-dot[hidden] {
  display: none;
}
.swipe-dot.is-edge {
  transform: scale(0.65);
}
.swipe-dot[aria-current='true'] {
  background: var(--ocean);
  transform: scale(1.3);
}
.swipe-dot:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Numbered strip (the process steps): every page shows as its "01" label
   so the order reads at a glance; the current one is filled, none shrink. */
.swipe-dots-numbered {
  flex-wrap: wrap; /* six 30px dots plus the hint overflow a 320px phone; the hint takes its own line */
}
.swipe-dots-numbered .swipe-dot {
  width: 30px;
  height: 30px;
  font-family: var(--font-brand);
  font-size: 0.75rem;
  font-weight: var(--weight-heavy);
  line-height: 30px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.swipe-dots-numbered .swipe-dot.is-edge {
  transform: none;
}
.swipe-dots-numbered .swipe-dot[aria-current='true'] {
  color: #fff;
  background: var(--ocean);
  border-color: var(--ocean);
  transform: none;
}
/* Paging slides the row: script.js sets data-slide="out" (the old row
   drifts away and fades), swaps the cards, then parks the new row offset
   with data-slide="in" (no transition) and clears it so it eases home.
   --slide-dir is the offset's sign, set inline per step. */
.review-grid[data-slide] {
  opacity: 0;
  transform: translateX(calc(var(--slide-dir, 1) * 48px));
}
.review-grid[data-slide='in'] {
  transition: none;
}
/* A card's markup runs stars, text, toggle, reviewer row (the phone
   order); desktop lays it out by area so the reviewer row sits top-left
   beside the stars, as before, with the avatar hidden. */
.review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'who stars'
    'text text'
    'more more';
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 20px 1rem;
  background: var(--surface-card);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0, 51, 55, 0.06);
}
/* Cards outside the current row (script.js sets hidden): the display
   rule above would otherwise beat the browser's [hidden] style. */
.review-card[hidden] {
  display: none;
}
.review-card > .stars {
  grid-area: stars;
}
.review-card > .review-text {
  grid-area: text;
}
.review-card > .review-more {
  grid-area: more;
  justify-self: start;
}
.review-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.review-avatar {
  display: none;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ocean);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}
.review-meta {
  margin: 0;
  min-width: 0;
}
.review-meta strong {
  display: block;
  color: var(--ocean);
  font-size: 1rem;
}
.review-meta span {
  color: var(--muted);
  font-size: 0.8125rem;
}
/* Five lines of the text; script.js lifts the clamp on "Read more" and
   shows the toggle only when the text actually overflows. */
.review-text {
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.review-card[data-expanded] .review-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.review-more,
.rate-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-accent);
  cursor: pointer;
}
.review-more:hover,
.rate-more:hover {
  color: var(--fire-deep);
}
.review-more:focus-visible,
.rate-more:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 4px;
}
/* The Google note sits centred under the row on the broker pages, whose
   header has no rating block linking there (the home page's does, so its
   footer goes). */
.reviews-foot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 56px;
}
.reviews-header ~ .reviews-foot {
  display: none;
}
.reviews-note {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}
.reviews-note a {
  color: var(--text-accent);
  font-weight: 700;
}
.reviews-note a:hover {
  color: var(--fire-deep);
}

/* ---------- Tablet (styles.css @media (max-width: 980px), reviews rules only) ---------- */
@media (max-width: 980px) {
  .reviews-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
  }
  .reviews-rating {
    border-left: 0;
    padding-left: 0;
  }
  .reviews-rating strong {
    font-size: 64px;
  }
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---------- Phones, design 6a (styles.css @media (max-width: 767px), reviews rules only) ---------- */
  /* Reviews, design 6a: 20px gutters, 40px over and 36px under, 22px
     between the header row, the heading, the card row and the button. */
  .reviews {
    padding: 40px 0 36px;
  }
  .reviews .container {
    width: calc(100% - 40px);
  }
  .reviews-header {
    display: block;
    margin-bottom: 22px;
  }
  /* The rating block gives way to the pill, which shares the eyebrow's
     line (home only; a broker page has the eyebrow alone). */
  .reviews-rating {
    display: none;
  }
  .reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 12px;
    margin-bottom: 22px;
  }
  .reviews-head .eyebrow {
    font-size: 12px;
    letter-spacing: 0.25em;
    margin: 0;
  }
  .reviews-head h2 {
    flex-basis: 100%;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
  }
  .reviews-head .section-sub {
    flex-basis: 100%;
    font-size: 0.9375rem;
  }
  /* One star, the average, a dot, then the count underlined: our average
     rating, not a five-star count. The pseudo-element pads the tap
     target to 44px without growing the pill. */
  .reviews-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    box-shadow: 0 4px 12px rgba(0, 51, 55, 0.06);
    color: var(--ocean);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.3s var(--ease-brand);
  }
  .reviews-pill::before {
    content: '';
    position: absolute;
    inset: -7px 0;
  }
  .reviews-pill svg {
    width: 14px;
    height: 14px;
    fill: var(--star-gold);
    stroke: none;
  }
  .reviews-pill strong {
    font-weight: 800;
  }
  .reviews-pill-dot {
    color: var(--muted);
  }
  .reviews-pill-count {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .reviews-pill:hover {
    background: #f3e6dd;
  }
  .reviews-pill:active {
    background: #e8d6ca;
  }
  /* The arrows go; the row scrolls sideways under the finger instead
     (script.js reads --review-mode and leaves every card shown), bleeding
     to the screen edge. Every card snaps to the centre of the screen,
     one card per swipe, with its neighbours peeking in either side; the
     side padding is half the width the card leaves over, so the first
     and last cards reach the centre too. The bottom padding keeps the
     card shadows inside the scroll box; the negative margin gives that
     space back to the 22px gap. */
  .review-nav {
    display: none;
  }
  /* The home swipe tracks' dot strip (further down this block) shows on
     phones only. */
  .swipe-dots:not([hidden]) {
    display: flex;
  }
  .review-grid {
    --review-mode: scroll;
    /* 268px wide, or less than the screen on the narrowest phones so the
       neighbours still peek. */
    --review-card-w: min(268px, 82vw);
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: -4px -20px -28px;
    padding: 4px calc((100vw - var(--review-card-w)) / 2) 28px;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    transition: none;
  }
  .review-grid::-webkit-scrollbar {
    display: none;
  }
  /* A card: stars, text, a divider, then the avatar beside the name over
     the date. */
  .review-card {
    display: flex;
    flex: 0 0 var(--review-card-w);
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 51, 55, 0.07);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .review-text {
    font-size: 0.875rem;
    line-height: 1.55;
  }
  .review-card > .review-more {
    align-self: flex-start;
  }
  /* Stretch beats the desktop card's align-items: start, so the divider
     runs the card's full width, 18px in from either edge. */
  .review-who {
    align-self: stretch;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #efe5de;
  }
  .review-avatar {
    display: block;
  }
  .review-meta strong {
    font-size: 0.8125rem;
  }
  .review-meta span {
    font-size: 0.6875rem;
  }
  /* The last card: a dashed, unfilled link to every review on Google. */
  .review-see-all {
    display: flex;
    flex: 0 0 140px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1.5px dashed #e0cfc4;
    border-radius: 14px;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.3;
    scroll-snap-align: start;
  }
  .review-see-all strong {
    color: var(--ocean);
    font-weight: 800;
  }
  .review-see-all span {
    color: var(--fire);
    font-weight: 700;
  }
  /* No footer on phones: the "See all on Google" card ends the row, and
     the "Talk to a broker" button goes with the note (decided
     2026-10-02). */
  .reviews-foot {
    display: none;
  }
}