/* ui_kits/website/restore-clinic.css
   Shared additions for the nested RESTORE sub-clinic pages (restore-memory /
   restore-movement / restore-pain). Each of those loads, in order:
     colors_and_type.css → site.css → home.css → restore.css → restore-clinic.css
   so it inherits the whole RESTORE colour story (terracotta stripes, framed
   cards, form hover) and only adds the bits unique to a sub-clinic:
     · a breadcrumb back up to RESTORE
     · a "diagnoses we treat" tag row
     · the differential value cards (reuses .restore-why / .lcard)
     · a numbered "as a programme" difference strip
     · a cross-nav to the sibling clinics
   Terracotta tokens (--restore-clay*) come from restore.css. */

/* ---- Inline перелінковка links inside RESTORE-family copy ------------- */
/* Base <a> is gold (colors_and_type.css); on the terracotta RESTORE track the
   cross-links to clinics/technologies read in the page's own accent instead. */
.restore-flow__lead a,
.restore-proc__lead a,
.restore-proc__desc a,
.restore-stage__desc a,
.lcard__desc a,
.hv-booking__body a {
  color: var(--restore-clay-deep);
  text-decoration: underline;
  text-decoration-color: var(--restore-clay-soft);
  text-underline-offset: 2px;
}
.restore-flow__lead a:hover,
.restore-proc__lead a:hover,
.restore-proc__desc a:hover,
.restore-stage__desc a:hover,
.lcard__desc a:hover,
.hv-booking__body a:hover {
  color: var(--restore-clay);
  text-decoration-color: var(--restore-clay);
}
/* A technology name used AS a card title keeps the heading colour, only underlined. */
.restore-proc__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--restore-clay-soft);
  text-underline-offset: 3px;
}
.restore-proc__title a:hover { text-decoration-color: var(--restore-clay); }

/* ---- Breadcrumb: RESTORE › Клініка X ---------------------------------- */
.rc-crumb {
  padding: 40px 0 0;
}
.rc-crumb__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.rc-crumb__nav a {
  color: var(--restore-clay-deep);
  text-decoration: none;
  transition: color 0.2s var(--ease-quiet);
}
.rc-crumb__nav a:hover { color: var(--restore-clay); }
.rc-crumb__sep { color: var(--sand-200); }
.rc-crumb__here { color: var(--ink-700); }

/* ---- Diagnoses tag row (the spectrum this clinic covers) -------------- */
.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.rc-tag {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--restore-clay-deep);
  background: var(--restore-clay-tint);
  border: 1px solid var(--restore-clay-soft);
  border-radius: 999px;
  padding: 9px 15px;
}

/* ---- Differential list: several states behind one complaint ----------- */
/* Reuses the .lcard grid; each card gets a small terracotta index. */
.rc-diff .lcard { --lcard-stripe: var(--restore-clay); position: relative; }

/* On the RESTORE sub-clinic pages every value card reads as a RESTORE card:
   a terracotta left rule ONLY — no grey box, no gold default stripe. */
.rc-diff .lcard,
.restore-proc .lcard {
  --lcard-stripe: var(--restore-clay);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 4px 22px 6px 26px;
}
.rc-diff .lcard::before,
.restore-proc .lcard::before { width: 3px; }
.rc-diff__k {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--restore-clay-deep);
  margin: 0 0 8px;
}

/* ---- "As a programme" difference strip ------------------------------- */
/* No connecting line — the terracotta numbered discs alone carry the
   sequence. Same treatment at every width: disc on the LEFT, step text on
   the RIGHT; only the column count changes (4 → 2 → 1). */
.rc-cycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
  margin-top: 56px;
  counter-reset: rc;
}
.rc-cycle__step {
  position: relative;
  padding-left: 44px;
}
.rc-cycle__step::before {
  counter-increment: rc;
  content: counter(rc);
  position: absolute;
  top: -3px;
  left: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--restore-clay);
  color: var(--cream-50);
  font-family: var(--font-serif);
  font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.rc-cycle__t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0 0 6px;
}
.rc-cycle__d {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
}

/* ---- Cross-nav to sibling clinics ------------------------------------- */
.rc-siblings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
/* four clinics → a 2×2 grid on the RESTORE landing */
.rc-siblings__grid--4 { grid-template-columns: repeat(2, 1fr); }
.rc-sib {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--sand-200);
  border-radius: var(--r-card);
  background: var(--cream-50);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-quiet), transform 0.2s var(--ease-quiet);
}
.rc-sib:hover { border-color: rgba(204, 58, 47, 0.35); transform: translateY(-3px); }
.rc-sib--current {
  background: var(--restore-clay-tint);
  border-color: var(--restore-clay-soft);
  pointer-events: none;
}
.rc-sib__k {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--restore-clay-deep);
}
.rc-sib__t {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
}
.rc-sib__d {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.rc-sib__go {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--restore-clay-deep);
}
.rc-sib--current .rc-sib__go { color: var(--ink-400); }

/* ====================================================================
   New-wireframe PREVIEW helpers (HELMIVI-clinic-page-wireframes.pdf)
   Used by restore-memory / restore-movement / restore-pain while the new
   section structure is being reviewed. Pure layout on top of the existing
   RESTORE colour story — no new tokens.
   ==================================================================== */

/* 3- and 2-up variants of the shared .lcard grid */
.lcard-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lcard-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* small terracotta kicker inside a recognition card */
.rc-card__k {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--restore-clay-deep);
  margin: 0 0 10px;
}
.rc-diff .lcard-grid { margin-top: 56px; }

/* symptom-screening block — the whole section is the test, so the copy sits
   openly in the section (no card box), like peak's .bt-invite.
   Single test: heading + text in a left column, button vertically centred
   against it on the right. */
.rc-test__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 64px;
  flex-wrap: wrap;
}
.rc-test__col { max-width: 60ch; }
.rc-test__row .hv-btn { flex: none; }
.rc-test__lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 22px 0 0;
}
/* movement: two screenings — intro copy on the LEFT, the two tests stacked
   one under the other on the RIGHT */
.rc-test__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  align-items: start;
}
.rc-test__stack { display: flex; flex-direction: column; gap: 40px; }
.rc-test__item { padding-top: 0; }
.rc-test__t {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.rc-test__item .rc-test__t { margin: 0 0 20px; }
@media (max-width: 900px) {
  .rc-test__split { grid-template-columns: 1fr; gap: 36px; }
}
/* gold at rest → RESTORE terracotta on hover/active, like the booking form
   and the express-test buttons (site.css sets the gold; this file loads last) */
.rc-test .hv-btn--primary:hover,
.rc-test .hv-btn--primary:active,
.rc-test .hv-btn--primary:focus-visible {
  background: var(--restore-clay);
  border-color: var(--restore-clay);
  color: var(--cream-50);
}

/* stress clinic — «блок безпеки»: за високої категорії результату скринінгу
   показуємо контакти кризової допомоги. Amber-акцент, окремо від тесту. */
.rc-test__safety {
  margin: 32px 0 0;
  padding: 16px 20px;
  border-left: 3px solid #d98324;               /* amber — «блок безпеки» */
  background: rgba(217, 131, 36, 0.07);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 80ch;
}

/* static symptom switch (pain clinic — preview only, non-interactive) */
.rc-switch {
  display: inline-flex;
  gap: 6px;
  margin-top: 26px;
  padding: 6px;
  border: 1px solid var(--sand-200);
  border-radius: 999px;
  background: var(--cream-50);
}
.rc-switch__opt {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
}
.rc-switch__opt--on { background: var(--restore-clay); color: var(--cream-50); }

/* .rc-lede (visible page H1 block) now lives in home.css so peak / protect /
   home / restore all share it. */

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .rc-cycle { grid-template-columns: repeat(2, 1fr); }
  .rc-siblings__grid, .rc-siblings__grid--4 { grid-template-columns: 1fr; gap: 16px; }
  .lcard-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lcard-grid--3, .lcard-grid--2 { grid-template-columns: 1fr; }
  /* Switch → full-width split so both directions stay tappable and legible */
  .rc-switch { display: flex; width: 100%; }
  .rc-switch__opt { flex: 1; text-align: center; padding: 11px 12px; }
  /* One column: discs stay on the left, step text on the right, running
     straight down. */
  .rc-cycle { grid-template-columns: 1fr; gap: 24px; }
}