/* ============================================================
   article-heart.css — accent-слой кардио-страниц editorial-серии
   (article4 «ИИ-возраст сердца по ЭКГ», article5 «ЭхоКГ-биовозраст»)
   Каркас берётся из calc-phenoage.css (pa-*) и article-iron.css (ar-*).
   Здесь — только кардио-специфичные компоненты на токенах --v2-*.
   Палитра: teal (бренд) + семантика #dc2626 (риск) / #059669 (защита).
   ============================================================ */

/* hero-tint: лёгкий кардио-градиент под обложкой, в духе bv-hero */
.hc-hero .pa-hero__eyebrow { color: var(--v2-link); }

/* ── Панели риска: сердце «старше»/«моложе» паспорта ─────────── */
.hc-risk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 14px;
}
@media (max-width: 560px) { .hc-risk { grid-template-columns: 1fr; } }
.hc-risk__panel {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 24px 22px;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.hc-risk__panel--old   { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.25); }
.hc-risk__panel--young { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.25); }
.hc-risk__label {
  font-family: var(--v2-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.hc-risk__panel--old   .hc-risk__label { color: #dc2626; }
.hc-risk__panel--young .hc-risk__label { color: #059669; }
.hc-risk__delta {
  font-family: var(--v2-font-display);
  font-size: clamp(30px, 5vw, 40px); font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  margin-bottom: 12px;
}
.hc-risk__panel--old   .hc-risk__delta { color: #dc2626; }
.hc-risk__panel--young .hc-risk__delta { color: #059669; }
.hc-risk__stat { margin-bottom: 8px; }
.hc-risk__val {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 30px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em;
}
.hc-risk__panel--old   .hc-risk__val { color: #dc2626; }
.hc-risk__panel--young .hc-risk__val { color: #059669; }
.hc-risk__cap { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.4; }

/* ── Пайплайн «ЭКГ → ИИ → биовозраст» ───────────────────────── */
.hc-pipeline {
  display: flex; align-items: flex-start; justify-content: center;
  flex-wrap: wrap; gap: 4px;
  background: var(--v2-bg-alt);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 26px 18px;
  margin: 8px 0 14px;
}
.hc-pipe-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  width: 120px;
}
.hc-pipe-step__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(22,200,200,.12);
  color: var(--v2-link);
}
.hc-pipe-step__icon .material-symbols-outlined { font-size: 26px !important; }
.hc-pipe-step--final .hc-pipe-step__icon { background: var(--v2-midnight); color: #fff; }
.hc-pipe-step__label {
  font-size: 12px; font-weight: 600; color: var(--v2-ink-2);
  line-height: 1.35;
}
.hc-pipe-arrow {
  align-self: flex-start; margin-top: 14px;
  color: var(--v2-ink-3);
}
.hc-pipe-arrow .material-symbols-outlined { font-size: 22px !important; }
@media (max-width: 760px) {
  .hc-pipeline { flex-direction: column; align-items: center; }
  .hc-pipe-step { width: auto; flex-direction: row; gap: 14px; text-align: left; min-width: 220px; }
  .hc-pipe-step__label { flex: 1; }
  .hc-pipe-arrow { margin: 2px 0; transform: rotate(90deg); align-self: center; }
}

/* ── Тёмная рамка под ЭКГ-/диаграмм-SVG ─────────────────────── */
.hc-figure {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  overflow: hidden;
  margin: 8px 0 14px;
}
.hc-figure__screen { background: #060e1c; padding: 22px 18px 6px; }
.hc-figure__screen svg { display: block; width: 100%; height: auto; }
.hc-figure figcaption {
  font-size: 12px; color: var(--v2-ink-3);
  text-align: center; line-height: 1.45;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--v2-border);
}

/* ── Бейдж точности (умные часы / модель) ───────────────────── */
.hc-badge {
  display: flex; align-items: center; gap: 16px;
  background: rgba(22,200,200,.08);
  border: 1px solid rgba(22,200,200,.25);
  border-radius: var(--v2-radius);
  padding: 18px 22px;
  margin: 8px 0 14px;
}
.hc-badge__num {
  font-family: var(--v2-font-display);
  font-size: clamp(28px, 5vw, 36px); font-weight: 700;
  color: var(--v2-link); line-height: 1; letter-spacing: -.02em;
  flex-shrink: 0;
}
.hc-badge__text { font-size: 13px; color: var(--v2-ink-2); line-height: 1.5; }
.hc-badge__text em { color: var(--v2-link); font-style: normal; font-weight: 600; }

/* ── Ярусы фракции выброса (EF) ─────────────────────────────── */
.hc-ef {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 14px;
}
@media (max-width: 560px) { .hc-ef { grid-template-columns: 1fr; } }
.hc-ef__tier {
  border: 1px solid var(--v2-border);
  border-top: 3px solid var(--hc-tone, var(--v2-link));
  border-radius: var(--v2-radius);
  background: var(--v2-surface);
  padding: 18px 18px 20px;
  text-align: center;
}
.hc-ef__tier--good { --hc-tone: #059669; }
.hc-ef__tier--mid  { --hc-tone: #d97706; }
.hc-ef__tier--low  { --hc-tone: #dc2626; }
.hc-ef__val {
  font-family: var(--v2-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--hc-tone); margin-bottom: 6px;
}
.hc-ef__desc { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5; }

/* ── Цитата эксперта (pull-quote с атрибуцией) ──────────────── */
.hc-quote {
  position: relative;
  margin: 16px 0;
  padding: 22px 26px 22px 30px;
  border-left: 3px solid var(--v2-link);
  background: var(--v2-bg-alt);
  border-radius: 0 var(--v2-radius) var(--v2-radius) 0;
}
.hc-quote p {
  margin: 0 0 12px;
  font-family: var(--v2-font-display);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.5; font-weight: 500;
  color: var(--v2-ink); letter-spacing: -.01em;
}
.hc-quote footer { font-size: 13px; color: var(--v2-ink-3); font-style: normal; }

/* ── Источники ──────────────────────────────────────────────── */
.hc-sources { list-style: none; padding: 0; margin: 8px 0 0; }
.hc-source {
  display: flex; gap: 12px;
  font-size: 13px; color: var(--v2-ink-2); line-height: 1.55;
  padding: 12px 0;
  border-top: 1px solid var(--v2-border);
}
.hc-source:last-child { border-bottom: 1px solid var(--v2-border); }
.hc-source strong { color: var(--v2-ink); }
.hc-source a { color: var(--v2-link); word-break: break-word; }

/* ── Подзаголовок внутри секции ─────────────────────────────── */
.hc-h3 {
  font-family: var(--v2-font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--v2-ink); margin: 26px 0 12px;
}

/* ── Сравнение «паспорт ≠ биовозраст» ───────────────────────── */
.hc-vs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
  margin: 8px 0 14px;
}
@media (max-width: 480px) { .hc-vs { grid-template-columns: 1fr; } }
.hc-vs__box {
  border-radius: var(--v2-radius); padding: 22px 18px; text-align: center;
}
.hc-vs__box--chrono { background: var(--v2-bg-alt); border: 1px solid var(--v2-border); }
.hc-vs__box--bio    { background: rgba(22,200,200,.08); border: 1px solid rgba(22,200,200,.28); }
.hc-vs__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--v2-ink-3);
}
.hc-vs__box--bio .hc-vs__label { color: var(--v2-link); }
.hc-vs__age {
  font-family: var(--v2-font-display);
  font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--v2-ink);
}
.hc-vs__box--bio .hc-vs__age { color: var(--v2-link); }
.hc-vs__sub { font-size: 12px; color: var(--v2-ink-3); margin-top: 8px; line-height: 1.4; }
.hc-vs__op {
  align-self: center; font-family: var(--v2-font-display);
  font-size: 22px; font-weight: 700; color: var(--v2-ink-3);
}
@media (max-width: 480px) { .hc-vs__op { display: none; } }

/* ── Два сценария старения (структурное / функциональное) ───── */
.hc-scenario {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 14px;
}
@media (max-width: 600px) { .hc-scenario { grid-template-columns: 1fr; } }
.hc-scenario__card {
  border: 1px solid var(--v2-border);
  border-top: 3px solid var(--v2-link);
  border-radius: var(--v2-radius);
  background: var(--v2-surface); padding: 22px 22px 8px;
}
.hc-scenario__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(22,200,200,.12); color: var(--v2-link);
  margin-bottom: 12px;
}
.hc-scenario__icon .material-symbols-outlined { font-size: 24px !important; }
.hc-scenario__title {
  font-family: var(--v2-font-display); font-size: 16px; font-weight: 700;
  color: var(--v2-ink); margin-bottom: 10px;
}
.hc-scenario__list { list-style: none; padding: 0; margin: 0; }
.hc-scenario__list li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--v2-ink-2);
}
.hc-scenario__list li::before {
  content: "arrow_right_alt"; font-family: 'Material Symbols Outlined';
  position: absolute; left: -2px; top: 0; font-size: 17px; color: var(--v2-link);
}

/* ── Сетка параметров ЭхоКГ ─────────────────────────────────── */
.hc-params {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--v2-border);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
  overflow: hidden; margin: 8px 0 14px;
}
@media (min-width: 600px) { .hc-params { grid-template-columns: repeat(4, 1fr); } }
.hc-param {
  background: var(--v2-surface); padding: 16px 13px; text-align: center;
}
.hc-param__code {
  display: inline-block; margin-bottom: 8px;
  font-family: 'Cabinet Grotesk Variable', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--v2-link); background: rgba(22,200,200,.12);
  padding: 2px 8px; border-radius: 5px;
}
.hc-param__name { font-size: 12.5px; font-weight: 600; color: var(--v2-ink); line-height: 1.3; margin-bottom: 4px; }
.hc-param__desc { font-size: 11.5px; color: var(--v2-ink-3); line-height: 1.4; }
.hc-param--derived { background: rgba(217,119,6,.05); }
.hc-param--derived .hc-param__code { color: #d97706; background: rgba(217,119,6,.12); }

/* ── Корреляционный бар-чарт ────────────────────────────────── */
.hc-corr {
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius); padding: 20px 22px; margin: 8px 0 14px;
}
.hc-corr__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hc-corr__row:last-child { margin-bottom: 0; }
.hc-corr__label {
  font-family: 'Cabinet Grotesk Variable', monospace;
  font-size: 12px; font-weight: 700; color: var(--v2-ink);
  width: 62px; flex-shrink: 0; text-align: right;
}
.hc-corr__track { flex: 1; height: 22px; background: var(--v2-bg-alt); border-radius: 6px; overflow: hidden; }
.hc-corr__fill {
  height: 100%; border-radius: 6px; display: flex; align-items: center;
  padding-left: 9px; font-size: 11px; font-weight: 700; color: #fff;
}
.hc-corr__fill--down { background: var(--v2-link); }
.hc-corr__fill--up   { background: #5b6470; }
.hc-corr__val { font-size: 12px; font-weight: 700; color: var(--v2-ink-3); width: 42px; flex-shrink: 0; }

/* ── Панели точности ♂ / ♀ ──────────────────────────────────── */
.hc-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 14px; }
@media (max-width: 520px) { .hc-acc { grid-template-columns: 1fr; } }
.hc-acc__panel {
  border: 1px solid var(--v2-border); border-top: 3px solid var(--hc-tone, var(--v2-link));
  border-radius: var(--v2-radius); background: var(--v2-surface);
  padding: 22px 20px; text-align: center;
}
.hc-acc__panel--men   { --hc-tone: #2563eb; }
.hc-acc__panel--women { --hc-tone: #7c3aed; }
.hc-acc__label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hc-tone); margin-bottom: 14px;
}
.hc-acc__stat { margin-bottom: 8px; }
.hc-acc__val {
  display: block; font-family: var(--v2-font-display);
  font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--hc-tone);
}
.hc-acc__cap { font-size: 12px; color: var(--v2-ink-3); line-height: 1.4; }
.hc-acc__div { height: 1px; background: var(--v2-border); margin: 12px 0; }

/* ── Заключение ─────────────────────────────────────────────── */
.hc-conclusion {
  background: var(--v2-midnight);
  border-radius: var(--v2-radius-lg);
  padding: 36px 34px;
  margin: 18px 0 8px;
  color: #fff;
}
.hc-conclusion h2 {
  font-family: var(--v2-font-display);
  font-size: clamp(22px, 3.2vw, 28px); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 12px; color: #fff;
}
.hc-conclusion p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0; }