/* PROCEDURE PAGES ("what to expect", operator 2026-09-26 17:47) and the home page's linked service
   cards. Loaded by every procedure page (procedure.template.html) and added to the home page by
   the fill only when at least one card links (orchestrator src/lib/procedurePages.ts), so a build
   with no guided service is byte-identical to one before this file existed. Tokens are the base
   and dental layers' own (--teal, --ink, --paper, --d-radius...); nothing here sets a colour of
   its own except white and the marked-note ink. */

/* ---------- home: a service card that opens its page ----------------------- */
/* Stretched link: the card's title is the link (its accessible name is the service, not the whole
   card), and its ::after covers the card so the whole surface is the target. */
.svc-card--linked { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.svc-card--linked:hover { transform: translateY(-2px); }
.svc-card-link { color: inherit; text-decoration: none; }
.svc-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.svc-card-link:focus-visible { outline: none; }
.svc-card--linked:has(.svc-card-link:focus-visible) { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.svc-card-more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.8rem;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  color: var(--teal-deep);
}
.svc-card-more::after { content: "\2192"; transition: transform .18s ease; }
.svc-card--linked:hover .svc-card-more::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .svc-card--linked, .svc-card-more::after { transition: none; }
  .svc-card--linked:hover { transform: none; }
}

/* ---------- procedure page: hero ------------------------------------------ */
.proc-hero {
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.proc-hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.proc-hero--media .proc-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.proc-hero-copy { min-width: 0; }

.proc-crumbs ol {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft);
}
.proc-crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: color-mix(in srgb, var(--ink) 35%, transparent); }
.proc-crumbs a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.proc-crumbs a:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }
.proc-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.proc-hero .eyebrow { color: var(--teal-deep); margin-bottom: 0.8rem; }
.proc h1 {
  font-weight: var(--display-weight, 600);
  font-size: calc(clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem) * var(--display-scale, 1));
  line-height: 1.06;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 1rem;
}
.proc-lede { font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.1rem; }
.proc-note {
  font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.6rem;
}
.proc-note .ph-tag { margin-right: 0.45rem; vertical-align: 0.08em; padding: 0.26rem 0.65rem; font-size: 0.66rem; }
.proc-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.proc-actions .ico { stroke: currentColor; }

.proc-hero-media {
  margin: 0; min-width: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--d-radius);
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--ink) 60%, transparent);
}
.proc-hero-media > picture { display: contents; }
.proc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- procedure page: body ------------------------------------------ */
.proc-body { padding-block: clamp(2.5rem, 6vw, 5rem); background: #fff; }
.proc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.proc-article { min-width: 0; max-width: 44rem; }
.proc-block + .proc-block { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.proc-block h2 {
  font-weight: var(--display-weight, 600);
  font-size: calc(clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem) * var(--display-scale, 1));
  line-height: 1.15;
  margin: 0 0 1rem;
}
.proc-block > p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; }
.proc-step-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep); margin: 0 0 0.5rem;
}

.proc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.proc-list li {
  position: relative; padding-left: 2rem;
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
}
.proc-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 16%, #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--teal) 55%, transparent);
}
.proc-list li::after {
  content: ""; position: absolute; left: 0.42rem; top: calc(0.3em + 0.3rem);
  width: 0.34rem; height: 0.58rem;
  border: solid var(--teal-deep); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.proc-steps { list-style: none; padding: 0; margin: 0; counter-reset: proc; display: grid; gap: 1rem; }
.proc-steps li {
  counter-increment: proc;
  position: relative; padding: 0.15rem 0 0 3rem; min-height: 2.2rem;
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
}
.proc-steps li::before {
  content: counter(proc);
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--teal-deep); color: #fff;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 700;
}

.proc-faqs { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.proc-faq { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.proc-faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink);
}
.proc-faq summary::-webkit-details-marker { display: none; }
.proc-faq summary::after {
  content: "+"; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  color: var(--teal-deep); font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
}
.proc-faq[open] summary::after { content: "\2212"; }
.proc-faq summary:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 6px; }
.proc-faq > p { margin: -0.2rem 0 1.15rem; max-width: 62ch; color: var(--ink-soft); line-height: 1.65; }

/* ---------- procedure page: the booking card ------------------------------ */
.proc-aside { position: sticky; top: calc(var(--nav-h, 72px) + 1.5rem); display: grid; gap: 1.5rem; min-width: 0; }
.proc-card {
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  border-radius: var(--d-radius);
  padding: 1.6rem 1.5rem;
  display: grid; gap: 0.85rem; justify-items: start;
}
.proc-card-title, .proc-others-title {
  font-weight: var(--display-weight, 600);
  font-size: 1.45rem; line-height: 1.2; margin: 0;
}
.proc-card > p { margin: 0; color: var(--ink-soft); font-size: 0.975rem; line-height: 1.55; }
.proc-card .pill { margin: 0.2rem 0 0.35rem; }
.proc-card .pill .ico { stroke: currentColor; }
.proc-card .contact-line { color: var(--ink); margin: 0; min-width: 0; font-size: 0.95rem; }
.proc-card .contact-line span { overflow-wrap: anywhere; }
.proc-card .contact-line .ico { stroke: var(--teal-deep); flex: none; }
.proc-card a.contact-line:hover span { text-decoration: underline; text-underline-offset: 3px; }

.proc-others { padding: 0 0.25rem; }
.proc-others-title { font-size: 1.15rem; margin-bottom: 0.75rem; }
.proc-others ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.proc-others a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.proc-others a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- narrow screens ------------------------------------------------ */
@media (max-width: 900px) {
  .proc-hero--media .proc-hero-grid { grid-template-columns: 1fr; }
  .proc-hero-media { aspect-ratio: 16 / 9; }
  .proc-layout { grid-template-columns: 1fr; }
  .proc-aside { position: static; }
}
@media (max-width: 480px) {
  .proc-actions .pill { flex: 1 1 100%; }
}