/* Revision 11: client round 11 (reviews). Loaded after the r6 files.

   1. Reviewer avatars: the Google profile photo, or two initials
   2. Review cards: the month, the long-review toggle, a quiet hover
   3. Reviews hero: the customer wall (the team wall's card, with reviewers)
   4. "Read the reviews" card, where a page has no unused review left
   5. Round 12: the wall on a phone (the list's order, the first twelve,
      "Show more reviews") and the customer wall on a short phone
*/


/* --------------------------------------------------------------------------
   1. Reviewer avatars (inc/reviews.php, elite_ortho_review_avatar()). A
      photo fills the avatar's own shape: the arch of the quote cards, the
      circle of the review cards. Initials are two letters in one of the
      practice's two colours, the same colour for the same reviewer.
   -------------------------------------------------------------------------- */
.rv-av--photo { padding: 0; overflow: hidden; background: #efeaf6; }
.rv-av--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.quote__avatar.rv-av--photo img { border-radius: 0; }
.rv-av--init { font-size: 0.86rem; letter-spacing: 0.02em; }

/* On the dark quote rails (home, specialty pages, Why Elite). On the white
   quote cards (treatment pages, the treatments list) the initials keep the
   card's own lane colour (r4-treatments.css). */
.section--ink .quote .quote__avatar.rv-av--ortho { background: rgba(190, 170, 255, 0.18); color: #d4c8ff; }
.section--ink .quote .quote__avatar.rv-av--ped { background: rgba(58, 236, 241, 0.16); color: var(--cyan, #3aecf1); }
/* On the white review cards. */
.premium-inner .rev:not(.revwall__lead) .rev__av.rv-av--ortho { background: var(--ortho-tint, #eee9f7); color: var(--ortho, #4b2c8f); }
.premium-inner .rev:not(.revwall__lead) .rev__av.rv-av--ped { background: var(--ped-tint, #e5f5f6); color: var(--ped, #0f6f74); }
.premium-inner .rev .rev__av.rv-av--photo { border-color: rgba(26, 18, 54, 0.08); }
.premium-inner .rev.revwall__lead .rev__av.rv-av--photo { border: 2px solid rgba(255, 255, 255, 0.22); }

/* The source and the month on one line under the name. Round 12: the
   quote cards print the review cards' markup (elite_ortho_review_meta()),
   so both read "Google review, dot, August 2026". In a narrow quote card the
   date wraps as a whole under the source; its dot then sits just outside the
   card's left edge (the negative margin) and is clipped, so the second line
   never starts with a stray dot. */
.rev__date::before { content: "\00B7"; margin-right: 0.35rem; }
.quote__meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 1em; clip-path: inset(0); }
.quote__meta > .rev__date { margin-left: -1em; }
.quote__meta > .rev__date::before { display: inline-block; width: 1em; margin: 0; text-align: center; }


/* --------------------------------------------------------------------------
   2. Review cards on /reviews/.
   The hover had lifted each card 4px and drawn a lane-coloured strip across
   its top: in the level columns the lift opened a gap under the card and
   pushed it into the one above, and on the dark lead card the strip showed
   as a pale line with square ends inside its rounder corners. Now a hovered
   card stays where it is: a slightly deeper shadow and a tinted border.
   -------------------------------------------------------------------------- */
.post-type-archive-elite_review.premium-inner .rev,
.post-type-archive-elite_review.premium-inner .rev:hover { transform: none; }
.post-type-archive-elite_review.premium-inner .rev::after { content: none; }
.post-type-archive-elite_review.premium-inner .rev { transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.post-type-archive-elite_review.premium-inner .rev:not(.revwall__lead):hover {
  border-color: color-mix(in srgb, var(--lane, #4b2c8f) 24%, #e7e3ee);
  box-shadow: 0 22px 44px -34px rgba(26, 18, 54, 0.42);
}
.post-type-archive-elite_review.premium-inner .rev.revwall__lead:hover { box-shadow: var(--shadow-media); }

/* A very long review: its opening, then the whole review in place. */
.rev__full { margin: 0; }
.rev__full > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; width: max-content; margin-top: 0.1rem;
  color: var(--lane, var(--ortho)); font-size: 0.88rem; font-weight: 700; cursor: pointer; list-style: none;
}
.rev__full > summary::-webkit-details-marker { display: none; }
.rev__full > summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.rev__full[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rev__full > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.rev__full > summary:focus-visible { outline: 2px solid var(--lane, var(--ortho)); outline-offset: 3px; border-radius: 4px; }
.rev__full .rev__close,
.rev__full[open] .rev__open { display: none; }
.rev__full[open] .rev__close { display: inline; }
.rev__full:not([open]) > .rev__text { display: none; }
.rev__full[open] > .rev__text { margin-top: 0.9rem; }
.rev:has(> .rev__full[open]) > .rev__short { display: none; }
.rev:has(> .rev__full[open]) > .rev__full { display: flex; flex-direction: column-reverse; gap: 0.9rem; }
.rev:has(> .rev__full[open]) > .rev__full > .rev__text { margin-top: 0; }
.revwall__lead .rev__full > summary { color: #b8f1ef; }


/* --------------------------------------------------------------------------
   3. Reviews hero: the customer wall. The /our-team/ team card with the
      reviewers in it: their photos in small arches in rows of 3 / 4 / 3 on
      an 8-column grid (archive-elite_review.php sets each row's first
      column), initials in the practice's colours for reviewers without a
      photo, then the line and the Google rating. On a phone, the wall is two
      rows of five smaller arches above the booking buttons.
   -------------------------------------------------------------------------- */
.post-type-archive-elite_review.premium-inner .rhero .ihero__visual.rhero__visual { display: flex; align-items: center; justify-content: flex-end; }
.post-type-archive-elite_review.premium-inner .cwall {
  width: 100%; max-width: 33rem; margin: 0; padding: 1.35rem 1.35rem 1.15rem;
  border: 1px solid rgba(225, 219, 235, 0.95); border-radius: 1.75rem; background: #fff;
  box-shadow: 0 40px 80px -48px rgba(26, 18, 54, 0.55);
}
.cwall__wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.8rem 0.7rem; margin: 0; padding: 0; list-style: none; }
.cwall__face {
  position: relative; grid-column-end: span 2; display: grid; place-items: center; overflow: hidden; aspect-ratio: 5 / 6; margin: 0;
  border-radius: 999px 999px 0.95rem 0.95rem; background: linear-gradient(160deg, #eee8f8, #e4f4f4);
}
.cwall__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.cwall__face--init { font-family: var(--display); font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 700; letter-spacing: 0.03em; }
.cwall__face--ortho { background: linear-gradient(160deg, #efe9fb 0%, #ddd3f4 100%); color: var(--ortho, #4b2c8f); }
.cwall__face--ped { background: linear-gradient(160deg, #e6f6f6 0%, #cdeced 100%); color: var(--ped, #0f6f74); }
.cwall__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line-soft, #efedf5);
}
.cwall__count { display: flex; flex: 1 0 auto; flex-direction: column; gap: 0.2rem; min-width: 0; max-width: 100%; margin: 0; }
.cwall__count strong { color: var(--ink); font-family: var(--display); font-size: 1.06rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.cwall__count span { color: var(--body); font-size: 0.84rem; line-height: 1.4; }

/* The Google badge as the card's own row (the 'float' markup, which
   revision-5.css hides below 64rem), never floating or moving on hover. */
.post-type-archive-elite_review .cwall .gbadge--incard {
  position: static; display: inline-flex; flex: none; align-items: center; gap: 0.65rem; padding: 0;
  border: 0; border-radius: 0.75rem; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: none; transition: none;
}
.post-type-archive-elite_review .cwall .gbadge--incard .gbadge__num { font-size: 1.35rem; }
.post-type-archive-elite_review .cwall .gbadge--incard .gbadge__count { font-size: 0.8rem; white-space: nowrap; }
.post-type-archive-elite_review .cwall a.gbadge--incard:hover { transform: none; }
.post-type-archive-elite_review .cwall a.gbadge--incard:hover .gbadge__count { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* A laptop screen (64 to 80rem): a little tighter, as the team card. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .post-type-archive-elite_review.premium-inner .cwall { padding: 1.1rem 1.1rem 1rem; }
  .cwall__wall { gap: 0.65rem 0.55rem; }
  .cwall__face { aspect-ratio: 10 / 11; }
  .cwall__foot { gap: 0.6rem 1rem; margin-top: 0.95rem; padding-top: 0.85rem; }
  .cwall__count strong { font-size: 0.98rem; }
  .cwall__count span { font-size: 0.8rem; }
}

/* Short laptop screens (under 820px tall): the wall scales with the height,
   so the hero and the whole facts strip stay in the first view. */
@media (min-width: 64rem) and (max-height: 820px) {
  .post-type-archive-elite_review.premium-inner .cwall { width: clamp(24rem, 62svh, 33rem); max-width: none; padding: 1rem 1.05rem 0.95rem; }
  .post-type-archive-elite_review.premium-inner .cwall__wall { gap: 0.55rem; }
  .post-type-archive-elite_review.premium-inner .cwall__face { aspect-ratio: 10 / 11; }
  .post-type-archive-elite_review.premium-inner .cwall__foot { flex-wrap: nowrap; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.75rem; }
  .post-type-archive-elite_review.premium-inner .cwall__count { flex: 1 1 auto; }
  .post-type-archive-elite_review.premium-inner .cwall__count strong { font-size: 0.98rem; }
  .post-type-archive-elite_review.premium-inner .cwall__count span { display: none; }
}

/* Tablet: the card as wide as its column. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .post-type-archive-elite_review.premium-inner .rhero .ihero__visual.rhero__visual { display: flex; width: 100%; padding: 0; }
  .post-type-archive-elite_review.premium-inner .cwall { max-width: none; padding: 1rem 1rem 0.95rem; border-radius: 1.5rem; }
  .cwall__wall { gap: 0.6rem 0.5rem; }
  .cwall__foot { flex-direction: column; align-items: flex-start; gap: 0.8rem; margin-top: 0.95rem; padding-top: 0.9rem; }
  .cwall__count strong { font-size: 1rem; }
  .cwall__count span { font-size: 0.8rem; }
}

/* Phone: two rows of five arches, the line, then the rating. */
@media (max-width: 47.99rem) {
  .post-type-archive-elite_review.premium-inner .rhero .ihero__visual.rhero__visual { display: block; width: 100%; }
  .post-type-archive-elite_review.premium-inner .cwall {
    max-width: none; padding: 0.9rem 0.9rem 0.85rem; border-radius: 1.25rem; box-shadow: 0 24px 50px -40px rgba(26, 18, 54, 0.5);
  }
  .cwall__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem 0.45rem; }
  .cwall__face { grid-column: auto / span 1 !important; aspect-ratio: 10 / 11; border-radius: 999px 999px 0.6rem 0.6rem; }
  .cwall__face--init { font-size: 1.05rem; }
  .cwall__foot { flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 0.75rem; padding-top: 0.7rem; }
  .cwall__count { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
  .cwall__count strong { font-size: 0.95rem; }
  .cwall__count span { display: none; }
  .post-type-archive-elite_review .cwall .gbadge--incard { gap: 0.55rem; }
  .post-type-archive-elite_review .cwall .gbadge--incard .gbadge__g { width: 24px; height: 24px; }
  .post-type-archive-elite_review .cwall .gbadge--incard .gbadge__meta { flex-direction: row; align-items: center; gap: 0.55rem; }
  .post-type-archive-elite_review .cwall .gbadge--incard .gbadge__num { font-size: 1.15rem; }
}


/* --------------------------------------------------------------------------
   4. "Read the reviews" card (lane-review.php): in the quote's place on a
      treatment page once every review is quoted somewhere else. A few
      reviewers' faces, one line, the link to the Reviews page.
   -------------------------------------------------------------------------- */
:is(.spx__proof, .tr-proof__grid) > .quote.quote--more {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem;
}
.quote--more .qmore__faces { display: flex; }
.quote--more .qmore__face { width: 44px; height: 44px; margin-left: -0.55rem; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 6px 14px -8px rgba(26, 18, 54, 0.5); }
.quote--more .qmore__face:first-child { margin-left: 0; }
.quote--more .qmore__text { max-width: 36ch; margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; text-wrap: balance; }
@media (min-width: 64rem) {
  .spx__proof > .quote.quote--more { flex-direction: row; align-items: center; gap: 1.5rem; }
  .spx__proof > .quote.quote--more .qmore__link { margin-left: auto; flex: none; }
}

/* A profile's quoted review (single-elite_clinician.php), when it prints the
   reviewer's avatar: the arch of the quote cards, in the page's lane. */
.pbio__quote figcaption:has(.pbio__av) { align-items: center; }
.pbio__quote figcaption .pbio__av {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; overflow: hidden;
  border-radius: 999px 999px 0.5rem 0.5rem; background: var(--lane-tint, #eee9f7); color: var(--lane, #4b2c8f);
  font-family: var(--display); font-size: 0.85rem; font-weight: 700;
}


/* --------------------------------------------------------------------------
   5. Round 12, the wall on a phone (review-wall.php). The columns dissolve
      below 64rem (r6-team.css), so a phone read the three desktop columns
      one after the other; now the cards keep the list's order (--rev-pos,
      the editor's ranking) and, once the page's script has run (html.r2-js),
      the first twelve show with a button for the rest. Without JavaScript
      every review shows. Tablets and desktops are unchanged.
   -------------------------------------------------------------------------- */
.revwall__more { display: none; }
@media (max-width: 47.99rem) {
  .post-type-archive-elite_review.premium-inner .revwall--cols > .revwall__col > .rev { order: var(--rev-pos, 0); }
  .r2-js .post-type-archive-elite_review.premium-inner .revwall--fold:not(.is-open) .rev--later { display: none; }
  .r2-js .post-type-archive-elite_review.premium-inner .revwall--fold:not(.is-open) + .revwall__more { display: block; margin-top: 1.25rem; }
  .post-type-archive-elite_review.premium-inner .revwall__all { min-height: 3rem; }
  .post-type-archive-elite_review.premium-inner .revwall .rev:focus { outline: none; }
  .post-type-archive-elite_review.premium-inner .revwall .rev:focus-visible { outline: 2px solid var(--ortho, #4b2c8f); outline-offset: 3px; }
}

/* A short phone (375 x 667 and the like, under 780px tall): one row of five
   faces, as the team wall keeps on a short phone (r4-team.css), so the
   booking buttons, the pills and the facts strip stay in the first view. */
@media (max-width: 47.99rem) and (max-height: 779px) {
  .post-type-archive-elite_review.premium-inner .cwall__face:nth-child(n+6) { display: none; }
  .post-type-archive-elite_review.premium-inner .cwall { padding: 0.75rem 0.8rem 0.7rem; }
  .post-type-archive-elite_review.premium-inner .cwall__foot { margin-top: 0.6rem; padding-top: 0.6rem; }
}