/* ==========================================================================
   Revision 8: the approved home page's practices across the whole site.
   Loaded after revision-3.css. site.css and inner-redesign.css stay untouched.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Steps (template-parts/components/steps.php): the treatment journey and the
   specialty pages' "How it works". Icons instead of photographs; a horizontal
   stepper from 64rem, a compact vertical list below it.
   -------------------------------------------------------------------------- */
.stepper {
  --stepper-n: 4;
  position: relative; display: grid; gap: 0; max-width: 46rem; margin: 0 auto; padding: 1.35rem 1.25rem;
  list-style: none; 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);
}
.stepper__item { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-content: start; column-gap: 1rem; padding-bottom: 1.35rem; }
.stepper__item:last-child { padding-bottom: 0; }
/* The line from one disc to the next. */
.stepper__item:not(:last-child)::before {
  content: ""; position: absolute; top: 3.5rem; bottom: 0.25rem; left: calc(1.625rem - 1px); width: 2px; border-radius: 2px;
  background: linear-gradient(var(--lane, var(--ortho)), color-mix(in srgb, var(--lane, var(--ortho)) 25%, #fff));
  opacity: 0.45;
}
.stepper__disc {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lane, var(--ortho)) 22%, #fff);
  background: var(--lane-tint-2, #f7f4fb); color: var(--lane, var(--ortho));
  box-shadow: 0 10px 22px -16px var(--lane, var(--ortho));
}
.stepper__disc svg { width: 22px; height: 22px; }
.stepper__body { min-width: 0; padding-top: 0.1rem; }
.stepper .stepper__n { display: block; color: var(--lane, var(--ortho)); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.4; }
.stepper .stepper__body h3 { margin: 0.15rem 0 0; font-family: var(--display); font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.02em; }
.stepper .stepper__body p { max-width: 42ch; margin: 0.35rem 0 0; color: var(--body-strong, var(--body)); font-size: 0.95rem; line-height: 1.55; }

@media (min-width: 64rem) {
  .stepper {
    grid-template-columns: repeat(var(--stepper-n), minmax(0, 1fr)); column-gap: 1.75rem;
    max-width: none; padding: 2.5rem 2.5rem 2.25rem;
  }
  .stepper__item { grid-template-columns: 1fr; padding-bottom: 0; }
  /* Horizontal line from this disc to the next one. */
  .stepper__item:not(:last-child)::before {
    top: calc(2rem - 1px); bottom: auto; left: 4.75rem; right: -1.25rem; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--lane, var(--ortho)), color-mix(in srgb, var(--lane, var(--ortho)) 25%, #fff));
  }
  .stepper__disc { width: 4rem; height: 4rem; }
  .stepper__disc svg { width: 26px; height: 26px; }
  .stepper__body { margin-top: 1.2rem; padding-top: 0; }
  .stepper .stepper__body h3 { font-size: 1.2rem; }
  .stepper .stepper__body p { max-width: 30ch; font-size: 0.94rem; }
}

/* The journey's section already has a heading block above; keep the rhythm. */
.landing-head + .stepper, .section-head + .stepper, .sect-head + .stepper { margin-top: 2.5rem; }


/* --------------------------------------------------------------------------
   Heroes: the approved home hero's actions on every page
   (elite_ortho_hero_actions() prints .hero-book, .hero-contact, .hero-go).
   -------------------------------------------------------------------------- */
.premium-inner .ihero__copy > .hero-book { margin-top: 0.5rem; }
.premium-inner .ihero__copy > .hero-contact { margin-top: 0.85rem; }
.premium-inner .ihero__copy > .hero-go { margin-top: 1rem; }
.premium-inner .ihero__in--solo .ihero__copy > :is(.hero-book, .hero-contact) { align-self: center; }
.premium-inner .ihero__in--solo .ihero__copy > .hero-contact { justify-content: center; }

@media (max-width: 47.99rem) {
  /* A phone shows the lede's first sentence (inner-hero.php splits it). */
  .lede__extra { display: none; }
  /* The H1 uses the column, as on the home page (it was held to 13ch). */
  .premium-inner .ihero__copy h1,
  .premium-inner .ihero--profile .ihero__copy h1 { max-width: none; }
  .premium-inner .ihero__copy > :is(.hero-book, .hero-contact),
  .premium-inner .ihero__in--solo .ihero__copy > :is(.hero-book, .hero-contact) { align-self: stretch; width: 100%; }
  .premium-inner .hero-book .btn--stacked { width: 100%; }
  /* The hero photograph stays, cropped so the hero stays near one screen:
     landscape artwork at 16:10, a portrait square. */
  .premium-inner .ihero__art.ihero__art--wide { aspect-ratio: 16 / 10; }
  .premium-inner .ihero__art:not(.ihero__art--wide) { aspect-ratio: 1 / 1; }
  .premium-inner .ihero__art img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 25%; }
}


/* --------------------------------------------------------------------------
   Card grids: compact two-up tiles on a phone, as on the home page, for any
   grid of icon tiles (photo cards keep their own layout).
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .premium-inner .grid--svc:not(:has(> .svc--img)),
  .premium-inner .grid--svc.grid--4:not(:has(> .svc--img)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc { padding: 0.95rem 0.85rem; }
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc h3 { font-size: 0.96rem; line-height: 1.2; letter-spacing: -0.01em; }
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc p { font-size: 0.8rem; line-height: 1.45; -webkit-line-clamp: 2; }
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc:not(.svc--cta):last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.3rem);
  }
  .premium-inner .grid--svc + .book-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .premium-inner .grid--svc + .book-cta .btn { width: 100%; }
}
/* No call-to-action tile inside a grid of treatments (P4). */
.grid--svc > .svc--cta { display: none; }


/* --------------------------------------------------------------------------
   Facts bar: three facts on a tablet were two plus one stretched across a
   second row; they sit in one row of three.
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) and (max-width: 77.5rem) {
  .premium-inner .facts[style*="--facts:3"] > .fact:nth-child(3) { grid-column: auto; }
}


/* --------------------------------------------------------------------------
   Rhythm: 40px from a section heading to its content, as on the home page.
   -------------------------------------------------------------------------- */
.premium-inner .sect-head,
.premium-inner .landing-head { margin-bottom: 2.5rem; }


/* --------------------------------------------------------------------------
   The building photograph is a darkened file; it gets the lift the home page
   gives it wherever it appears.
   -------------------------------------------------------------------------- */
img[src*="elite-building"] { filter: brightness(1.3) saturate(1.05); }


/* --------------------------------------------------------------------------
   Revision 8, final shared pass (from the page groups' reports)
   -------------------------------------------------------------------------- */

/* Hero: the phone and Get Directions pills sit as close to the booking
   buttons as on the home page (the column's gap was added to their margin). */
.premium-inner .ihero__copy > .hero-book + .hero-contact { margin-top: -0.2rem; }
@media (min-width: 48rem) {
  .premium-inner .ihero__copy > .hero-book + .hero-contact { margin-top: -0.25rem; }
}

/* Footer: the 104px bottom padding held space for the fixed booking bar,
   which is gone; the inner footer now matches the home footer. */
@media (max-width: 720px) {
  .premium-inner .footer__legal { padding-bottom: 2rem; }
}

/* Facts bar on a tablet: the three cells start at the same height. */
@media (min-width: 40rem) and (max-width: 77.5rem) {
  .premium-inner .facts[style*="--facts:3"] { align-items: stretch; }
  .premium-inner .facts[style*="--facts:3"] > .fact { align-self: stretch; align-content: start; }
}

/* Tile titles stay within two lines on phones narrower than 390px
   ("Early Orthodontics (Phase I)" took three at 320 to 384px). */
@media (max-width: 24.36rem) {
  .grid--svc > .svc h3,
  .home .grid--svc > .svc h3,
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc h3 { font-size: 0.88rem; letter-spacing: -0.02em; }
}


/* --------------------------------------------------------------------------
   Revision 8, final QA: the inner pages render the approved home footer.
   inner-redesign.css gave .premium-inner footers their own skin (mint column
   headings, a white display-font phone number, other link colours, grid and
   background). These values are the home footer's own, measured.
   -------------------------------------------------------------------------- */
.premium-inner .site-footer {
  --wrap: 82rem;
  padding-top: 3rem; background: rgb(18, 12, 38); color: rgba(255, 255, 255, 0.62);
}
.premium-inner .footer__grid { gap: 1.75rem; padding-top: 0; }
.premium-inner .footer__brandcol .brand { margin-bottom: 0; }
.premium-inner .footer__phone {
  margin-top: 0; color: rgba(255, 255, 255, 0.62) !important;
  font-family: var(--text); font-size: 1.35rem; font-weight: 750; line-height: 1.62; letter-spacing: -0.02em;
}
.premium-inner .site-footer h3 {
  margin-bottom: 0; color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.14; letter-spacing: 0.12em;
}
.premium-inner .site-footer ul { margin-top: 0.9rem; }
.premium-inner .site-footer li a { min-height: 44px; color: rgba(255, 255, 255, 0.62); font-size: 0.925rem; line-height: 1.62; }
.premium-inner .site-footer li a:hover { color: #fff; }
.premium-inner .footer__legal {
  gap: 0.75rem; align-items: normal; padding-block: 1.5rem 2rem;
  border-top-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.62); font-size: 0.82rem; line-height: 1.62;
}
.premium-inner .footer__legal > p, .premium-inner .footer__legal nav a { font-size: 0.82rem; line-height: 1.62; }
.premium-inner .footer__legal nav { gap: 0 1.15rem; }
@media (min-width: 45.0625rem) and (max-width: 63.99rem) {
  .premium-inner .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 2.5rem; }
  .premium-inner .footer__brandcol { grid-row: auto; max-width: none; }
}
@media (min-width: 64rem) {
  /* Inner pages share the home layout width and gutter, so the logo and every
     content edge stay put when moving from the home page to any other page. */
  .premium-inner { --wrap: 82rem; --gut: 2.5rem; }
  .premium-inner .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.75rem; padding-bottom: 3.5rem; }
  .premium-inner .footer__brandcol { max-width: none; }
  .premium-inner .footer__legal { align-items: center; }
}


/* FAQ questions: the chevron sits at the card edge, level with the other
   fold chevrons (the 56px right padding was reserved for an absolutely placed
   chevron that the flex layout never used). */
.premium-inner .faq summary { padding-right: 1.3rem; }

/* The desktop nav marks the section of a doctor's profile or a treatment
   (aria-current="true", set by inner-redesign.js) like the current page. */
@media (min-width: 64rem) {
  .premium-inner .site-header .nav-desktop a[aria-current="true"] { color: var(--ortho); border-bottom: 2px solid var(--ortho); }
}

/* The pediatric button's doctor line reaches 4.5:1 on the teal (was 3.98:1). */
.btn--ped.btn--stacked .btn__slot { color: rgba(255, 255, 255, 0.9); }

.nowrap { white-space: nowrap; }

/* Reviews: the link to the rest of the reviews on Google. */
.reviews-google { display: flex; justify-content: center; margin-top: 2.5rem; }

/* A heading accent in a section head reads like the H1 accent, not italic. */
.premium-inner :is(.landing-head, .sect-head) h2 em { font-style: normal; color: var(--lane, var(--ortho)); }

/* Under 350px (small older phones) the tile titles step down once more, so
   "Early Orthodontics (Phase I)" still fits two lines. */
@media (max-width: 21.87rem) {
  .grid--svc > .svc h3,
  .home .grid--svc > .svc h3,
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc h3 { font-size: 0.8rem; }
  .home .grid--svc > .svc,
  .premium-inner .grid--svc:not(:has(> .svc--img)) > .svc { padding-inline: 0.6rem; }
}