/* v3 service detail template (services/*.html). Loaded through the page meta: "css": ["v3-service.css"], "body_class": "v3-tpl-service".
   Builds on v3-pages.css (page-hero, section, section-heading, prose, faq-list, cta-band, office-list, di-ba-*, service-index).
   Sections: hero with photo, What it is, options cards, The process (numbered steps), Recovery (facts + cards),
   Before and after, Is it right for you (two cards), FAQ + related chips, Schedule band + offices.
   Solid white cards only; glass stays on buttons, chips and badges. All motion is CSS scroll-driven and off under reduced motion.
   Markup pattern: build/nyct-dentistry-implants/src/SERVICE-TEMPLATE.md */

/* ---------- hero: text left, one real photo right, kept short ---------- */
body.v3-tpl-service .svc-hero { min-height: min(46vh, 480px); }
body.v3-tpl-service .svc-hero h1 { max-width: 15ch; }
body.v3-tpl-service .svc-hero .lede { max-width: 40ch; }
body.v3-tpl-service .svc-hero > figure.svc-hero-media { max-width: 460px; }
body.v3-tpl-service .svc-hero > figure.svc-hero-media.is-square img { aspect-ratio: 1 / 1 !important; }

/* ---------- what it is: one readable column ---------- */
body.v3-tpl-service .svc-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
body.v3-tpl-service .svc-lead p + p { margin-top: 1em; }

/* ---------- option cards: solid white, a quiet footer line for the restoration ---------- */
body.v3-tpl-service .svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
body.v3-tpl-service .svc-cards > li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 32px 30px 28px; border-radius: var(--v3-radius); background: #fff; color: var(--v3-ink); box-shadow: var(--v3-card-shadow); transition: transform .3s var(--v3-lift), box-shadow .3s; }
body.v3-tpl-service .svc-cards > li:hover { transform: translateY(-6px); box-shadow: var(--v3-card-shadow-hover); }
body.v3-tpl-service .svc-cards h3 { margin: 0; font-size: 24px; }
body.v3-tpl-service .svc-cards p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--v3-ink-2); }
body.v3-tpl-service .svc-cards .svc-card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); font-size: 15px; }
body.v3-tpl-service .svc-card-foot strong { display: block; margin-bottom: 3px; font-weight: 600; color: var(--v3-ink); }
body.v3-tpl-service .svc-cards .text-link { margin-top: 4px; font-size: 17px; }

/* ---------- the process: numbered steps on a line that fills as you scroll ---------- */
body.v3-tpl-service .svc-steps { --svc-dot: 44px; position: relative; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; counter-reset: svc-step; }
/* connector from each number down to the next one: a grey track that fills logo blue as the step scrolls through */
body.v3-tpl-service .svc-steps > li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--svc-dot) + 6px); bottom: 6px; left: calc(var(--svc-dot) / 2 - 1px); width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #a3adf6, var(--v3-brand)) 0 0 / 100% 100% no-repeat, rgba(0,0,0,.08); }
body.v3-tpl-service .svc-steps > li { position: relative; display: grid; grid-template-columns: var(--svc-dot) minmax(0, 1fr); column-gap: 24px; margin: 0; padding: 0 0 clamp(30px, 4vw, 44px); counter-increment: svc-step; }
body.v3-tpl-service .svc-steps > li:last-child { padding-bottom: 0; }
body.v3-tpl-service .svc-steps > li::before { content: counter(svc-step); position: relative; z-index: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: var(--svc-dot); height: var(--svc-dot); border-radius: 50%; background: #fff; box-shadow: var(--v3-card-shadow); font: 600 17px/1 var(--v3-font); color: var(--v3-ink); }
body.v3-tpl-service .svc-steps h3 { grid-column: 2; margin: 9px 0 6px; font-size: clamp(20px, 2vw, 24px); }
body.v3-tpl-service .svc-steps p { grid-column: 2; margin: 0; font-size: 17px; line-height: 1.55; color: var(--v3-ink-2); }
body.v3-tpl-service .svc-step-time { grid-column: 2; justify-self: start; margin-top: 12px; padding: 5px 12px; border-radius: var(--v3-pill); font: 500 13px/1.3 var(--v3-font); color: var(--v3-ink);
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 1px #fff, 0 0 0 .5px rgba(29,29,31,.14), 0 6px 14px -8px rgba(40,44,60,.3);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); }

/* ---------- recovery: three quiet figures, then two cards ---------- */
body.v3-tpl-service .svc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
body.v3-tpl-service .svc-facts > li { margin: 0; padding: 4px 8px; }
body.v3-tpl-service .svc-facts strong { display: block; white-space: nowrap; font: 600 clamp(30px, 3.2vw, 40px)/1.05 var(--v3-font); letter-spacing: -.012em; color: var(--v3-ink); }
body.v3-tpl-service .svc-facts span { display: block; max-width: 24ch; margin: 10px auto 0; font-size: 16px; line-height: 1.45; color: var(--v3-ink-2); }
body.v3-tpl-service .svc-facts + .svc-duo { margin-top: clamp(44px, 6vw, 72px); }

/* two solid cards side by side (recovery, right for you) */
body.v3-tpl-service .svc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
body.v3-tpl-service .svc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 34px 32px; border-radius: var(--v3-radius); background: #fff; box-shadow: var(--v3-card-shadow); text-align: left; }
body.v3-tpl-service .svc-card h3 { margin: 0; font-size: clamp(21px, 2vw, 24px); }
body.v3-tpl-service .svc-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--v3-ink-2); }
body.v3-tpl-service .svc-card .text-link { margin-top: auto; padding-top: 6px; font-size: 17px; }
body.v3-tpl-service .svc-avatar { width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; background: #e9eaed; box-shadow: 0 0 0 3px #fff, 0 8px 20px -10px rgba(0,0,0,.35); }

/* ---------- before and after: two equal frames; x-rays sit whole on black ---------- */
body.v3-tpl-service .svc-ba .di-ba-grid { max-width: 1080px; margin: 0 auto; }
body.v3-tpl-service .svc-ba-contain .mo-compare img,
body.v3-tpl-service .svc-ba-contain .di-ba-img img { object-fit: contain; background: #000; }
body.v3-tpl-service .svc-ba .more-link { margin: 36px 0 0; max-width: none; }

/* ---------- FAQ: related chips under the panel ---------- */
body.v3-tpl-service .svc-related { max-width: 820px; margin: clamp(44px, 6vw, 64px) auto 0; text-align: center; }
body.v3-tpl-service .svc-related-label { margin: 0; font: 600 17px/1.3 var(--v3-font); color: var(--v3-ink-2); }
body.v3-tpl-service .svc-related .service-index { margin-top: 16px; }

/* ---------- schedule band: the band, then the office cards ---------- */
body.v3-tpl-service .svc-book .cta-band { gap: 0; }
body.v3-tpl-service .svc-book .cta-band .eyebrow { margin: 0 0 10px; }
body.v3-tpl-service .svc-book .cta-band h2 { margin: 0 auto; }
body.v3-tpl-service .svc-book .cta-band p:not(.eyebrow) { margin: 16px auto 0; max-width: 46ch; font: 400 var(--v3-fs-intro)/1.38 var(--v3-font); color: var(--v3-ink-2); }
body.v3-tpl-service .svc-book .office-list { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- motion: the step line fills with the scroll; cards rise (v3-pages handles [data-reveal]) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.v3-tpl-service .svc-steps > li:not(:last-child)::after { animation: svc-fill linear both; animation-timeline: view(); animation-range: entry 80% cover 60%; }
    body.v3-tpl-service .svc-steps > li::before { animation: svc-dot linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }
}
@keyframes svc-fill { from { background-size: 100% 0%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes svc-dot { from { color: var(--v3-ink-2); box-shadow: var(--v3-card-shadow); } to { color: var(--v3-brand); box-shadow: inset 0 0 0 1.5px rgba(37,82,176,.55), 0 10px 24px -12px rgba(37,82,176,.45); } }
@media (prefers-reduced-motion: reduce) {
  body.v3-tpl-service .svc-steps > li::after, body.v3-tpl-service .svc-steps > li::before { animation: none; }
  body.v3-tpl-service .svc-cards > li:hover { transform: none; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
  body.v3-tpl-service .svc-hero h1, body.v3-tpl-service .svc-hero .lede { max-width: 22ch; }
  body.v3-tpl-service .svc-hero .lede { max-width: 30ch; }
  body.v3-tpl-service .svc-hero > figure.svc-hero-media { max-width: 420px; }
}
@media (max-width: 734px) {
  body.v3-tpl-service .svc-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.v3-tpl-service .svc-cards > li { padding: 26px 22px 22px; }
  body.v3-tpl-service .svc-steps { --svc-dot: 36px; }
  body.v3-tpl-service .svc-steps > li { column-gap: 16px; }
  body.v3-tpl-service .svc-steps > li::before { font-size: 15px; }
  body.v3-tpl-service .svc-steps h3 { margin-top: 5px; }
  body.v3-tpl-service .svc-steps p { font-size: 16px; }
  body.v3-tpl-service .svc-facts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  body.v3-tpl-service .svc-duo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.v3-tpl-service .svc-card { padding: 26px 22px; }
}

/* ---------- review fixes (10-06): fewer bands ---------- */
/* "Is it right for you" now sits under "What it is"; Recovery sits under the process timeline */
body.v3-tpl-service .svc-fit-duo { margin-top: clamp(40px, 5vw, 64px); }
body.v3-tpl-service .svc-sub { max-width: 760px; margin: clamp(56px, 7vw, 88px) auto clamp(24px, 3vw, 36px); text-align: center; font: 600 clamp(26px, 3vw, 34px)/1.12 var(--v3-font); letter-spacing: -.004em; scroll-margin-top: calc(var(--v3-nav-h) + 16px); }

/* ---------- launch fixes (10-07) ---------- */
/* low-resolution before and after photos never stretch past their sharp size */
body.v3-tpl-service .svc-ba .di-ba-pair { width: 100%; max-width: 560px; margin-inline: auto; box-sizing: border-box; }
/* X-ray pairs fill their frame at the X-ray's own shape: no black bars */
body.v3-tpl-service .svc-ba-contain .mo-compare, body.v3-tpl-service .svc-ba-contain .di-ba-img { aspect-ratio: 550 / 283; }
body.v3-tpl-service .svc-ba-contain .mo-compare img, body.v3-tpl-service .svc-ba-contain .di-ba-img img { object-fit: cover; background: #000; }
/* patient videos under the results */
body.v3-tpl-service .svc-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 620px) { body.v3-tpl-service .svc-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.v3-tpl-service .svc-ba .more-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
/* a framed photo at the top of a card */
body.v3-tpl-service .svc-card-photo { width: 100%; margin: 0 0 6px; }
body.v3-tpl-service .svc-card-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
/* two columns of short items in one section (emergency: first aid, and ER or dentist) */
body.v3-tpl-service .svc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
body.v3-tpl-service .svc-split-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 34px 32px; border-radius: var(--v3-radius); background: #fff; box-shadow: var(--v3-card-shadow); scroll-margin-top: calc(var(--v3-nav-h) + 16px); }
body.v3-tpl-service .svc-split-col h3 { margin: 0; font-size: clamp(21px, 2vw, 24px); }
body.v3-tpl-service .svc-mini { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.v3-tpl-service .svc-mini li { display: grid; gap: 4px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); }
body.v3-tpl-service .svc-mini li:first-child { padding-top: 0; border-top: 0; }
body.v3-tpl-service .svc-mini strong { font: 600 17px/1.3 var(--v3-font); color: var(--v3-ink); }
body.v3-tpl-service .svc-mini span { font-size: 16px; line-height: 1.5; color: var(--v3-ink-2); }
body.v3-tpl-service .svc-split-col > .text-link { margin-top: auto; font-size: 17px; }
@media (max-width: 734px) {
  body.v3-tpl-service .svc-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.v3-tpl-service .svc-split-col { padding: 26px 22px; }
}
/* one before and after pair sits centered */
body.v3-tpl-service .svc-ba .di-ba-grid.svc-ba-one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
body.v3-tpl-service .svc-ba .di-ba-grid { align-items: start; }
/* two or three videos on a service page need no language filter (each card carries its EN / ES badge) */
body.v3-tpl-service .vd-filters { display: none; }
/* the plain card next to a card with a photo keeps its text centered instead of leaving a gap below */
body.v3-tpl-service .svc-duo:has(.svc-card-photo) > .svc-card:not(:has(.svc-card-photo)) { justify-content: center; }
body.v3-tpl-service .svc-card-photo img { aspect-ratio: 16 / 9; }