/* =====================================================================
   PERTH HOME GP — GOOGLE REVIEWS BLOCK
   Enqueued by: inc/enqueue-css.php (handle "phgp-block-reviews")
   Consumers: wp_block synced pattern(s) rendering .phgp-rw. Home 17432 first.
   ---------------------------------------------------------------------
   Source of truth is the "Google Reviews" folder in the project drive:
   built by build-reviews-css.py from the Claude Design handoff. Edit there
   and regenerate — hand-edits here will be overwritten.

   Every rule scoped under .phgp. Tokens use var(--token, #HEX) form.

   NO JS, deliberately. Row reveal and per-tile read-more are hidden-checkbox
   driven. WP Rocket's RUCSS crawls with Delay JS active, so classes applied by
   script often don't exist in the DOM it scans and their rules get dropped; a
   CSS-only mechanism can't be caught by that. The inputs also carry the [hidden]
   attribute, which this stylesheet overrides — so with CSS stripped entirely the
   section degrades to plain readable content rather than loose checkboxes.

   Background comes from the theme (paper) — the section sets none.
   Breakpoints: 960px / 560px (site convention).
   ===================================================================== */

.phgp .phgp-rw {
  position: relative; /* anchors the visually-hidden checkboxes */
  max-width: 1280px; margin: 0 auto;
  padding: 80px 56px 88px;
}

/* ---- Visually hidden (checkboxes stay focusable; sr-only text) ---- */
.phgp .phgp-rw-rev,
.phgp .phgp-rw-x,
.phgp .phgp-rw-sr {
  display: inline-block; /* overrides [hidden] so :checked siblings work */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- Header lockup (split) ---- */
/* nowrap, NOT wrap. With wrap, the score lockup jumped to its own line as soon
   as the heading's 720px max-width plus the score no longer fitted, which
   happened from about 1090px down to the 960px breakpoint. In that band the
   header half-collapsed: score under the heading and left aligned, while the
   tile grid was still three columns. 1024 and 1080 are common laptop widths,
   and 1280 at 125% Windows scaling is also 1024, so it was frequently visible.
   nowrap plus min-width:0 lets the heading shrink and wrap its own text instead,
   keeping heading left and score right all the way down to 960, where the media
   query stacks them deliberately. */
.phgp .phgp-rw-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: nowrap;
}
.phgp .phgp-rw-head > div:first-child { min-width: 0; }
.phgp .phgp-rw-eyebrow {
  font-size: 13px; color: var(--navy, #16335A); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px;
}
.phgp .phgp-rw-head h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--navy, #16335A); max-width: 720px;
  text-wrap: balance; margin: 0;
}
.phgp .phgp-rw-score { text-align: right; flex: none; }
.phgp .phgp-rw-score-row {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 10px; margin: 0;
}
.phgp .phgp-rw-score-num {
  font-size: 54px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1; color: var(--navy, #16335A);
}
.phgp .phgp-rw-stars { color: #F2A02E; font-size: 20px; letter-spacing: 2px; line-height: 1; }
.phgp .phgp-rw-count { font-size: 13px; color: var(--dim, #52606A); margin: 8px 0 0; }
.phgp .phgp-rw-glink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--navy, #16335A);
  margin-top: 12px; text-decoration: none;
}
.phgp .phgp-rw-glink:hover { color: var(--navy-deep, #0F2444); }
.phgp .phgp-rw-glink svg { width: 16px; height: 16px; display: block; }

/* ---- Grid ---- */
.phgp .phgp-rw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: stretch; list-style: none; margin: 44px 0 0; padding: 0;
}

/* ---- Tile ---- */
.phgp .phgp-rw-tile {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--hairline, #E5EFE9);
  border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.phgp .phgp-rw-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(15,36,68,0.06); }
.phgp .phgp-rw-tile-stars { font-size: 16px; margin: 0; }
.phgp .phgp-rw-text { margin: 14px 0 18px; }
.phgp .phgp-rw-text p {
  font-size: 15px; line-height: 1.6; color: var(--ink, #10243F); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; overflow: hidden;
}

/* per-tile read-more (long tiles only carry the input + label) */
.phgp .phgp-rw-readmore {
  font-size: 13px; font-weight: 600; color: var(--navy, #16335A);
  cursor: pointer; margin: -8px 0 18px; align-self: flex-start;
  text-decoration: underline; text-underline-offset: 3px;
}
.phgp .phgp-rw-readmore .phgp-rw-close { display: none; }
.phgp .phgp-rw-x:checked ~ .phgp-rw-text p { display: block; -webkit-line-clamp: none; overflow: visible; }
.phgp .phgp-rw-x:checked ~ .phgp-rw-readmore .phgp-rw-open { display: none; }
.phgp .phgp-rw-x:checked ~ .phgp-rw-readmore .phgp-rw-close { display: inline; }
.phgp .phgp-rw-x:focus-visible ~ .phgp-rw-readmore { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; border-radius: 2px; }

/* footer row (date slot reserved: .phgp-rw-date stays display:none until the
   direct Google sync provides a trustworthy createTime — see the plan doc) */
.phgp .phgp-rw-who {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--hairline, #E5EFE9);
  display: flex; align-items: center; gap: 10px;
}
.phgp .phgp-rw-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
.phgp .phgp-rw-tile:nth-child(3n+1) .phgp-rw-av { background: var(--mango-50, #FFEFD9); color: var(--mango-700, #9A5C0E); }
.phgp .phgp-rw-tile:nth-child(3n+2) .phgp-rw-av { background: var(--reef-50, #E5F7F0); color: var(--reef-700, #175840); }
.phgp .phgp-rw-tile:nth-child(3n)   .phgp-rw-av { background: var(--ocean-50, #E5F2FB); color: var(--ocean-700, #114668); }
.phgp .phgp-rw-name { font-size: 14px; font-weight: 600; color: var(--navy, #16335A); }
.phgp .phgp-rw-date { display: none; font-size: 13px; color: var(--dim, #52606A); }
/* ---- Show-more control (ghost button, .btn-ghost idiom) ---- */
.phgp .phgp-rw-more { display: flex; justify-content: center; margin-top: 32px; }
.phgp .phgp-rw-morebtn {
  display: none; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 12px;
  font-size: 15px; font-weight: 500;
  background: var(--surface, #FFFFFF); color: var(--ink, #10243F);
  border: 1px solid var(--hairline-strong, #C7D6CD);
  cursor: pointer; transition: border-color 0.15s;
}
.phgp .phgp-rw-morebtn:hover { border-color: var(--navy, #16335A); }
.phgp .phgp-rw-all {
  display: none; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--navy, #16335A);
  text-decoration: none; border-bottom: 1px solid var(--hairline-strong, #C7D6CD);
  padding-bottom: 3px;
}
.phgp .phgp-rw-all svg { width: 16px; height: 16px; display: block; }
/* =====================================================================
   RESPONSIVE — site breakpoints only
   ===================================================================== */
@media (max-width: 960px) {
  .phgp .phgp-rw { padding: 56px 24px 64px; }
  .phgp .phgp-rw-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .phgp .phgp-rw-head h2 { font-size: 32px; }
  .phgp .phgp-rw-score { text-align: left; }
  .phgp .phgp-rw-score-row { justify-content: flex-start; }
  .phgp .phgp-rw-score-num { font-size: 40px; }
  .phgp .phgp-rw-grid { grid-template-columns: 1fr; margin-top: 32px; }
}
@media (max-width: 560px) {
  .phgp .phgp-rw-more { margin-top: 24px; }
  .phgp .phgp-rw-morebtn { width: 100%; justify-content: center; }
}

/* ---- Inline-SVG icons (were text glyphs; Inter lacks the triangle and arrow) ---- */
.phgp .phgp-rw-chev { width: 11px; height: 7px; flex: none; color: currentColor; }
.phgp .phgp-rw-ext  { width: 11px; height: 11px; flex: none; color: currentColor; }
.phgp .phgp-rw-glink, .phgp .phgp-rw-all { align-items: center; }

/* ---- FAIL-SAFE CLAMPING ----
   The handoff clamped EVERY tile to 5 lines while the generator only added a
   "Read more" above a character threshold. When the threshold was wrong the two
   disagreed and a review was clipped with no way to expand it — Zoe Davey's
   216-character review lost its last words on the live page, because the estimate
   was set at 280 and the column actually fits about 200.

   The clamp now applies ONLY to tiles carrying the toggle input, which exists
   exactly when a "Read more" was emitted. The two can no longer disagree. If the
   threshold is ever too high the tile simply renders in full and its row grows:
   visibly imperfect, but a patient's words are never silently truncated. */
.phgp .phgp-rw-text p { display: block; -webkit-line-clamp: none; overflow: visible; }
.phgp .phgp-rw-x ~ .phgp-rw-text p {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; overflow: hidden;
}

/* ---- Reset inherited <blockquote> decoration (Total parent theme) ----
   The tile text is a <blockquote> because it genuinely is a quotation. But Total
   decorates bare blockquotes with a large grey ::before quote glyph and an indent.
   That appeared on the live page and NOT in the design preview, because the preview
   loads only this stylesheet so nothing inherited leaks in. Reset it here rather
   than downgrading the element to a <div>: keep the semantics, drop the decoration.
   .phgp-rw-tile is in the selector purely for specificity, so this wins regardless
   of stylesheet load order. */
.phgp .phgp-rw-tile blockquote.phgp-rw-text {
  margin: 14px 0 18px; padding: 0; border: 0; background: none;
  font-style: normal; quotes: none; text-indent: 0;
}
.phgp .phgp-rw-tile blockquote.phgp-rw-text::before,
.phgp .phgp-rw-tile blockquote.phgp-rw-text::after,
.phgp .phgp-rw-tile blockquote.phgp-rw-text p::before,
.phgp .phgp-rw-tile blockquote.phgp-rw-text p::after {
  content: none; display: none;
}

/* =====================================================================
   ROW REVEAL — GENERATED by build-reviews-css.py, do not hand-edit.
   Steps 1..10 (up to 33 tiles).
   A block emits only the checkboxes it needs and carries
   .phgp-rw--s<N> so the exhausted state fires on ITS last step.
   ===================================================================== */

/* hide everything past the row this step unlocks */
.phgp #phgp-rev-1:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+4) { display: none; }
.phgp #phgp-rev-2:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+7) { display: none; }
.phgp #phgp-rev-3:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+10) { display: none; }
.phgp #phgp-rev-4:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+13) { display: none; }
.phgp #phgp-rev-5:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+16) { display: none; }
.phgp #phgp-rev-6:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+19) { display: none; }
.phgp #phgp-rev-7:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+22) { display: none; }
.phgp #phgp-rev-8:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+25) { display: none; }
.phgp #phgp-rev-9:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+28) { display: none; }
.phgp #phgp-rev-10:not(:checked) ~ .phgp-rw-grid .phgp-rw-tile:nth-child(n+31) { display: none; }

/* which control is showing: all the reveals first... */
.phgp #phgp-rev-1:not(:checked) ~ .phgp-rw-more .phgp-rw-l1 { display: inline-flex; }
.phgp #phgp-rev-1:checked ~ .phgp-rw-more .phgp-rw-l2 { display: inline-flex; }
.phgp #phgp-rev-2:checked ~ .phgp-rw-more .phgp-rw-l3 { display: inline-flex; }
.phgp #phgp-rev-3:checked ~ .phgp-rw-more .phgp-rw-l4 { display: inline-flex; }
.phgp #phgp-rev-4:checked ~ .phgp-rw-more .phgp-rw-l5 { display: inline-flex; }
.phgp #phgp-rev-5:checked ~ .phgp-rw-more .phgp-rw-l6 { display: inline-flex; }
.phgp #phgp-rev-6:checked ~ .phgp-rw-more .phgp-rw-l7 { display: inline-flex; }
.phgp #phgp-rev-7:checked ~ .phgp-rw-more .phgp-rw-l8 { display: inline-flex; }
.phgp #phgp-rev-8:checked ~ .phgp-rw-more .phgp-rw-l9 { display: inline-flex; }
.phgp #phgp-rev-9:checked ~ .phgp-rw-more .phgp-rw-l10 { display: inline-flex; }

/* ...then the hides, which must win, so they come last */
.phgp #phgp-rev-1:checked ~ .phgp-rw-more .phgp-rw-l1 { display: none; }
.phgp #phgp-rev-2:checked ~ .phgp-rw-more .phgp-rw-l2 { display: none; }
.phgp #phgp-rev-3:checked ~ .phgp-rw-more .phgp-rw-l3 { display: none; }
.phgp #phgp-rev-4:checked ~ .phgp-rw-more .phgp-rw-l4 { display: none; }
.phgp #phgp-rev-5:checked ~ .phgp-rw-more .phgp-rw-l5 { display: none; }
.phgp #phgp-rev-6:checked ~ .phgp-rw-more .phgp-rw-l6 { display: none; }
.phgp #phgp-rev-7:checked ~ .phgp-rw-more .phgp-rw-l7 { display: none; }
.phgp #phgp-rev-8:checked ~ .phgp-rw-more .phgp-rw-l8 { display: none; }
.phgp #phgp-rev-9:checked ~ .phgp-rw-more .phgp-rw-l9 { display: none; }
.phgp #phgp-rev-10:checked ~ .phgp-rw-more .phgp-rw-l10 { display: none; }

/* zero steps (1 to 3 tiles): no reveal control exists, so the link out shows
   immediately. Without this, a block of 3 or fewer tiles renders with no route
   to Google at all, because .phgp-rw-all is display:none above and only the
   --s1..--s10 rules below ever reveal it. Six of the eight staff profile blocks
   are in this state, so it is the common case, not an edge case. */
.phgp .phgp-rw--s0 .phgp-rw-more .phgp-rw-all { display: inline-flex; }

/* exhausted: last step of THIS block checked -> link out to Google */
.phgp .phgp-rw--s1 #phgp-rev-1:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s2 #phgp-rev-2:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s3 #phgp-rev-3:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s4 #phgp-rev-4:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s5 #phgp-rev-5:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s6 #phgp-rev-6:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s7 #phgp-rev-7:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s8 #phgp-rev-8:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s9 #phgp-rev-9:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }
.phgp .phgp-rw--s10 #phgp-rev-10:checked ~ .phgp-rw-more .phgp-rw-all { display: inline-flex; }

/* keyboard focus ring on whichever label is active */
.phgp #phgp-rev-1:focus-visible ~ .phgp-rw-more .phgp-rw-l1 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-2:focus-visible ~ .phgp-rw-more .phgp-rw-l2 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-3:focus-visible ~ .phgp-rw-more .phgp-rw-l3 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-4:focus-visible ~ .phgp-rw-more .phgp-rw-l4 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-5:focus-visible ~ .phgp-rw-more .phgp-rw-l5 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-6:focus-visible ~ .phgp-rw-more .phgp-rw-l6 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-7:focus-visible ~ .phgp-rw-more .phgp-rw-l7 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-8:focus-visible ~ .phgp-rw-more .phgp-rw-l8 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-9:focus-visible ~ .phgp-rw-more .phgp-rw-l9 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }
.phgp #phgp-rev-10:focus-visible ~ .phgp-rw-more .phgp-rw-l10 { outline: 2px solid var(--navy, #16335A); outline-offset: 3px; }