/* Round 13: client final changes (hubs). Loaded after the r8 files.
   Owner: the hubs group. Templates: page-templates/template-orthodontics.php,
   template-pediatric.php, single-elite_treatment.php, archive-elite_treatment.php
   and the components they share (steps, specialists, treatment cards). */


/* --------------------------------------------------------------------------
   1. Steps (template-parts/components/steps.php), on every page that has
   them: the specialty pages, the treatment journeys, the insurance steps.
   Client item 10: the number is a badge at the start of the title, on the
   same line, never a small figure floating on its own above it.
   -------------------------------------------------------------------------- */
.stepper .stepper__head { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: start; column-gap: 0.65rem; }
.stepper .stepper__head .stepper__title {
  min-width: 0; margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.12rem; line-height: 1.7rem; letter-spacing: -0.02em;
  text-wrap: balance;
}
.stepper .stepper__badge {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--lane, var(--ortho)); color: #fff;
  font-family: var(--text); font-size: 0.82rem; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -8px var(--lane, var(--ortho));
}
.stepper .stepper__body p { margin-top: 0.4rem; text-wrap: pretty; }
/* A tablet: the title sits level with the middle of its icon disc and the
   text hangs under the title, after the number. */
@media (max-width: 63.99rem) {
  .stepper .stepper__body { padding-top: 0.78rem; }
  .stepper .stepper__body p { padding-left: 2.35rem; }
}
/* A phone: the numbered badges are the timeline (the line runs from one
   number to the next) and the icon discs step aside, so the text keeps the
   card's width. */
@media (max-width: 47.99rem) {
  .stepper .stepper__item { grid-template-columns: minmax(0, 1fr); }
  .stepper .stepper__disc { display: none; }
  .stepper .stepper__item:not(:last-child)::before { top: 2.2rem; bottom: 0.4rem; left: calc(0.85rem - 1px); }
  .stepper .stepper__body { padding-top: 0; }
}
/* A hyphenated word ("x-rays", "seven-year-olds") never breaks at its hyphen. */
.hub-nw { white-space: nowrap; }
@media (min-width: 64rem) {
  .stepper .stepper__head .stepper__title { font-size: 1.2rem; }
  .stepper .stepper__body { margin-top: 1.35rem; }
  /* Four steps or fewer: the text hangs under the title, after the number. */
  .stepper:is(.stepper--n2, .stepper--n3, .stepper--n4) .stepper__body p { max-width: 30ch; padding-left: 2.35rem; }
  .stepper.stepper--n5 .stepper__body p { max-width: 26ch; }
}


/* --------------------------------------------------------------------------
   2. The care-lane pages: lane colours for the sections added this round.
   The pediatric page's doctor section is teal; the children's orthodontic
   panel is purple on both pages (it is about orthodontics), and its link to
   the pediatric page is teal, as every link takes the colour of its page.
   -------------------------------------------------------------------------- */
.spec-team, .spec-kids { --lane: var(--ortho); --lane-dark: var(--ortho-dark); --lane-tint: var(--ortho-tint); --lane-tint-2: #f7f4fb; }
.page-template-page-templatestemplate-pediatric-php .spec-team {
  --lane: var(--ped); --lane-dark: var(--ped-dark); --lane-tint: var(--ped-tint); --lane-tint-2: var(--ped-tint-2, #f1fafb);
}
:is(.spec-team, .spec-kids, .spec-reviews, .spec-steps, .spec-options, .spec-faq) :is(h2, h3) { text-wrap: balance; }
:is(.spec-team, .spec-kids, .spec-steps, .spec-options) :is(.lede, p) { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   3. The doctors (client items 12, 13, 19). One card per doctor: portrait,
   role, name, bio, credentials, then "Book with Dr. ..." and "Read full
   profile". Two doctors sit side by side as equal cards whose rows line up;
   one doctor fills the width in three columns.
   -------------------------------------------------------------------------- */
.spec-team .hdocs { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.spec-team .hdoc {
  position: relative; display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: start; column-gap: 1.1rem; row-gap: 0;
  min-width: 0; padding: 1.25rem; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1.4rem; background: #fff;
  box-shadow: 0 18px 40px -34px rgba(26, 18, 54, 0.45);
}
.spec-team .hdoc__photo {
  grid-column: 1; grid-row: 1 / 3; display: block; overflow: hidden; aspect-ratio: 4 / 5; margin: 0;
  border-radius: 999px 999px 1rem 1rem; background: linear-gradient(180deg, var(--lane-tint, #eee9f7), #fff);
}
.spec-team .hdoc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; transition: transform 0.5s ease; }
.spec-team .hdoc:hover .hdoc__photo img { transform: scale(1.03); }
.spec-team .hdoc__intro { display: contents; }
.spec-team .hdoc__role {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: start; display: inline-flex; margin: 0; padding: 0.32rem 0.7rem;
  border-radius: 999px; background: var(--lane-tint, #eee9f7); color: var(--lane, var(--ortho));
  font-family: var(--text); font-size: 0.72rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
}
.spec-team .hdoc__name {
  grid-column: 2; grid-row: 2; align-self: start; max-width: none; margin: 0.55rem 0 0;
  font-family: var(--display); font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance;
}
.spec-team .hdoc__name a { color: var(--ink); text-decoration: none; }
.spec-team .hdoc__name a:hover { color: var(--lane, var(--ortho)); }
.spec-team .hdoc__nm { white-space: nowrap; }
/* A phone: a name that needs two lines splits into two even halves
   ("Dr. Neha / Saggar, DMD"), never leaving the degree on its own. */
@media (max-width: 47.99rem) {
  .spec-team .hdoc__name { font-size: 1.2rem; }
  .spec-team .hdoc__nm { white-space: normal; }
}
.spec-team .hdoc__bio { grid-column: 1 / -1; margin: 1rem 0 0; color: var(--body); font-size: 0.97rem; line-height: 1.6; }
.spec-team .hdoc__creds {
  grid-column: 1 / -1; display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line, #e6e3ee);
  font-size: 0.92rem; line-height: 1.5;
}
.spec-team .hdoc__creds li { margin: 0; font-size: inherit; }
.spec-team .hdoc__creds li::before { flex: none; }
.spec-team .hdoc__actions { grid-column: 1 / -1; display: grid; gap: 0.6rem; margin-top: 1.15rem; }
.spec-team .hdoc__actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; min-height: 3.25rem; margin: 0;
  padding: 0.7rem 1.1rem; font-size: 0.97rem; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap;
}
.spec-team .hdoc__actions .btn--outline { border: 1.5px solid color-mix(in srgb, var(--lane, var(--ortho)) 35%, #fff); background: #fff; color: var(--lane, var(--ortho)); }
.spec-team .hdoc__actions .btn--outline:hover { border-color: var(--lane, var(--ortho)); background: var(--lane, var(--ortho)); color: #fff; }
.spec-team .hdoc__actions .btn svg { width: 18px; height: 18px; }

/* A tablet: each card across the width, the portrait beside the name and bio. */
@media (min-width: 48rem) {
  .spec-team .hdoc { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.75rem; padding: 1.6rem; }
  .spec-team .hdoc__photo { grid-row: 1; align-self: stretch; aspect-ratio: auto; min-height: 13.5rem; }
  .spec-team .hdoc__intro { display: block; grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
  .spec-team .hdoc__role { display: inline-flex; }
  .spec-team .hdoc__name { margin-top: 0.7rem; font-size: 1.55rem; }
  .spec-team .hdoc__bio { margin-top: 0.7rem; }
  .spec-team .hdoc__creds { grid-row: 2; margin-top: 1.4rem; padding-top: 1.4rem; }
  .spec-team .hdoc__actions { grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.4rem; }
}

/* A desktop, two doctors: two equal cards side by side; the rows of the two
   cards are shared (subgrid), so names, bios, credentials and buttons line up. */
@media (min-width: 64rem) {
  .spec-team :is(.hdocs--2, .hdocs--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .spec-team .hdocs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-team :is(.hdocs--2, .hdocs--3) .hdoc { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 1.4rem; padding: 1.6rem; }
  .spec-team :is(.hdocs--2, .hdocs--3) .hdoc__name { font-size: 1.3rem; }
  @supports (grid-template-rows: subgrid) {
    .spec-team :is(.hdocs--2, .hdocs--3) .hdoc { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  }
  .spec-team :is(.hdocs--2, .hdocs--3) .hdoc__intro { align-self: start; padding-top: 0.35rem; }
  .spec-team :is(.hdocs--2, .hdocs--3) .hdoc__creds { align-self: start; }
  .spec-team :is(.hdocs--2, .hdocs--3) .hdoc__actions { align-self: end; }
}
@media (min-width: 80rem) {
  .spec-team :is(.hdocs--2) .hdoc { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); column-gap: 1.75rem; padding: 1.85rem; }
  .spec-team :is(.hdocs--2) .hdoc__name { font-size: 1.6rem; }
  .spec-team .hdocs--2 .hdoc__photo { min-height: 15rem; }
}

/* A desktop, one doctor: portrait, then the introduction and the
   credentials side by side, with the two actions across both under them. */
@media (min-width: 64rem) {
  .spec-team .hdocs--1 .hdoc {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
    column-gap: 2.25rem; padding: 1.85rem;
  }
  .spec-team .hdocs--1 .hdoc__photo { grid-column: 1; grid-row: 1 / 3; min-height: 18rem; }
  .spec-team .hdocs--1 .hdoc__intro { grid-column: 2; grid-row: 1; align-self: center; }
  .spec-team .hdocs--1 .hdoc__creds {
    grid-column: 3; grid-row: 1; align-self: center; margin: 0; padding: 0 0 0 2.25rem; border-top: 0; border-left: 1px solid var(--line, #e6e3ee);
  }
  .spec-team .hdocs--1 .hdoc__actions {
    grid-column: 2 / 4; grid-row: 2; align-self: end; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line, #e6e3ee);
  }
}
@media (min-width: 80rem) {
  .spec-team .hdocs--1 .hdoc { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.75rem; padding: 2rem; }
  .spec-team .hdocs--1 .hdoc__creds { padding-left: 2.75rem; }
  .spec-team .hdocs--1 .hdoc__name { font-size: 1.75rem; }
}


/* --------------------------------------------------------------------------
   4. Orthodontics for children and teens (client item 14). A larger
   photograph beside the copy and the links, then three points across the
   foot, each with its icon on the same line as its title.
   -------------------------------------------------------------------------- */
.spec-kids .hkids {
  display: grid; overflow: hidden; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1.5rem; background: #fff;
  box-shadow: 0 24px 56px -44px rgba(26, 18, 54, 0.55);
}
.spec-kids .hkids__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lane-tint, #eee9f7); }
.spec-kids .hkids__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.spec-kids .hkids__copy { padding: 1.6rem 1.25rem 1.4rem; }
.spec-kids .hkids__copy .eyebrow { margin: 0; }
.spec-kids .hkids__copy h2 { margin: 0.75rem 0 0; }
.spec-kids .hkids__lede { margin: 0.9rem 0 0; color: var(--body-strong, var(--body)); font-size: var(--fs-lede, 1.08rem); line-height: 1.6; }
.spec-kids .hkids__links { display: grid; margin-top: 1.4rem; border-top: 1px solid var(--line, #e6e3ee); }
.spec-kids .hkids__links .go-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.4rem; margin: 0; padding: 0.55rem 0;
  border: 0; border-bottom: 1px solid var(--line, #e6e3ee); border-radius: 0; background: none; box-shadow: none;
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.spec-kids .hkids__links .go-link:hover { transform: none; color: var(--lane, var(--ortho)); }
.spec-kids .hkids__links .go-link__ic { flex: none; background: var(--ortho-tint, #eee9f7); color: var(--ortho); }
.spec-kids .hkids__links .go-link:hover .go-link__ic { background: var(--ortho); color: #fff; }
.spec-kids .hkids__links .hkids__go--ped .go-link__ic { background: var(--ped-tint); color: var(--ped); }
.spec-kids .hkids__links .hkids__go--ped:hover { color: var(--ped); }
.spec-kids .hkids__links .hkids__go--ped:hover .go-link__ic { background: var(--ped); color: #fff; }
.spec-kids .hkids__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #e6e3ee); background: var(--lane-tint-2, #f7f4fb); }
.spec-kids .hkids__list li { margin: 0; padding: 1.3rem 1.25rem; }
.spec-kids .hkids__list li + li { border-top: 1px solid var(--line, #e6e3ee); }
.spec-kids .hkids__list h3 {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; column-gap: 0.75rem; margin: 0;
  color: var(--ink); font-family: var(--display); font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.02em;
}
.spec-kids .hkids__ic {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 22%, #fff);
  border-radius: 0.75rem; background: #fff; color: var(--lane, var(--ortho));
}
.spec-kids .hkids__list p { margin: 0.55rem 0 0; color: var(--body); font-size: 0.95rem; line-height: 1.6; }

@media (min-width: 48rem) {
  .spec-kids .hkids__media { aspect-ratio: 16 / 9; }
  .spec-kids .hkids__copy { padding: 2.25rem 2.25rem 2rem; }
  .spec-kids .hkids__list li { padding: 1.5rem 2.25rem; }
  .spec-kids .hkids__list p { padding-left: 3.15rem; }
}
@media (min-width: 64rem) {
  .spec-kids .hkids { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .spec-kids .hkids__media { grid-column: 1; grid-row: 1; aspect-ratio: auto; min-height: 30rem; }
  .spec-kids .hkids__copy { grid-column: 2; grid-row: 1; align-self: center; padding: clamp(2.25rem, 3.6vw, 3.25rem); }
  .spec-kids .hkids__list { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-kids .hkids__list li { padding: 1.75rem clamp(1.5rem, 2.4vw, 2.25rem) 1.9rem; }
  .spec-kids .hkids__list li + li { border-top: 0; border-left: 1px solid var(--line, #e6e3ee); }
  .spec-kids .hkids__list h3 { align-items: start; min-height: 2.4rem; }
  .spec-kids .hkids__list h3 > span:last-child { align-self: center; }
  .spec-kids .hkids__list p { padding-left: 0; }
}


/* --------------------------------------------------------------------------
   5. Reviews (client item 15): the Google card and three reviews. On a phone
   the first review shows and "See more reviews" opens the other two (the
   site's fold, assets/js/revision-2.js); from a tablet up all three show and
   "See more reviews" in the heading leads to the Reviews page.
   -------------------------------------------------------------------------- */
.spec-reviews .hrev { display: grid; gap: 0.85rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.spec-reviews .hrev > .gbadge--card { max-width: none; margin: 0; }
.spec-reviews .hrev .quote { height: 100%; margin: 0; }
.spec-reviews .hrev__more { display: grid; gap: 0.85rem; }
.spec-reviews .hrev__every { justify-self: start; margin-top: 0.35rem; }
.spec-reviews .hrev__all { display: none; }
/* Once open, the button has done its job: the way on is "Read every review". */
.spec-reviews .hrev.is-open .hrev__toggle { display: none; }
@media (min-width: 48rem) {
  .spec-reviews .hrev { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .spec-reviews .hrev__more { display: contents; }
  .spec-reviews :is(.hrev__toggle, .hrev__every) { display: none; }
  .spec-reviews .hrev__all { display: inline-flex; }
  .spec-reviews .hrev > .gbadge--card { justify-content: center; }
}
@media (min-width: 80rem) {
  .spec-reviews .hrev { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .spec-reviews .hrev .quote blockquote { font-size: 1.1rem; }
}


/* --------------------------------------------------------------------------
   6. The treatments grid on the care-lane pages ends with its page link
   alone (the doctors above carry the booking buttons).
   -------------------------------------------------------------------------- */
.spec-options .book-cta:not(:has(.btn)) { justify-content: flex-start; }


/* --------------------------------------------------------------------------
   7. Treatment pages, "Meet your orthodontists" / "Meet your child's
   dentist" (components/specialists.php): each doctor card names the
   doctor's specialty (client item 13), in the same chip as the hub cards.
   -------------------------------------------------------------------------- */
.spx .spx__role {
  display: inline-flex; align-self: flex-start; justify-self: start; width: auto; margin: 0 0 0.6rem; padding: 0.32rem 0.7rem;
  border-radius: 999px; background: var(--lane-tint, #eee9f7); color: var(--lane, var(--ortho));
  font-family: var(--text); font-size: 0.72rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
}
.spx--ped .spx__role { background: var(--ped-tint); color: var(--ped); }
/* A role is one label: it never wraps inside its chip. */
:is(.spx__role, .spec-team .hdoc__role) { white-space: nowrap; }
.spx :is(.spx__bio, .spx__book-text, .spx__creds li) { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   8. Section heads on these pages: on a small desktop the heading column
   keeps its own width (up to the heading's measure) and the lede beside it
   takes what is left, so "Meet your orthodontists" is never squeezed into
   a narrow column that breaks it after its first word.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  :is(.spec-steps, .spec-team, .spec-options, .spec-reviews, .spx, .tr-cost, .tr-lane, .tr-proof) > .wrap > .sect-head > .sect-head__copy { flex-shrink: 0; }
}