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

   1. Inner hero on a phone: the home hero's order, one full first view
   2. "Your specialists" doctor card on a phone
   3. Section nav: one line under the current and the hovered link
   4. Two-colour eyebrow rule: two equal segments
   5. Section-head ledes on a desktop: the home page's column
   6. Round 12: section nav on a phone scrolls sideways rather than cutting
      a link; where its links land (#suits, #cost)
   7. Round 12: treatment overview, the lede then the rest of the overview
   8. Round 12: Why Elite reviews, one column on a phone
   9. Round 12: breadcrumb links, a bigger tap area with no layout change
*/


/* --------------------------------------------------------------------------
   1. Inner hero on a phone (below 48rem), as the approved home hero:
      breadcrumb, eyebrow, H1, lede, then the picture (photograph, portrait,
      team wall), then the booking button(s), the phone and Get Directions
      pills and the Google rating. The copy column is dissolved
      (display: contents) so its children and the picture share one column
      and can be reordered; the markup keeps its reading order. This reaches
      the heroes printed by inner-hero.php and the templates that print the
      same .ihero markup themselves (team, reviews, Why Elite, technology,
      the specialty pages).

      The hero fills the first view: header (--chrome-h) plus hero is 100svh,
      and the facts strip, which sits half over the hero's lower edge, starts
      right at the fold. A photograph flexes to take the height the copy and
      the actions leave (at least 7rem, 6rem on a short phone, so the buttons
      stay in view; at most 21rem, so a tall phone does not get a giant photo);
      any height left over centres the whole stack. Heroes without a picture
      (legal pages, search) keep their compact layout; tablets and desktops
      are unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  :root {
    --r11-hero-pad: clamp(0.9rem, 2.4svh, 1.6rem);
    --r11-hero-gap: clamp(0.62rem, 1.55svh, 0.95rem);
    --r11-vis-min: 7rem;
    --r11-vis-max: min(21rem, 88vw);
  }

  :root body.premium-inner .ihero:not(.ihero--compact):has(> .wrap > .ihero__in > .ihero__visual) {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    min-height: calc(100vh - var(--chrome-h));
    min-height: calc(100svh - var(--chrome-h));
    padding-block: var(--r11-hero-pad);
  }
  /* The upper half of the facts strip is below the fold, inside the hero. */
  :root body.premium-inner .ihero:not(.ihero--compact):has(> .wrap > .ihero__in > .ihero__visual):has(+ .wrap > .facts) {
    min-height: calc(100vh - var(--chrome-h) + var(--facts-h) / 2);
    min-height: calc(100svh - var(--chrome-h) + var(--facts-h) / 2);
    padding-bottom: calc(var(--r11-hero-pad) + var(--facts-h) / 2);
  }
  :root body.premium-inner .ihero:has(> .wrap > .ihero__in > .ihero__visual) > .wrap {
    flex: 1 0 auto; display: flex; flex-direction: column; width: 100%;
  }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: var(--r11-hero-gap);
  }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy { display: contents; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > * { flex: none; margin-block: 0; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > :is(.breadcrumbs, .eyebrow, .tag, .hero-rating, .rating) { align-self: flex-start; }

  /* Order: the copy (0), the picture (1), then everything the copy prints
     after its H1 and lede: the booking buttons (2), the pills (3), a page
     link (4) and the rating (5). */
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__visual { order: 1; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > :where(h1, .lede) ~ :where(:not(.lede)) { order: 2; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > .hero-contact { order: 3; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > :is(.hero-go, .hero-pills) { order: 4; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > :is(.hero-rating, .rating) { order: 5; }

  /* The actions now sit near the fold, below the line where the scroll
     reveal (inner-redesign.js) shows things on load: they are simply shown. */
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > :where(h1, .lede) ~ [data-reveal]:not(.is-in) { opacity: 1; transform: none; }

  /* A little more air around the picture than between two lines of copy. */
  :root body.premium-inner .ihero .ihero__in > .ihero__visual {
    flex: none; width: 100%; max-width: none; margin: 0.2rem 0 0.15rem; padding: 0; justify-self: auto;
  }

  /* A photograph takes the free height, within the limits above. */
  :root body.premium-inner .ihero .ihero__in > .ihero__visual:has(> .ihero__art) {
    position: relative; display: flex; flex-direction: column;
    flex: 1 1 var(--r11-vis-min); min-height: var(--r11-vis-min); max-height: var(--r11-vis-max);
  }
  :root body.premium-inner .ihero .ihero__in > .ihero__visual > .ihero__art {
    position: relative; flex: 1 1 auto; width: 100%; max-width: none; height: auto; min-height: 0;
    aspect-ratio: auto; margin: 0;
  }
  :root body.premium-inner .ihero .ihero__in > .ihero__visual > .ihero__art img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover;
  }
  /* The doctor portraits are cut-outs: the whole head and shoulders, from the bottom. */
  :root body.premium-inner.single-elite_clinician .ihero--profile .ihero__in > .ihero__visual > .ihero__art img { object-fit: contain; object-position: center bottom; }
}

/* The team wall on a phone with the height for it: two rows of arches, as
   on a desktop, rather than one row of small overlapping circles; the hero
   has the room now that it fills the first view. A short phone keeps the
   single row (r4-team.css). */
@media (max-width: 47.99rem) and (min-height: 780px) {
  .premium-inner.post-type-archive-elite_clinician .ihero--team .team-card { padding: 0.95rem 0.95rem 0.85rem; }
  .premium-inner.post-type-archive-elite_clinician .ihero--team .team-card__wall {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.45rem;
  }
  .premium-inner.post-type-archive-elite_clinician .ihero--team .team-card__face {
    flex: 0 0 calc((100% - 4 * 0.45rem) / 5); min-width: 0; max-width: none; height: auto; margin: 0;
    aspect-ratio: 5 / 6; border: 0; border-radius: 999px 999px 0.7rem 0.7rem; box-shadow: none;
  }
  .premium-inner.post-type-archive-elite_clinician .ihero--team .team-card__foot { margin-top: 0.8rem; padding-top: 0.75rem; }
}

/* A short phone (375x667 and the like): the H1 and lede a touch smaller, so
   the photograph keeps some height above the buttons. */
@media (max-width: 47.99rem) and (max-height: 700px) {
  :root { --r11-hero-pad: 0.75rem; --r11-hero-gap: 0.5rem; --r11-vis-min: 6rem; }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > h1 { font-size: clamp(1.8rem, 8vw, 2.1rem); }
  :root body.premium-inner .ihero .ihero__in:has(> .ihero__visual) > .ihero__copy > .lede { font-size: 0.95rem; line-height: 1.5; }
}


/* --------------------------------------------------------------------------
   2. "Your specialists" doctor card on a phone (treatment pages, the
      treatments list, the pediatric treatments). The short bio had been
      auto-placed into the portrait's narrow column. Now: portrait and name
      side by side, the bio across the card, two credentials, the profile
      link.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  body .spx .spx__card {
    display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "photo name" "bio bio" "creds creds" "go go";
    align-items: center; column-gap: 1rem; row-gap: 0;
    padding: 0.9rem 1rem 1rem; border-radius: 1.1rem;
  }
  body .spx .spx__card .spx__photo {
    grid-area: photo; align-self: start; width: 4.75rem; height: auto; min-height: 0; margin: 0;
    aspect-ratio: 1 / 1.12; border-radius: 999px 999px 0.7rem 0.7rem;
  }
  body .spx .spx__card .spx__body { display: contents; }
  body .spx .spx__card .spx__name {
    grid-area: name; align-self: center; margin: 0 !important;
    font-size: 1.2rem; line-height: 1.2; text-wrap: balance;
  }
  body .spx .spx__card .spx__bio {
    grid-area: bio; display: block; margin: 0.85rem 0 0 !important;
    font-size: 0.94rem; line-height: 1.58;
  }
  body .spx .spx__card .spx__creds {
    grid-area: creds; display: flex; flex-direction: column; gap: 0.45rem; width: 100%;
    margin: 0.85rem 0 0 !important; padding: 0.8rem 0 0;
  }
  body .spx .spx__card .spx__creds li { gap: 0.6rem; font-size: 0.86rem; line-height: 1.45; }
  body .spx .spx__card .spx__creds li:nth-child(n + 3) { display: none; }
  body .spx .spx__card .spx__body > .spx__go { grid-area: go; width: 100%; min-width: 0; margin: 1rem 0 0 !important; }
}


/* --------------------------------------------------------------------------
   3. Section nav (Overview, Who for, Visit ...). The current link drew two
      lines, site.css's rounded 2px border and revision-5's underline; a
      hovered link now draws the same one. One line only, at every width:
      the underline, inset to the label.
   -------------------------------------------------------------------------- */
.premium-inner .subnav a,
.single-elite_treatment.premium-inner .subnav a { border-bottom: 0; margin-bottom: 0; border-radius: 0; box-shadow: none; }
.premium-inner .subnav a::after,
.premium-inner .subnav a.is-current::after {
  content: ""; position: absolute; right: 1rem; bottom: -1px; left: 1rem; height: 2px;
  border: 0; border-radius: 2px; background: var(--lane, var(--ortho));
  transform: scaleX(0); transition: transform 0.2s ease;
}
.premium-inner .subnav a:focus-visible::after,
.premium-inner .subnav a.is-current::after { transform: scaleX(1); }
/* Hover only where there is a pointer: a tap on a phone would leave a line behind. */
@media (hover: hover) {
  .premium-inner .subnav a:hover::after { transform: scaleX(1); }
}
@media (max-width: 47.99rem) {
  .premium-inner .subnav a::after,
  .premium-inner .subnav a.is-current::after { right: 0.4rem; left: 0.4rem; }
}
@media (max-width: 23.43rem) {
  .premium-inner .subnav a::after,
  .premium-inner .subnav a.is-current::after { right: 0.28rem; left: 0.28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-inner .subnav a::after { transition: none; }
}


/* --------------------------------------------------------------------------
   4. The two-colour rule before an eyebrow: a teal and a purple segment of
      the same length everywhere, the home page included (inner pages drew
      the purple one 36px, the teal 28px, and the teal could shrink).
   -------------------------------------------------------------------------- */
body .eyebrow.eyebrow--dual::before,
body .eyebrow.eyebrow--dual::after { width: 1.75rem; flex-shrink: 0; }
@media (max-width: 47.99rem) {
  body .eyebrow.eyebrow--dual::before,
  body .eyebrow.eyebrow--dual::after { width: 1rem; }
}


/* --------------------------------------------------------------------------
   5. Section-head ledes on a desktop, as on the home page: the heading on
      the left at its own width, the lede taking the rest of the row up to
      62ch, so an intro runs two lines instead of three or four in a narrow
      34ch column.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .premium-inner .sect-head:has(> .lede) {
    display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem;
  }
  .premium-inner .sect-head:has(> .lede) > .sect-head__copy { flex: 0 1 auto; min-width: 0; }
  .premium-inner .sect-head:has(> .lede) > .lede { flex: 0 1 62ch; min-width: 20rem; max-width: 62ch !important; margin: 0; justify-self: auto; }
}


/* --------------------------------------------------------------------------
   6. Round 12 (client item 4). The section nav on a phone: the labels are
      short enough for one row at 360px (single-elite_treatment.php), and if
      one ever runs longer the row scrolls sideways instead of cutting its
      last link off. The scrollbar is hidden; the 1px of bottom padding keeps
      the current link's underline inside the scroll box, and the matching
      negative margin keeps the bar's height and the underline on its border.
      The header script keeps the current link in view.

      Where a link lands: "Who for" (#suits, the card beside the overview)
      about 10px under the bar, so the card no longer touches it but its
      top still passes the line the bar marks from (12px under it, site.js);
      "Cost" (#cost) the way every other section lands.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .premium-inner .subnav ul,
  .single-elite_treatment.premium-inner .subnav ul {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 1px; margin-bottom: -1px;
  }
  .premium-inner .subnav ul::-webkit-scrollbar { display: none; }
  .premium-inner .subnav li { flex: none; }
}
.single-elite_treatment.premium-inner #cost { scroll-margin-top: calc(var(--subnav-h, 3.3rem) - 0.5rem); }
.single-elite_treatment.premium-inner #suits { scroll-margin-top: calc(var(--subnav-h, 3.3rem) - 0.1rem); }


/* --------------------------------------------------------------------------
   7. Round 12 (client item 8). Treatment overview: the first sentence is the
      lede, two lines as on the home page; the rest of the overview follows
      as body text in the same column.
   -------------------------------------------------------------------------- */
.single-elite_treatment.premium-inner .tr-ov__copy > .tr-ov__more {
  max-width: 52ch; margin: 1rem 0 0; color: var(--body); font-size: var(--fs-body, 1rem); line-height: 1.65; text-wrap: pretty;
}
@media (max-width: 47.99rem) {
  .single-elite_treatment.premium-inner .tr-ov__copy > .tr-ov__more { margin-top: 0.75rem; font-size: 0.97rem; line-height: 1.6; }
}


/* --------------------------------------------------------------------------
   8. Round 12. Why Elite, the Google reviews on a phone: one column. The
      stacked grid (r6-specialty.css, W5) kept the desktop's two columns
      (r4-about.css), so two quotes sat side by side, three words a line.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .page-template-page-templatestemplate-why-elite-php .why-proof__quotes { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   9. Round 12. Breadcrumb links: the tap area reaches 10px above and below
      the 17px label (and 4px to each side), drawn by an empty ::after, so
      nothing in the pill moves.
   -------------------------------------------------------------------------- */
.premium-inner .breadcrumbs a { position: relative; }
.premium-inner .breadcrumbs a::after { content: ""; position: absolute; inset: -10px -4px; }