/* ui_kits/website/restore.css
   RESTORE programme landing — extends colors_and_type.css + site.css + home.css.
   Mirrors peak.css / protect.css, but the accent is the TERRACOTTA the RESTORE
   brain + hero label use (#cc3a2f), and the signature diagram is REGENERATION:
   the brain draws in, then terracotta dendrites grow OUTWARD from it and fork
   into new branches — neuroplasticity, connections rebuilt around the injury —
   instead of PEAK's numbered ring or PROTECT's shield. One continuous colour
   story with the locked RESTORE hero. */

:root {
  --restore-clay:      #cc3a2f;            /* matches the RESTORE brain + hero label */
  --restore-clay-deep: #a8392b;            /* legible terracotta for small text/labels on cream */
  --restore-clay-soft: rgba(204, 58, 47, 0.16);
  --restore-clay-tint: rgba(204, 58, 47, 0.06);
}

/* Hero — the locked RESTORE brain, embedded full-viewport (reuses .home-hero). */
.restore-hero {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
}

/* ============================================================
   SECTION — Що дає RESTORE (.lcard value cards)
   The link-card component itself lives in home.css; here we only retune it to
   the RESTORE colour story — the left stripe, the clickable card's arrow and
   hover border take the page's terracotta instead of the default gold.
   ============================================================ */
.restore-why .lcard            { --lcard-stripe: var(--restore-clay); }
.restore-why .lcard__arrow     { color: var(--restore-clay); }
.restore-why a.lcard:hover     { border-color: rgba(204, 58, 47, 0.35); }
/* Картки — частина цього ж блоку, тому відступ над ними менший за відступ під
   ними: заголовок, лід і сітка читаються як одне ціле, а низ секції лишає повні
   120px .hv-section. Раніше секція віддавала свій нижній padding наступному
   блоку — після перестановки «Як це працює» ↔ «Що дає» під нею опинилась секція
   з іншим фоном, і картки впиралися просто в межу кольору. */
.restore-why .lcard-grid       { margin-top: 72px; }

/* Рядок-заклик під картками «Що дає RESTORE» — не картка, а окремий рядок
   із теракотовою лінією зліва (як .page-intro__trust), клікабельний до форми. */
.restore-why__cta {
  display: block;
  margin: 44px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--restore-clay);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  text-decoration: none;
  max-width: 74ch;
  transition: color 0.2s var(--ease-quiet), border-color 0.2s var(--ease-quiet);
}
.restore-why__cta:hover {
  color: var(--restore-clay);
  border-left-color: var(--restore-clay-deep);
}

/* ============================================================
   SECTION — Програма відновлення (the REGENERATION diagram)
   ============================================================ */
.restore-flow__lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 64ch;
  margin: 22px 0 0;
}

/* The centrepiece: a symmetric stage with the programme stages flanking the
   regenerating brain. On desktop three stages sit to each side. */
.restore-regen-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 80px;
}

.restore-regen {
  width: min(380px, 80vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;       /* brain + label share one centred column */
}
.restore-regen__svg {
  width: 100%;
  aspect-ratio: 160 / 140;   /* viewBox is cropped tight to the brain — no dead
                                space below it, so the brain's optical centre lines
                                up with the flanking stages (align-items:center). */
  overflow: visible;
  pointer-events: none;
}

/* The brain is drawn FROM LINES in the moment of animation — the site's exact
   brain-icon form, stroked (fill:none) rather than filled, so its single
   continuous path traces itself in as line-art (the two hemispheres + folds).
   Enlarged to centrepiece scale (×6 via the group transform). pathLength=100
   keeps the dash maths simple; no non-scaling-stroke, which would fracture the
   dash draw. */
.restore-brain {
  fill: none;
  stroke: var(--restore-clay);
  stroke-width: 0.4;            /* in the icon's 24-unit space → ~2.4px at ×6 */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 10s var(--ease-quiet);   /* 5× slower draw */
  transition-delay: 0.15s;
}
.restore-regen-wrap.is-drawn .restore-brain { stroke-dashoffset: 0; }

/* Programme descriptor sits BELOW the rebuilt brain (the brain fills the upper
   ~70% of the box; the seam-bottom is ~y143/200), fading up once the hemispheres
   have formed. */
.restore-regen__label {
  margin-top: 16px;             /* sits just below the rebuilt brain, centred */
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-quiet);
  transition-delay: 1.3s;
  pointer-events: none;
}
.restore-regen-wrap.is-drawn .restore-regen__label { opacity: 1; }
.restore-regen__label-k {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.9vw, 19px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--restore-clay-deep);
}
.restore-regen__label-s {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The programme stages — three to the left (text flush right, toward the brain),
   three to the right (flush left). They fade up in sequence as the branches grow. */
.restore-stages {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}
.restore-stages--left  { text-align: right; }
.restore-stages--right { text-align: left; }
.restore-stage {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-quiet), transform 0.6s var(--ease-quiet);
  transition-delay: calc(var(--i, 0) * 0.16s + 1.3s);
}
.restore-regen-wrap.is-drawn .restore-stage { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .restore-stage { opacity: 1; transform: none; }
  .restore-brain { transition: none; stroke-dashoffset: 0; }
  .restore-regen__label { transition: none; opacity: 1; }
}
/* A short terracotta tick above each stage title, hugging the side facing the brain. */
.restore-stage::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--restore-clay);
  margin: 0 0 12px;
}
.restore-stages--left  .restore-stage::before { margin-left: auto; }   /* tick on the right */
.restore-stages--right .restore-stage::before { margin-right: auto; }  /* tick on the left */
.restore-stage__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0;
}
.restore-stage__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 6px 0 0;
}

/* ============================================================
   SECTION — Якими методами працюємо (terracotta-framed cards)
   ============================================================ */
.restore-proc__lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 22px 0 56px;
}
.restore-proc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.restore-proc__card { display: flex; flex-direction: column; }
.restore-proc__card .ph { aspect-ratio: 4 / 3; }
/* terracotta frame — same overlay-line technique as .ph--framed, RESTORE colour. */
.ph--restore.ph--framed::after { border-color: var(--restore-clay); }
.restore-proc__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 22px 0 8px;
}
.restore-proc__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

/* ============================================================
   SECTION — Форма запису (RESTORE accent on hover)
   Terracotta is a DARK, saturated accent, so white text reads cleanly on it
   (unlike PROTECT's light amber). restore.css only loads here, so other pages
   keep the gold behaviour.
   ============================================================ */
.hv-booking__ctas .hv-btn--primary:hover,
.hv-booking__ctas .hv-btn--anon:hover {
  background: var(--restore-clay);
  border-color: var(--restore-clay);
  color: var(--cream-50);
}
/* anonymous-contact modal — terracotta accent on the RESTORE track */
.hv-anon__tag { color: var(--restore-clay-deep); }
.hv-anon__close:hover { color: var(--restore-clay); border-color: var(--restore-clay); }
.hv-anon__opt:hover {
  border-color: rgba(204, 58, 47, 0.4);
  background: var(--restore-clay-tint);
  transform: translateX(3px);
}
.hv-anon__opt:hover .hv-anon__ic { color: var(--restore-clay); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  /* Match the shared layout's single tablet breakpoint (960px) so the brain,
     proc grid, headings and form all collapse together — no in-between state. */
  .restore-proc__grid { grid-template-columns: repeat(2, 1fr); }
  /* Breathing steps down with .hv-section (120 → 84). */
  .restore-why .lcard-grid { margin-top: 56px; }
  /* Drop the flanking geometry: the regenerating brain on top, the stages unroll
     into one stacked list with a terracotta spine (mirrors PEAK/PROTECT collapse). */
  .restore-regen-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 48px;
  }
  .restore-regen { order: -1; width: min(340px, 78vw); }
  /* Жодної вертикальної лінії збоку — як на PEAK, орієнтиром лишається
     коротка теракотова риска над заголовком кожного етапу. */
  .restore-stages {
    text-align: left;
    gap: 24px;
  }
  .restore-stages--left  { text-align: left; }
  .restore-stages--right { text-align: left; }
  .restore-stage::before,
  .restore-stages--left  .restore-stage::before,
  .restore-stages--right .restore-stage::before { margin: 0 0 12px; }
}
@media (max-width: 560px) {
  .restore-proc__grid { grid-template-columns: 1fr; }
  .restore-why .lcard-grid { margin-top: 44px; }
}

/* ============================================================
   Експрес-тест на цій сторінці. Кнопки поводяться як у формах: фірмове
   золото у спокої → колір треку на ховері. Цей файл підключається
   останнім, тому перекриває золото з site.css.
   ============================================================ */
.bt-invite .hv-btn--primary:hover,
.bt-sheet .hv-btn--primary:hover {
  background: var(--restore-clay);
  border-color: var(--restore-clay);
  color: var(--cream-50);
}
.bt-prog span { background: var(--restore-clay); }
.bt-opt:hover { border-color: var(--restore-clay); }
.bt-gate__input:focus { border-color: var(--restore-clay); }
.bt-close:hover { color: var(--restore-clay); border-color: var(--restore-clay); }
/* точка на континуумі стоїть там, де стоїть сама програма */
.bt-mini__dot { border-color: var(--restore-clay); left: 86%; }