/* Clinical Clarity / Figma 51:7 + 51:9. Page-only Clinic layout.
   Source facts remain in BRANCHES / branchLocale; no map or image placeholder.
   Native anchors work without JS and do not pretend to be tabs. */
.td-clinic {
  --td-clinic-side: 20px;
  --td-clinic-header: 64px;
  padding-top: var(--header-height, var(--td-clinic-header));
  padding-bottom: 64px;
  color: #22303f;
  background: #fff;
  font: 400 16px/26px var(--font-body);
}
.td-clinic :where(h1, h2, h3, p, dl, dd, ol) { margin: 0; }
.td-clinic :where(p, dd, address) { font-size: 16px; line-height: 26px; overflow-wrap: break-word; }
.td-clinic :where(h1, h2, h3) { color: #162852; }
.td-clinic-container { width: min(1280px, calc(100% - var(--td-clinic-side) * 2)); margin-inline: auto; }
.td-clinic-intro { padding-top: 48px; }
.td-clinic h1 { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -.6px; }
.td-clinic-intro > p { max-width: 840px; margin-top: 24px; }
.td-clinic-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 64px; }
.td-clinic-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 4px; color: #162852; text-decoration: none; font: 600 15px/24px var(--font-body); border-bottom: 2px solid transparent; transition: border-color 160ms ease-out, color 160ms ease-out; }
.td-clinic-locations { margin-top: 56px; }
.td-clinic-location { display: grid; gap: 24px; padding-block: 28px 32px; border-top: 1px solid #e2e6eb; scroll-margin-top: calc(var(--header-height, var(--td-clinic-header)) + 28px); }
.td-clinic-location + .td-clinic-location { margin-top: 32px; }
.td-clinic h2 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.3px; }
.td-clinic-location dl { display: grid; gap: 24px; }
.td-clinic-location dt { color: #51606f; font: 500 13px/20px var(--font-mono); text-transform: uppercase; }
.td-clinic-location dd { margin-top: 8px; }
.td-clinic-location address { font-style: normal; }
.td-clinic-call { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; max-width: 100%; margin-top: 20px; padding-block: 10px; color: #2f5fa8; font: 600 15px/24px var(--font-body); text-decoration: none; text-underline-offset: 5px; }
.td-clinic-arrow { font: 500 22px/24px var(--font-display); transition: transform 160ms ease-out; }
.td-clinic-rotation { margin-top: 48px; padding: 24px; color: #fff; background: #162852; }
.td-clinic-rotation h2 { color: inherit; }
.td-clinic-rotation p { margin-top: 20px; }
.td-clinic-preparation { margin-top: 64px; }
.td-clinic-preparation > p { margin-top: 24px; max-width: 1000px; }
.td-clinic-preparation ol { display: grid; gap: 32px; margin-top: 32px; padding: 0; list-style: none; }
.td-clinic-preparation h3 { display: flex; align-items: baseline; gap: 12px; font: 600 15px/24px var(--font-body); }
.td-clinic-step-number { flex: 0 0 auto; font: 500 13px/20px var(--font-mono); }
.td-clinic-preparation li > p { margin-top: 8px; max-width: 1000px; }
.td-clinic :where(a, [tabindex="-1"]):focus-visible { outline: 3px solid #2f5fa8; outline-offset: 4px; }
.td-clinic-location:target { border-top-color: #2f5fa8; }
@media (hover: hover) {
  .td-clinic-nav a:hover { color: #2f5fa8; border-bottom-color: #2f5fa8; }
  .td-clinic-call:hover { text-decoration: underline; }
  .td-clinic-call:hover .td-clinic-arrow { transform: translate(2px, -2px); }
}
@media (min-width: 600px) {
  .td-clinic { --td-clinic-side: 40px; }
  .td-clinic h1 { font-size: 48px; line-height: 54px; }
  .td-clinic h2 { font-size: 32px; line-height: 38px; }
  .td-clinic-rotation { padding: 32px; }
  .td-clinic-nav { display: flex; flex-wrap: wrap; gap: 16px; }
  .td-clinic-nav a { padding-inline: 16px; }
}
@media (min-width: 1100px) {
  .td-clinic { --td-clinic-side: 80px; --td-clinic-header: 80px; }
  .td-clinic-intro { padding-top: 68px; }
  .td-clinic h1 { font-size: 56px; line-height: 60px; letter-spacing: -1px; }
  .td-clinic h2 { font-size: 38px; line-height: 44px; letter-spacing: -.5px; }
  .td-clinic-nav { gap: 40px; }
  .td-clinic-location { grid-template-columns: minmax(0, 360fr) minmax(0, 840fr); gap: 80px; }
  .td-clinic-location + .td-clinic-location { margin-top: 32px; }
  .td-clinic-rotation { padding: 40px; }
  .td-clinic-preparation { margin-top: 80px; }
}
:lang(zh-TW) .td-clinic { --font-body: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-display: "Schibsted Grotesk", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-mono: "IBM Plex Mono", "Noto Sans TC", "PingFang TC", sans-serif; }
:lang(th) .td-clinic { --font-body: "Inter", "Noto Sans Thai", "Leelawadee UI", sans-serif; --font-display: "Schibsted Grotesk", "Noto Sans Thai", "Leelawadee UI", sans-serif; --font-mono: "IBM Plex Mono", "Noto Sans Thai", "Leelawadee UI", sans-serif; }
:lang(th) .td-clinic :where(h1, h2, h3) { line-height: 1.35; letter-spacing: 0; word-break: normal; }
:lang(th) .td-clinic :where(p, dd, address) { line-height: 28px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .td-clinic *, .td-clinic *::before, .td-clinic *::after { transition: none !important; animation: none !important; transform: none !important; }
}