/* ============================================================
   SC/Direction · Вкладки напрямку: Опис · Консультанти · Відгуки
   figma: 316:17 (Sub-nav), 317:3 (Опис), 858:85 (Консультанти), 877:297 (Відгуки)
   Поведение — assets/js/direction-tabs.js; превью плиток — editorial-preview.js
   ============================================================ */

.sc-dtabs {
  /* --- Геометрия из макета, которой нет в токенах --- */
  --dtabs-indicator-h: 3px;              /* бегунок вкладки — в макете 3 px */
  --dtabs-indicator-dur: 420ms;
  --dtabs-quote-w: 416px;                /* колонка цитаты в «Опис» */
  --dtabs-tile-min-h: 94px;              /* плитка услуги: две строки + стрелка */
  --dtabs-preview-size: 220px;           /* как превью «Читайте також» в статьях */
  --dtabs-preview-dur: 320ms;
  --preview-offset: var(--sc-space-6); /* квадрат правее курсора на 24 (читает editorial-preview.js) */
  --dtabs-play: 56px;                    /* кнопка play в макете */
  --dtabs-review-meta-w: 220px;          /* колонка автора в списке отзывов */
  --dtabs-review-source-w: 140px;
  --dtabs-fact-label-w: 110px;

  box-sizing: border-box;
  background: var(--background);
  color: var(--foreground);
}

.sc-dtabs *,
.sc-dtabs *::before,
.sc-dtabs *::after { box-sizing: border-box; }

/* ---------- Sub-nav: вкладки и бегунок по линии ---------- */

/* Полоса вкладок (правка 2026-10-27): лінія під вкладками — по полю верстки, а не від краю до краю
   (поле — margin, а не padding), і полоса відсунута від крихт на повний крок секції, 160:
   дві повноширинні лінії поспіль сперечалися. Було: border на всю ширину впритул до крихт. */
.sc-dtabs__bar {
  display: flex;
  align-items: flex-end; /* вкладки у нижней кромки: бегунок лежит на линии */
  min-block-size: var(--sc-crumbs-h); /* 70 — та же высота, что у полосы крихт над ней (2026-10-11) */
  margin: var(--section-padding-y) var(--sc-pad-x) 0;
  border-block-end: var(--sc-line) solid var(--border);
}

.sc-dtabs__list {
  position: relative;
  display: flex;
  gap: var(--sc-space-8); /* 32 */
}

.sc-dtabs__tab {
  padding: var(--sc-space-4) 0; /* 16: строка 48 */
  border: 0;
  background: none;
  color: var(--sc-neutral-600); /* мелкий текст на светлом — контраст ≥ 4.5 */
  cursor: pointer;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}

.sc-dtabs__tab[aria-selected="true"] { color: var(--foreground); }

/* Бегунок: позицию и ширину ставит скрипт (--tab-x, --tab-w); без скрипта —
   под первой вкладкой по её ширине */
.sc-dtabs__indicator {
  position: absolute;
  inset-block-end: calc(-1 * var(--sc-line));
  inset-inline-start: 0;
  inline-size: var(--tab-w, 0);
  block-size: var(--dtabs-indicator-h);
  background: var(--foreground);
  transform: translateX(var(--tab-x, 0));
}

/* Едет только после первой установки (sc-is-ready ставит скрипт) — иначе
   при открытии ссылки на вкладку бегунок выезжал бы из нуля */
.sc-dtabs__list.sc-is-ready .sc-dtabs__indicator {
  transition:
    transform var(--dtabs-indicator-dur) var(--sc-ease-out-expo),
    inline-size var(--dtabs-indicator-dur) var(--sc-ease-out-expo);
}

/* ---------- Панели ---------- */

.sc-dtabs__panel {
  display: flex;
  flex-direction: column;
  gap: var(--section-padding-y); /* 160 между частями «Опис» */
  /* Сверху — укороченный шаг (64): вкладки и так отбиты от крихт на 160 (__bar).
     Снизу — полный шаг. */
  padding: var(--section-padding-y-tight) var(--sc-pad-x) var(--section-padding-y);
}

/* «Консультанти» и «Відгуки» — плотнее, 56 как в кадрах 858:2 и 877:2 */
.sc-dtabs__panel--tight { gap: var(--section-gap); }

.sc-dtabs__panel[hidden] { display: none; }

.sc-dtabs__group { margin: 0; }

/* ---------- Види послуги ---------- */

.sc-dservices {
  display: flex;
  flex-direction: column;
  gap: var(--sc-head-gap); /* заголовок → содержимое, всегда одинаково (2026-10-05); было --stack-gap-lg */
}

.sc-dservices__title { margin: 0; }

.sc-dservices__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-space-2); /* 8 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-dservices__list > li { display: flex; }

.sc-dservices__tile {
  flex: 1 1 auto;
  min-block-size: var(--dtabs-tile-min-h);
  /* было: flex-колонка «подпись / стрелка». Сетка — чтобы справа над стрелкой
     встала метка «Virtus» (2026-10-05) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  column-gap: var(--grid-gap);
  row-gap: var(--sc-space-2);
  padding: var(--grid-gap);
  border: var(--sc-line) solid var(--border);
  color: var(--foreground);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
  text-decoration: none;
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-dservices__label {
  grid-column: 1 / -1; /* на всю ширину: 75% одинаковы у плиток с меткой и без */
  grid-row: 1 / -1;
  max-inline-size: 75%; /* строка не длиннее 3/4 плитки — текст держится левого края, не тянется к метке (2026-10-05) */
}

/* Метка «Virtus»: плитка ведёт на страницу virtus.ua, а не на услугу SmartCell */
.sc-dservices__source {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--sc-neutral-600); /* вторичный текст; --muted-foreground на светлом не держит контраст */
}

.sc-dservices__arrow {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
}

/* Плитка без своей страницы (<div>) — приглушена, как темы без материалов в журнале
   и пункты «Застосування» ниже; ссылки — тёмные, с меткой Virtus и стрелкой (2026-10-11) */
div.sc-dservices__tile {
  border-color: var(--border);
  color: var(--muted-foreground);
}

.sc-dservices__arrow svg {
  display: block;
  transform: rotate(45deg);
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

/* Парящее превью — тот же приём, что «Читайте також» (vm-editorial-list.css):
   позицию и наклон ведёт скрипт на внешнем элементе, появление — класс на внутреннем */
.sc-dservices__preview {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 50;
  pointer-events: none;
  will-change: transform;
}

.sc-dservices__preview-inner {
  display: block;
  inline-size: var(--dtabs-preview-size);
  transform-origin: left center; /* вырастает от курсора: квадрат справа от него */
  aspect-ratio: 1 / 1; /* «квадратиком» */
  overflow: hidden;
  background: var(--muted);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity var(--dtabs-preview-dur) var(--sc-ease),
    transform var(--dtabs-preview-dur) var(--sc-ease);
}

.sc-dservices__preview.sc-is-visible .sc-dservices__preview-inner {
  opacity: 1;
  transform: scale(1);
}

.sc-dservices__preview-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.sc-dservices__preview:not(.sc-is-ready) { display: none; }
/* Страховка: пока не наведено — не рисуется вовсе (hidden ставит разметка и скрипт);
   на virtus.ua без этого квадрат появлялся в углу страницы (правка 2026-10-12) */
.sc-dservices__preview[hidden] { display: none; }
.sc-dservices__preview:not(.sc-is-visible) { visibility: hidden; transition: visibility 0s linear var(--dtabs-preview-dur); }

/* Хаб розділу (cell-technologies.html, 2026-10-12): напрямки у чотири колонки */
.sc-dservices__list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Хаб: «проводять» рядками (sc-dbio зі сторінки лікаря) і проза ---------- */

.sc-dhub-caps,
/* Заголовок ліворуч, текст праворуч — та сама сітка, що в «цитата + опис» (.sc-dabout):
   колонка заголовків і колонка тексту стоять в одну лінію по всій вкладці (правка 2026-10-27;
   було: заголовок над текстом на всю ширину, текст лише в лівій половині — справа порожньо) */
.sc-dprose {
  display: grid;
  grid-template-columns: var(--dtabs-quote-w) minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
}

/* заголовок у колонці 416 — кегль h3, як текст цитати поруч; h2 у розмітці лишається для структури */
.sc-dprose__title {
  font: var(--h3-weight) var(--h3-size) / var(--h3-lh) var(--font-headings);
  letter-spacing: var(--h3-ls);
}

.sc-dhub-caps__title,
.sc-dprose__title { margin: 0; }

/* Проза з wysiwyg: абзаци і списки без класів, міра рядка */
.sc-dprose__body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-md);
  max-inline-size: var(--sc-measure);
}

.sc-dprose__body > p,
.sc-dprose__body > ul,
.sc-dprose__body > ol { margin: 0; }

.sc-dprose__body > ul,
.sc-dprose__body > ol {
  padding-inline-start: var(--sc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1);
}

/* Буллет списку у прозі розділу (2026-10-29): замість крапки — маленький квадрат фірмовим
   синім (blue/700, як «C» у логотипі), на рівні середини першого рядка. Квадрат — форма кита. Відступ тексту — як у
   списків статті журналу (маркер + card-gap). Нумеровані списки — без змін. */
:is(.sc-dprose__body, .sc-dabout__body) > :where(ul:not([class])) {
  padding-inline-start: 0;
  list-style: none;
}
:is(.sc-dprose__body, .sc-dabout__body) > :where(ul:not([class])) > li {
  --sc-bullet-w: var(--sc-space-2);
  --sc-bullet-h: var(--sc-space-2);
  position: relative;
  padding-inline-start: calc(var(--sc-bullet-w) + var(--card-gap));
}
:is(.sc-dprose__body, .sc-dabout__body) > :where(ul:not([class])) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((var(--p-lh) - var(--sc-bullet-h)) / 2);
  inline-size: var(--sc-bullet-w);
  block-size: var(--sc-bullet-h);
  background: var(--sc-blue-700);
}

/* Контент з virtus зберігається одним полем — текст, списки, відео впереміш (2026-10-29).
   Не ділимо його на наші поля: wysiwyg виводиться як є, кожен тег стилізується тут.
   Те саме правило, що в тілі статті журналу (HANDOFF «Тело статьи»).
   Контейнери: .sc-dprose__body (послуга, хаб) і .sc-dabout__body (напрямок, банк). */
:is(.sc-dprose__body, .sc-dabout__body) > h2,
:is(.sc-dprose__body, .sc-dabout__body) > h3,
:is(.sc-dprose__body, .sc-dabout__body) > h4 {
  margin: 0;
  margin-block-start: var(--sc-space-2); /* підзаголовок відбитий від попереднього абзацу трохи більше */
  color: var(--foreground);
}
:is(.sc-dprose__body, .sc-dabout__body) > h2 { font: var(--h3-weight) var(--h3-size) / var(--h3-lh) var(--font-headings); letter-spacing: var(--h3-ls); }
:is(.sc-dprose__body, .sc-dabout__body) > h3,
:is(.sc-dprose__body, .sc-dabout__body) > h4 { font: var(--sc-weight-medium) var(--p-size) / var(--p-lh) var(--font-sans); }
:is(.sc-dprose__body, .sc-dabout__body) > :is(h2, h3, h4):first-child { margin-block-start: 0; }

:is(.sc-dprose__body, .sc-dabout__body) strong { color: var(--foreground); font-weight: var(--sc-weight-medium); }
:is(.sc-dprose__body, .sc-dabout__body) a { color: var(--foreground); text-underline-position: from-font; }

:is(.sc-dprose__body, .sc-dabout__body) > blockquote {
  margin: 0;
  padding-inline-start: var(--sc-space-5);
  border-inline-start: var(--sc-line) solid var(--border);
  color: var(--foreground);
}
:is(.sc-dprose__body, .sc-dabout__body) > blockquote > p { margin: 0; }

/* Відео в тексті: YouTube-iframe або oEmbed-обгортка WordPress — на всю міру рядка, 16:9.
   Якщо кодер обгорне у .sc-dvideo (постер + Play) — ще краще, але не обов'язково. */
:is(.sc-dprose__body, .sc-dabout__body) > iframe,
:is(.sc-dprose__body, .sc-dabout__body) > .wp-block-embed,
:is(.sc-dprose__body, .sc-dabout__body) > .wp-video,
:is(.sc-dprose__body, .sc-dabout__body) > figure {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
}
:is(.sc-dprose__body, .sc-dabout__body) iframe {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
  background: var(--muted);
}
:is(.sc-dprose__body, .sc-dabout__body) > figure > img,
:is(.sc-dprose__body, .sc-dabout__body) > p > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
:is(.sc-dprose__body, .sc-dabout__body) figcaption { color: var(--sc-neutral-600); font: 400 var(--p-mini-size) / var(--caption-lh) var(--font-sans); }

/* ---------- «Опис» одним полем з розділами всередині (2026-11-08) ----------
   На virtus «Опис» — одне поле редактора зі своїми H2 («Регенеративна медицина
   омолодження», «Триетапний протокол»…), без окремого заголовка ліворуч — колонка 416
   стояла порожньою. Якщо .sc-dprose__title немає, поле саме стає двома колонками тієї ж
   сітки: кожен H2 — ліворуч, на одній лінії з першим абзацом свого розділу, решта — праворуч.
   Розкладає автопоміщення grid: H2 у колонці 1 завжди починає новий рядок. Шаблон не міняється. */
.sc-dprose:not(:has(> .sc-dprose__title)) { display: block; }

.sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body {
  display: grid;
  grid-template-columns: var(--dtabs-quote-w) minmax(0, 1fr);
  column-gap: var(--section-gap);
  row-gap: var(--stack-gap-md);
  align-items: start;
  max-inline-size: none;
}

.sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > * {
  grid-column: 2;
  max-inline-size: var(--sc-measure);
}

.sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > h2 {
  grid-column: 1;
  margin: 0;
  /* Заголовок у дві-три строки не задає висоту рядка: інакше другий абзац розділу
     чекав би, поки він закінчиться, і під першим абзацом з'являлась дірка. Від'ємне
     нижнє поле прибирає H2 з розрахунку рядка — він просто звисає в порожню колонку 416. */
  margin-block-end: -100vh;
}

/* Розділ відбитий від попереднього, як окремі групи вкладки; H2 і перший абзац — на одній лінії */
.sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > h2:not(:first-child),
.sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > h2:not(:first-child) + * {
  margin-block-start: var(--section-gap);
}

/* ---------- Сміття вставки з Google Docs ----------
   Текст на virtus вставлено з Docs: <b> замість <strong>, порожній <b></b>, <b> усередині H3,
   <span style="font-weight: 400"> на кожному шматку. Інлайн-стиль перебиває лише !important —
   інакше H2 з таким span стає тонким, а сусідній — ні, і ієрархія скаче. */
:is(.sc-dprose__body, .sc-dabout__body) b { color: var(--foreground); font-weight: var(--sc-weight-medium); }
:is(.sc-dprose__body, .sc-dabout__body) :is(h2, h3, h4) :is(b, strong) { font-weight: inherit; }
:is(.sc-dprose__body, .sc-dabout__body) b:empty { display: none; }
:is(.sc-dprose__body, .sc-dabout__body) [style*="font-weight"] { font-weight: inherit !important; }
:is(.sc-dprose__body, .sc-dabout__body) b [style*="font-weight"],
:is(.sc-dprose__body, .sc-dabout__body) strong [style*="font-weight"] { font-weight: var(--sc-weight-medium) !important; }

/* ---------- Цитата + описание ---------- */

.sc-dabout {
  display: grid;
  grid-template-columns: var(--dtabs-quote-w) minmax(0, 1fr);
  gap: var(--section-gap); /* 56 */
  align-items: start;
}

.sc-dabout--quote-only { grid-template-columns: var(--dtabs-quote-w); }
/* Опис без цитати (напрямок, 2026-10-29): одна колонка в мірі рядка */
.sc-dabout--body-only { grid-template-columns: minmax(0, 1fr); }
.sc-dabout--body-only .sc-dabout__body { max-inline-size: var(--sc-measure); }

.sc-dabout__quote {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap); /* 16 */
}

.sc-dabout__kicker,
.sc-dabout__text { margin: 0; }

.sc-dabout__kicker { color: var(--sc-neutral-600); }

/* Описание — поле wysiwyg: стили по тегу, классов у абзацев нет */
.sc-dabout__body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-md); /* 14 */
}

/* список в описании (банк: «спектр застосування»), как в sc-dprose (2026-10-12) */
.sc-dabout__body > :where(ul:not([class]), ol:not([class])) {
  margin: 0;
  padding-inline-start: var(--sc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1);
  max-inline-size: var(--sc-measure);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

.sc-dabout__body > :where(p:not([class])) {
  margin: 0;
  max-inline-size: var(--sc-measure);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

/* ---------- Опис одним полем без цитати: вступ ліворуч (2026-11-09) ----------
   Як «Опис» з розділами вище, лише для блоку «цитата + опис», коли цитати немає.
   На virtus (банк біологічного страхування) опис — одне поле редактора без H2,
   а перший абзац цілком жирний. Тоді він стає вступом у лівій колонці 416
   кеглем H3, решта праворуч у мірі рядка.
   H2 у полі, якщо є, стають ліворуч, як у .sc-dprose. Без H2 і без жирного
   вступу поле лишається однією колонкою, як було.
   Обмеження CSS: :only-child не бачить тексту поза <strong>, тому «жирний абзац»
   — це абзац, де <strong> єдиний елемент. Перевіряємо лише перші два вузли поля
   (перед вступом може стояти фото). */
/* Без цитати блок — одна колонка; дві колонки, якщо треба, будує вже саме поле.
   (:has усередині :has не працює, тому умова «є вступ» — лише на полі.) */
.sc-dabout:not(:has(> .sc-dabout__quote)) { grid-template-columns: minmax(0, 1fr); }

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) {
  display: grid;
  grid-template-columns: var(--dtabs-quote-w) minmax(0, 1fr);
  column-gap: var(--section-gap);
  row-gap: var(--stack-gap-md);
  align-items: start;
  max-inline-size: none;
}

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > * {
  grid-column: 2;
  max-inline-size: var(--sc-measure);
}

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > h2 {
  grid-column: 1;
  margin: 0;
  margin-block-end: -100vh; /* не задає висоту рядка, див. .sc-dprose вище */
}

/* Вступ: рядок 1 лівої колонки, на одній лінії з першим вузлом праворуч.
   Від'ємне поле знімає його з розрахунку висоти рядка. Без sticky: з від'ємним
   полем липкий вступ виїжджав за блок на «Спектр застосування» (2026-11-09). */
.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)):not(:has(> h2)) > p:nth-child(-n+2):has(> :is(strong, b):only-child) {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 -100vh;
  max-inline-size: none;
  font: var(--h3-weight) var(--h3-size) / var(--h3-lh) var(--font-headings);
  letter-spacing: var(--h3-ls);
  color: var(--foreground);
}

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)):not(:has(> h2)) > p:nth-child(-n+2) > :is(strong, b):only-child { font-weight: inherit; }

/* Фото з редактора — на всю колонку тексту, з повітрям знизу */
.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > p:has(> img:only-child) { margin-block-end: var(--stack-gap-md); }

/* Списки — рядками через тонку лінію, як перелік у довідці, а не маркери в абзаці */
.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > ul:not([class]) {
  padding: 0;
  gap: 0;
  list-style: none;
  border-block-end: var(--sc-line) solid var(--border);
}

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > ul:not([class]) > li {
  padding-block: var(--sc-space-3);
  border-block-start: var(--sc-line) solid var(--border);
}

.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > ul:not([class]) + p { margin-block-start: var(--stack-gap-md); }

/* Маркер — по середині першого рядка пункту, під полем над ним */
.sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > ul:not([class]) > li::before {
  inset-block-start: calc(var(--sc-space-3) + (1lh - var(--sc-bullet-h)) / 2);
}

/* ---------- Застосування: чипы, ссылочные со стрелкой ↗ ---------- */

.sc-dindications {
  display: flex;
  flex-direction: column;
  gap: var(--sc-head-gap); /* заголовок → содержимое, всегда одинаково (2026-10-05); было --stack-gap-lg */
}

.sc-dindications__title { margin: 0; }

.sc-dindications__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap); /* 10 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-dindications__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--stack-gap-sm);
  padding: var(--sc-space-3) var(--sc-space-3_5); /* 12 / 14 */
  border: var(--sc-line) solid var(--border);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

/* Пункт без ссылки — приглушён, как тема без материалов в журнале (vm-topics__tag:disabled);
   стрелка у ссылок снята 2026-10-11, активность читается по цвету */
/* Только на странице напрямку: на странице лікаря чипы послуг пока все без ссылок
   (адреса подставит кодер) — их не глушим */
.sc-dtabs span.sc-dindications__chip {
  border-color: var(--border);
  color: var(--muted-foreground);
}

/* Список без посилань узагалі (напрямок: «Застосування клітинної терапії», 2026-10-29) —
   приглушення не потрібне, усі пункти рівноправні, як на virtus */
.sc-dtabs .sc-dindications--plain span.sc-dindications__chip { color: var(--foreground); }

/* ---------- Видео: постер, play, модалка по клику ---------- */

.sc-dvideo {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.sc-dvideo__open {
  position: relative;
  display: block;
  aspect-ratio: 1280 / 726; /* кадр в макете */
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--muted);
  cursor: pointer;
}

.sc-dvideo__poster {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.sc-dvideo__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--dtabs-play);
  block-size: var(--dtabs-play);
  display: block;
  background: var(--background);
  color: var(--foreground);
  transform: translate(-50%, -50%);
  transition: transform var(--sc-dur) var(--sc-ease-out);
}

.sc-dvideo__play svg { display: block; inline-size: 100%; block-size: 100%; }

.sc-dvideo__caption { color: var(--sc-neutral-600); }

/* ---------- Консультанти: три карточки врачей ---------- */

.sc-ddoctors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* по горизонталі — вузька щілина плиток; між рядами — повний крок сітки (56): підпис попереднього ряду
     впирався у фото наступного (правка 2026-10-28; було gap: tile-gap в обидва боки) */
  gap: var(--section-gap) var(--sc-tile-gap);
  padding: 0;
  list-style: none;
}

.sc-ddoctors__card {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap); /* rhythm/16 в макете */
}

.sc-ddoctors__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  background: var(--muted);
}

.sc-ddoctors__body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  padding-inline-end: var(--sc-tile-text-inset); /* текст не ближе 95% ширины плитки */
}

.sc-ddoctors__rating {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  margin: 0;
}

.sc-ddoctors__stars,
.sc-dreviews__stars { flex: none; display: block; }

.sc-ddoctors__name {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

.sc-ddoctors__meta {
  margin: 0;
  color: var(--sc-neutral-600);
}

/* ---------- Smart Age Journal: дорожка анонсов — секция перед футером (2026-10-12) ---------- */

.sc-darticles-section {
  box-sizing: border-box;
  padding: var(--section-padding-y) var(--sc-pad-x);
  background: var(--background);
  color: var(--foreground);
}


.sc-darticles {
  display: flex;
  flex-direction: column;
  gap: var(--sc-head-gap);
}

.sc-darticles__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--section-gap);
}

.sc-darticles__title { margin: 0; }

.sc-darticles__all {
  flex: none;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Четыре карточки ленты встык — как «Свіже» в журнале */
.sc-darticles__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sc-tile-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Відгуки: полный список, строки через одну на тёплом ---------- */

.sc-dreviews {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  /* нижняя линия — у списка, а не у последней строки: «Показати ще» прячет хвост */
  border-block-end: var(--hairline) solid var(--border);
}

.sc-dreviews__row {
  display: grid;
  grid-template-columns: var(--dtabs-review-meta-w) minmax(0, 1fr) var(--dtabs-review-source-w);
  gap: var(--sc-space-8); /* 32 */
  padding: var(--card-padding) var(--sc-space-6); /* 28 / 24 */
  border-block-start: var(--hairline) solid var(--border); /* строки прочерчены линиями во всю ширину (2026-10-05) */
}

.sc-dreviews__row:nth-child(even) { background: var(--warm); }

.sc-dreviews__meta {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

.sc-dreviews__author,
.sc-dreviews__date,
.sc-dreviews__text,
.sc-dreviews__source { margin: 0; }

.sc-dreviews__date,
.sc-dreviews__source { color: var(--sc-neutral-600); }

.sc-dreviews__source { text-align: end; }

.sc-dreviews__body {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.sc-dreviews__text { max-inline-size: var(--sc-measure); }

.sc-dreviews__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-0_5);
  margin: 0;
}

.sc-dreviews__facts > div {
  display: grid;
  grid-template-columns: var(--dtabs-fact-label-w) minmax(0, 1fr);
  gap: var(--stack-gap-sm);
}

.sc-dreviews__facts dt { color: var(--sc-neutral-600); }
.sc-dreviews__facts dd { margin: 0; }

/* ---------- Типи відгуків (як на virtus.ua/reviews, 2026-10-28) ----------
   «Відгук на сайті» — текст; «Відео-відгук» — ролик замість тексту; «Запис в гостьовій книзі» —
   текст + мініатюра скану сторінки. Тип видно в колонці джерела праворуч, підписи (філія,
   напрямок, фахівець) — однакові для всіх. ACF: review_type (site | video | guestbook) */
/* figure має власне поле браузера (40) — гасимо з запасом специфічності, кадр стоїть на лінії тексту */
.sc-dreviews .sc-dreviews__video {
  margin: 0;
  max-inline-size: 480px; /* кадр 16:9 у колонці тексту — не на всю ширину */
}

.sc-dreviews__video .sc-dvideo__open { aspect-ratio: 16 / 9; inline-size: 100%; }

.sc-dreviews__scan {
  position: relative;
  display: block;
  inline-size: 200px;
  border: var(--sc-line) solid var(--border);
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
}

.sc-dreviews__scan img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sc-dreviews__scan-label {
  position: absolute;
  inset-block-end: var(--sc-space-2);
  inset-inline-start: var(--sc-space-2);
  padding: var(--sc-space-0_5) var(--sc-space-1_5);
  background: var(--background);
}

@media (hover: hover) and (pointer: fine) {
  .sc-dreviews__scan:hover { border-color: var(--foreground); }
}

.sc-dreviews__scan:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* Button/Control · outline */
.sc-dreviews__more-btn {
  block-size: var(--control-square);
  padding-inline: var(--control-padding-x);
  border: var(--sc-line) solid var(--border);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  text-transform: uppercase;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

/* ---------- Состояния (в Figma их нет — обязательны по CLAUDE.md) ---------- */

@media (hover: hover) and (pointer: fine) {
  .sc-dtabs__tab[aria-selected="false"]:hover { color: var(--foreground); }
  a.sc-dservices__tile:hover,
  a.sc-dindications__chip:hover,
  .sc-dreviews__more-btn:hover { background: var(--muted); }
  .sc-darticles__all:hover { text-decoration: none; }
  a.sc-dservices__tile:hover .sc-dservices__arrow svg {
    transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
  }
  .sc-dvideo__open:hover .sc-dvideo__play { transform: translate(-50%, -50%) scale(1.08); }
  .sc-ddoctors__name:hover { text-decoration: none; }
}

.sc-dtabs__tab:focus-visible,
.sc-dservices__tile:focus-visible,
.sc-dindications__chip:focus-visible,
.sc-dvideo__open:focus-visible,
.sc-ddoctors__name:focus-visible,
.sc-dreviews__more-btn:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

a.sc-dservices__tile:active,
a.sc-dindications__chip:active,
.sc-dreviews__more-btn:active { background: var(--secondary); }

.sc-dreviews__more-btn:disabled { opacity: 0.45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .sc-dtabs__list.sc-is-ready .sc-dtabs__indicator,
  .sc-dtabs__tab,
  .sc-dservices__tile,
  .sc-dservices__arrow svg,
  .sc-dindications__chip,
  .sc-dvideo__play,
  .sc-dreviews__more-btn { transition: none; }
  .sc-dservices__preview { display: none; }
}

/* ---------- Планшет и телефон ----------
   Колонка заголовка 416 и колонки отзыва 220 + 140 — фиксированные: уже 1024
   тексту оставалось 100–200. С планшета заголовок встаёт над текстом, а отзыв —
   в одну колонку (2026-11-09). */

@media (max-width: 1023px) {
  .sc-dprose,
  .sc-dabout,
  .sc-dabout--quote-only {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-gap-lg);
  }

  /* «Опис» з розділами всередині — одна колонка, H2 над своїм текстом */
  .sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body { grid-template-columns: minmax(0, 1fr); }
  .sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > * { grid-column: 1; }
  .sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > h2 { margin-block-end: 0; }
  .sc-dprose:not(:has(> .sc-dprose__title)) > .sc-dprose__body > h2:not(:first-child) + * { margin-block-start: 0; }

  /* Опис без цитати — одна колонка, вступ над текстом */
  .sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) { grid-template-columns: minmax(0, 1fr); }
  .sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > * { grid-column: 1; grid-row: auto; }
  .sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)) > h2,
  .sc-dabout:not(:has(> .sc-dabout__quote)) > .sc-dabout__body:is(:has(> h2), :has(> p:nth-child(-n+2) > :is(strong, b):only-child)):not(:has(> h2)) > p:nth-child(-n+2):has(> :is(strong, b):only-child) {
    grid-row: auto;
    margin-block-end: 0;
  }

  .sc-dreviews__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-gap-md);
  }

  .sc-dreviews__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-gap-sm) var(--grid-gap);
  }

  .sc-dreviews__source { text-align: start; }
}

/* Планшет: карточки журнала и плитки «по четыре» — по две в ряд */
@media (min-width: 641px) and (max-width: 1023px) {
  .sc-darticles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--section-gap); }
  .sc-dservices__list--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Телефон ---------- */

@media (max-width: 640px) {
  .sc-dtabs__list { gap: var(--sc-space-6); }

  .sc-dtabs__panel {
    gap: var(--section-padding-y);
    padding-block: var(--section-padding-y);
  }

  .sc-dservices__list { grid-template-columns: minmax(0, 1fr); }

  .sc-ddoctors { grid-template-columns: minmax(0, 1fr); gap: var(--section-gap); }

  /* карточки журнала в колонку с разрядкой, как в ленте */
  .sc-darticles__row { grid-template-columns: minmax(0, 1fr); gap: var(--section-gap); }
  .sc-darticles__head { flex-direction: column; align-items: flex-start; gap: var(--stack-gap-sm); }

  .sc-dservices__list--cols-4 { grid-template-columns: minmax(0, 1fr); }

  .sc-dreviews__row { padding: var(--sc-space-6) var(--sc-space-4); }

  .sc-dreviews__more-btn { inline-size: 100%; }
}

/* ---------- Відео-відгуки пацієнтів (шаблон послуги, 2026-10-27) ----------
   На virtus — на кожній послузі: ролики + посилання на сторінку відгуків.
   Шапка — як у дорожки журналу (.sc-darticles__head), картки — кадр sc-dvideo,
   у ряд по три через щілину плиток; одна картка займає третину. */
.sc-dvlog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sc-head-gap);
  padding: var(--section-padding-y) var(--sc-pad-x);
  background: var(--background);
  color: var(--foreground);
}

.sc-dvlog__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-dvlog__row .sc-dvideo { margin: 0; }
.sc-dvlog__row .sc-dvideo__open { inline-size: 100%; aspect-ratio: 16 / 9; }

@media (max-width: 640px) {
  .sc-dvlog__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Метка «Virtus» на чипі послуги (2026-10-27) ----------
   Послуга не з клітинних технологій веде на virtus.ua — як «Virtus» на плитках «Види послуги» */
/* Надрядковик, як ™ (2026-10-27): метка стоїть угорі біля назви, дрібніше, і не тягне чип
   у висоту. Виводиться автоматично, якщо послуга не ексклюзивна для SmartCell (service_external) */
.sc-dindications__chip--virtus { gap: var(--sc-space-1); align-items: flex-start; }
.sc-dindications__source {
  color: var(--sc-neutral-600);
  font-size: var(--p-mini-size);
  line-height: 1;
  margin-block-start: calc(-1 * var(--sc-space-1));
}

/* ---------- «До і Після» — острівець (шаблон послуги, 2026-10-27) ----------
   Як плита «Неофіброліфтинг» на Face Control (b15a-science.css): темна плита в полі
   верстки, поля 80 усередині. Фон — чорний тёмної теми (--background під data-theme="inverse", #100E0C);
   синю «ніч» пробували і повернули (2026-10-27). Під кадр праворуч — модифікатор --media. */
.sc-dba {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start; /* текст і кнопка — до верху плити, як усюди в ките */
  padding: var(--page-margin-x);
  background: var(--background);
  color: var(--foreground);
}

.sc-dba__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-md);
  min-inline-size: 0;
}

.sc-dba__kicker,
.sc-dba__title,
.sc-dba__text { margin: 0; }

.sc-dba__kicker { color: var(--accent-foreground); }

/* Заголовок острівця — коротка міра (2026-10-27): «Хочете побачити приклади / До і Після?»
   у два рядки, не на всю колонку */
.sc-dba__title { max-inline-size: 13em; }
/* абзац — не ширше заголовка: «…процедур переконують / краще будь-яких слів…» (правка 2026-10-27) */
.sc-dba__text { max-inline-size: 28em; color: var(--muted-foreground); }

/* Кнопка острівця — компонент Button/Block (.sc-story__cta), власних стилів немає (правка 2026-10-27) */
.sc-dba__copy > .sc-story__cta { margin-block-start: var(--sc-space-4); position: relative; }

/* «Virtus» на плиті Button/Block — як .sc-dservices__source на плитках «Види послуги»:
   кнопка веде на virtus.ua, а не на сторінку SmartCell */
.sc-dba__source {
  position: absolute;
  inset-block-start: var(--sc-space-4);
  inset-inline-end: var(--sc-space-4);
  color: var(--sc-neutral-600);
  text-transform: none;
  letter-spacing: normal;
}

.sc-dba--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }


/* Кадр острівця — квадрат на чорному, тягнеться до правого краю плити без внутрішнього поля:
   фон кадру й плити однаково чорні, тож межі не видно */
.sc-dba--media { padding-block: 0; padding-inline-end: 0; }
.sc-dba__media {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
}
.sc-dba__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* чорний фон кадру (≈#000) набирає колір плити: lighten бере світліше з двох шарів —
     фрукт лишається як є, а фон кадру стає тим самим тёплим чорним, що й плита */
}
/* плід — PNG без фону (2026-10-27), збільшений кадруванням файлу (центр 1576 з 2048) */

/* Під плодом — радіальне сяйво фірмовим синім (blue/700, як «C» у логотипі): пляма під центром
   кадру тане до чорного плити; плід стоїть на ній без власного фону (правка 2026-10-27) */
.sc-dba__media {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sc-blue-600) 55%, transparent) 0%, color-mix(in srgb, var(--sc-blue-700) 40%, transparent) 45%, transparent 100%);
}
.sc-dba--media .sc-dba__copy { padding-block: var(--page-margin-x); }

.sc-dba__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-tile-gap);
}

.sc-dba__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--muted);
}

.sc-dba__photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Підпис на кадрі — плашка в кутку, без скриму на все фото */
.sc-dba__label {
  position: absolute;
  inset-block-end: var(--sc-space-3);
  inset-inline-start: var(--sc-space-3);
  padding: var(--sc-space-1) var(--sc-space-2);
  background: var(--background);
  color: var(--foreground);
}

@media (max-width: 640px) {
  .sc-dba,
  .sc-dba--media {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--card-padding);
  }
  .sc-dba--media .sc-dba__copy { padding-block: 0; }
}

/* ---------- Фільтри сторінки «Відгуки» (reviews.html, 2026-10-29) ----------
   Як на virtus.ua/reviews: Філія і Напрямок — посилання з параметрами; поточний — залитий чип */
.sc-rfilters .sc-dtabs__panel { padding-block-end: 0; }
.sc-rfilters__group .sc-dindications__title { color: var(--sc-neutral-600); }
.sc-dindications__chip[aria-current="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}