/* ui_kits/website/peak.css
   PEAK programme landing — extends colors_and_type.css + site.css + home.css.
   Adds the year-round "cycle" diagram (План проходження) and the green-framed
   procedure cards. PEAK's accent is the same green the hero brain uses (#3b9500),
   so the page reads as one continuous colour story with the locked hero. */

:root {
  --peak-green:      #3b9500;          /* matches the PEAK brain + hero label */
  --peak-green-soft: rgba(59, 149, 0, 0.14);
  --peak-green-tint: rgba(59, 149, 0, 0.06);
}

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

/* ============================================================
   SECTION — Що дає PEAK (.lcard value cards)
   The link-card component itself lives in home.css; here we only retune it
   to the PEAK colour story — the left stripe and the clickable card's arrow
   and hover border take the page's green (#3b9500) instead of the default
   gold, so the cards belong to PEAK rather than to the HOME palette.
   ============================================================ */
.peak-value .lcard          { --lcard-stripe: var(--peak-green); }
.peak-value .lcard__arrow   { color: var(--peak-green); }
.peak-value a.lcard:hover   { border-color: rgba(59, 149, 0, 0.35); }

/* Три інформаційні картки стоять у ряд; «Індивідуальна програма» —
   витягнута кнопка-прямокутник на всю ширину під ними. */
.peak-value .lcard-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .peak-value .lcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .peak-value .lcard-grid { grid-template-columns: 1fr; } }

.peak-value .lcard--cta {
  grid-column: 1 / -1;                 /* на всю ширину сітки, окремим рядком */
  display: flex;
  align-items: center;
  gap: 6px 28px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
  padding-right: 60px;                 /* місце під стрілку праворуч */
}
.peak-value .lcard--cta .lcard__title { margin: 0; flex: 0 0 auto; }
.peak-value .lcard--cta .lcard__desc  { margin: 0; flex: 1 1 340px; }
/* Стрілка по центру висоти кнопки, а не у верхньому куті. */
.peak-value .lcard--cta .lcard__arrow { top: 50%; transform: translateY(-50%); }
.peak-value a.lcard--cta:hover .lcard__arrow { transform: translate(2px, -50%); }

/* ============================================================
   SECTION — План проходження (round / year-round cycle)
   ============================================================ */
.peak-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 cycle: a square stage with a dashed ring, a centred subscription label and
   six stage-nodes pinned around the circle (positions set inline per node). */
.peak-cycle {
  position: relative;
  width: min(720px, 100%);
  margin: 88px auto 0;
  aspect-ratio: 1 / 1;
}
/* The ring is SIX separate SVG arcs at r34, one per stage. Each arc is centred
   on its numbered bead and spans 60°, so the six lines tile end-to-end into one
   full circle. They DRAW THEMSELVES when the section scrolls into view, in
   clockwise sequence (segment --i staggers the reveal): stroke-dashoffset eases
   from full to 0 and the segments meet to close the loop. pathLength=100 keeps
   the maths simple. */
.peak-cycle__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.peak-cycle__seg {
  fill: none;
  stroke: var(--peak-green);
  /* Width is in viewBox units (NOT non-scaling-stroke): the cycle always
     renders at 720px, so 1 unit ≈ 7.2px and 0.3 ≈ 2px. non-scaling-stroke is
     deliberately avoided — it makes stroke-dasharray count in SCREEN pixels,
     which fractures each arc into many dashes instead of one solid line. */
  stroke-width: 0.3;
  stroke-linecap: round;
  opacity: 0.7;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease-quiet);
  transition-delay: calc(var(--i, 0) * 0.32s);
}
.peak-cycle.is-drawn .peak-cycle__seg { stroke-dashoffset: 0; }

/* Centre + nodes fade in as the ring draws — opacity only, so the same reveal
   works in both the circular (desktop) and stacked (mobile) layouts without
   touching the positioning transform. Nodes stagger via their inline --i. */
.peak-cycle__center,
.peak-node { opacity: 0; transition: opacity 0.6s var(--ease-quiet); }
.peak-cycle.is-drawn .peak-cycle__center { opacity: 1; transition-delay: 0.2s; }
.peak-cycle.is-drawn .peak-node {
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 0.16s + 0.4s);
}
@media (prefers-reduced-motion: reduce) {
  .peak-cycle__center, .peak-node { opacity: 1; }
  .peak-cycle__seg { transition: none; stroke-dashoffset: 0; }
}
.peak-cycle__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--peak-green-tint);
  box-shadow: inset 0 0 0 1.5px var(--peak-green-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.peak-cycle__center-k {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peak-green);
}
.peak-cycle__center-s {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* A stage node — the NUMBER BADGE is a solid green bead sitting exactly ON the
   ring (its centre is the circle point), so the green ring runs straight through
   it and reads as one continuous, closed circle. The text body is pushed radially
   OUTSIDE the ring — up for the top node, down for the bottom node, and out to the
   left/right for the four side nodes — so it never crosses or sits on the line. */
.peak-node {
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.peak-node__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--peak-green);
  box-shadow: 0 2px 12px rgba(59, 149, 0, 0.3);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  /* Cormorant's default oldstyle figures (3/4/5 descend, 6/8 ascend) sit
     unevenly inside the round bead; lining + tabular figures give every digit
     the same cap-height box so it lands dead-centre. line-height:1 removes the
     leading that would otherwise push the glyph off the optical centre. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1;
  color: var(--cream-50);
}
.peak-node__body {
  position: absolute;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Top & bottom nodes: text stacked above/below, centred on the badge. */
.peak-node--up .peak-node__body,
.peak-node--down .peak-node__body {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.peak-node--up   .peak-node__body { bottom: calc(100% + 16px); } /* text above the badge */
.peak-node--down .peak-node__body { top: calc(100% + 16px); }    /* text below the badge */
/* Side nodes: text pushed straight out sideways so it never crosses the ring. */
.peak-node--right .peak-node__body,
.peak-node--left  .peak-node__body {
  top: 50%;
  transform: translateY(-50%);
}
.peak-node--right .peak-node__body { left:  calc(100% + 16px); text-align: left; }
.peak-node--left  .peak-node__body { right: calc(100% + 16px); text-align: right; }
.peak-node__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0;
}
.peak-node__desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
}

/* ============================================================
   SECTION — Якими процедурами працюємо (green-framed cards)
   ============================================================ */
.peak-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;
}
.peak-proc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.peak-proc__card { display: flex; flex-direction: column; }
.peak-proc__card .ph { aspect-ratio: 4 / 3; }
/* green frame — same overlay-line technique as .ph--framed, PEAK colour. */
.ph--peak.ph--framed::after { border-color: var(--peak-green); }
.peak-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;
}
.peak-proc__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

/* ============================================================
   Responsive — the cycle unrolls into a vertical numbered list
   ============================================================ */
@media (max-width: 960px) {
  /* Match the shared layout's single tablet breakpoint (960px) so the cycle,
     proc grid, headings and form all collapse together — no in-between state. */
  .peak-proc__grid { grid-template-columns: repeat(2, 1fr); }
  /* Breathing steps down with .hv-section (120 → 84). */
  /* Drop the circular geometry: stack the nodes as a numbered timeline, so the
     side labels never run out of room before the circular layout gives way. */
  .peak-cycle {
    width: 100%;
    aspect-ratio: auto;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-left: 8px;
    border-left: 1.5px dashed var(--peak-green);
  }
  .peak-cycle__ring { display: none; }
  .peak-cycle__center {
    position: static;
    transform: none;
    width: auto;
    aspect-ratio: auto;
    border-radius: var(--r-card);
    padding: 20px 24px;
    align-items: flex-start;
    text-align: left;
    margin-left: -9.5px;
  }
  .peak-node {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    /* Pull the row left so the numbered bead's CENTRE sits ON the dashed spine —
       the green line then runs through the middle of each green circle (bead 44px,
       cycle padding-left:8px + 1.5px border). */
    margin-left: -31px;
  }
  .peak-node__num { flex: 0 0 auto; }
  /* unroll the radially-positioned body back into the row */
  .peak-node__body,
  .peak-node--up .peak-node__body,
  .peak-node--down .peak-node__body,
  .peak-node--right .peak-node__body,
  .peak-node--left .peak-node__body {
    position: static;
    transform: none;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    text-align: left;
  }
}

/* ============================================================
   SECTION — Форма запису (PEAK accent on hover)
   On PEAK both form buttons (primary "Записатися" and the secondary
   "Анонімно") turn the page's green with white text on hover, replacing the
   default gold hover. peak.css only loads on this page, so other pages keep
   the gold behaviour.
   ============================================================ */
.hv-booking__ctas .hv-btn--primary:hover,
.hv-booking__ctas .hv-btn--anon:hover {
  background: var(--peak-green);
  border-color: var(--peak-green);
  color: var(--cream-50);
}
/* anonymous-contact modal — green accent on the PEAK track */
.hv-anon__tag { color: var(--peak-green); }
.hv-anon__close:hover { color: var(--peak-green); border-color: var(--peak-green); }
.hv-anon__opt:hover {
  border-color: rgba(59, 149, 0, 0.4);
  background: var(--peak-green-tint);
  transform: translateX(3px);
}
.hv-anon__opt:hover .hv-anon__ic { color: var(--peak-green); }
@media (max-width: 560px) {
  .peak-proc__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   «Як це працює» — гора з повністю вписаним усередину мозком,
   обрамлена шістьма пунктами (3 ліворуч / 3 праворуч).
   Побудовано за пропорціями щита PROTECT: та сама сітка
   1fr·auto·1fr, той самий viewBox 100×120 і та сама іконка мозку.
   ============================================================ */
.peak-mount-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 80px;
}
.peak-mount {
  position: relative;
  width: min(380px, 80vw);
  aspect-ratio: 100 / 120;
  margin: 0 auto;
}
.peak-mount__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* схили — малюються від вершини вниз, коли блок з'являється в екрані */
.peak-mount__slope {
  fill: none;
  stroke: var(--peak-green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease-quiet);
}
.peak-mount-wrap.is-drawn .peak-mount__slope { stroke-dashoffset: 0; }

/* мозок усередині гори — та сама іконка, що в PROTECT / RESTORE;
   stroke-width у власному 24-юнітному просторі, збільшеному ×1.9 */
.peak-mount__brain {
  fill: none;
  stroke: var(--peak-green);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease-quiet);
  transition-delay: 1s;
}
.peak-mount-wrap.is-drawn .peak-mount__brain { stroke-dashoffset: 0; }

.peak-mount__label {
  position: absolute;
  left: 50%; top: 81%;
  transform: translate(-50%, -50%);
  width: 74%; text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-quiet);
  transition-delay: 2.2s;
}
.peak-mount-wrap.is-drawn .peak-mount__label { opacity: 1; }
.peak-mount__label-k {
  display: block;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.22em; text-indent: 0.22em;
  color: var(--peak-green);
}
.peak-mount__label-s {
  display: block; margin-top: 7px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-500);
}

/* шість пунктів обабіч гори */
.peak-pillars { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 54px); }
.peak-pillars--left  { text-align: right; }
.peak-pillars--right { text-align: left; }
.peak-pillar {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-quiet), transform 0.6s var(--ease-quiet);
  transition-delay: calc(1.5s + var(--i) * 0.12s);
}
.peak-mount-wrap.is-drawn .peak-pillar { opacity: 1; transform: none; }
.peak-pillar__title {
  position: relative; padding-top: 17px; margin: 0 0 8px;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.25;
  color: var(--ink-900);
}
.peak-pillar__title::before {
  content: ""; position: absolute; top: 0;
  width: 26px; height: 2px; background: var(--peak-green);
}
.peak-pillars--left  .peak-pillar__title::before { right: 0; }
.peak-pillars--right .peak-pillar__title::before { left: 0; }
.peak-pillar__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5;
  color: var(--ink-500);
}
@media (max-width: 900px) {
  .peak-mount-wrap { grid-template-columns: 1fr; gap: 36px; margin-top: 52px; }
  .peak-mount { order: -1; }
  .peak-pillars--left, .peak-pillars--right { text-align: left; }
  .peak-pillars--left .peak-pillar__title::before { right: auto; left: 0; }
}

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

/* ============================================================
   Що дає PEAK — списки в картках, блок «Важливо знати» та FAQ.
   Маркер — квадратна зелена крапка, намальована ::before, а не
   list-style: так вона тримає колір треку і точний відступ.
   ============================================================ */
.peak-why__hand { margin-top: 18px; color: var(--ink-900); }

.lcard__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.lcard__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-500);
  text-wrap: pretty;
}
.lcard__list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--peak-green);
}

/* «Важливо знати» — самостійна секція. Заголовок бере загальні .hv-eyebrow і
   .hv-h2, тобто ту саму типографіку, що й «Що дає PEAK» чи «Методи»: блок має
   читатись як рівний іншим, а не як примітка під картками. Три тези стоять
   колонками під зеленою рискою — той самий прийом, що й у пунктів біля гори. */
.peak-note__list {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
}
.peak-note__list li {
  position: relative;
  padding-top: 20px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-700);
  text-wrap: pretty;
}
.peak-note__list li::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 26px; height: 2px;
  background: var(--peak-green);
}

@media (max-width: 900px) {
  .peak-note__list { grid-template-columns: 1fr; gap: 26px; }
}