/* ============================================================
   SC/Doctor · страница лікаря — обёртка секций, факты в hero,
   конфигуратор послуг (плитки → полочка), строки биографии
   figma: макета нет — собрано из компонентов SC/Direction и VM/Rubrics (1123:875)
   Зависит от tokens.css, base.css, sc-direction-hero.css, sc-direction-tabs.css
   Поведение конфигуратора — assets/js/doctor-services.js
   ============================================================ */

/* ---------- Секция страницы: заголовок → содержимое через --sc-head-gap ---------- */

.sc-doc {
  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-doc *,
.sc-doc *::before,
.sc-doc *::after { box-sizing: border-box; }

.sc-doc__title { margin: 0; }

/* «Опис»: самостоятельные блоки через полный шаг секции, как части «Опису» напрямку */
.sc-doc--about { gap: var(--section-padding-y); }

/* Отзывы: сетка строк sc-dreviews читает переменные страницы напрямку (.sc-dtabs) —
   здесь они заданы на секции с теми же значениями */
.sc-doc--reviews {
  --dtabs-review-meta-w: 220px;
  --dtabs-review-source-w: 140px;
  --dtabs-fact-label-w: 110px;
}

.sc-doc__group { margin: 0; }

/* ---------- Hero: рейтинг и стаж над филиалами ---------- */

.sc-dhero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-2) var(--sc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-dhero__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--card-gap);
}

.sc-dhero__stars { flex: none; display: block; }

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

/* ---------- Послуги: плитки → полочка (та же механика, что тематики журнала) ---------- */

.sc-dsvc {
  /* заголовок → плитки через --sc-head-gap и вне .sc-doc (хаб: группа внутри «Опису»; 2026-10-12) */
  display: flex;
  flex-direction: column;
  gap: var(--sc-head-gap);
  --dsvc-tile-min: 280px;              /* плитка: при колонке 1280 — четыре по ~314 */
  --dsvc-tile-gap: var(--sc-space-2);  /* 8 */
  --dsvc-open-dur: 700ms;              /* раскрытие полочки */
  --dsvc-chip-dur: 520ms;              /* появление чипа */
  --dsvc-chip-step: 40ms;              /* волна: шаг между чипами */
}

.sc-dsvc__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dsvc-tile-min)), 1fr));
  column-gap: var(--dsvc-tile-gap);
  /* Просвет между рядами — полями пунктов, а не row-gap: строка закрытой
     полочки иначе оставляла бы лишний просвет. Поля крайних рядов гасит margin */
  margin: calc(-0.5 * var(--dsvc-tile-gap)) 0;
  padding: 0;
  list-style: none;
}

.sc-dsvc__tiles > li:not(.sc-dsvc__panel) { padding-block: calc(0.5 * var(--dsvc-tile-gap)); }

/* Плитка — Button/Block (320 × 76): название сверху слева, стрелка снизу справа;
   на наведении стрелка тычется в угол, в открытой — смотрит вниз, на полочку */
.sc-dsvc__tile {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: var(--sc-cta-block-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: calc(var(--grid-gap) - var(--sc-line)) var(--grid-gap);
  border: var(--sc-line) solid var(--border);
  background: transparent;
  color: var(--foreground);
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--sc-dur-fast) var(--sc-ease),
    color var(--sc-dur-fast) var(--sc-ease);
}

.sc-dsvc__arrow {
  display: flex;
  justify-content: flex-end;
}

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

/* Раскрытие (правка 2026-10-12, вторая редакция): стрелка остаётся в позиции наведения
   (уткнулась в угол), ножка и вертикальная половинка острия плавно уходят в угол —
   остаётся одна горизонтальная чёрточка, «минус». Ножка и две ножки острия — отдельные
   path в разметке (__arrow-shaft, __arrow-leg--h, __arrow-leg--v). Было: поворот вниз (rotate 90). */
.sc-dsvc__arrow-shaft,
.sc-dsvc__arrow-leg {
  transform-box: view-box;
  transform-origin: 22px 12px; /* остриё — угол плитки */
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

.sc-dsvc__tile[aria-expanded="true"] .sc-dsvc__arrow svg {
  transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
}

.sc-dsvc__tile[aria-expanded="true"] .sc-dsvc__arrow-shaft,
.sc-dsvc__tile[aria-expanded="true"] .sc-dsvc__arrow-leg--v { transform: scale(0); }

.sc-dsvc__tile[aria-expanded="true"] {
  background: var(--foreground);
  color: var(--background);
}

/* Полочка — строка сетки во всю ширину; скрипт ставит её сразу за рядом нажатой плитки.
   Раскрывается от 0fr до 1fr с выраженным ease-out; закрытая — строка нулевой высоты, inert */
.sc-dsvc__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  border-block: 0 solid var(--border);
  transition:
    grid-template-rows var(--dsvc-open-dur) var(--sc-ease-out-expo),
    margin-block var(--dsvc-open-dur) var(--sc-ease-out-expo),
    border-block-width 0s linear var(--dsvc-open-dur);
}

.sc-dsvc__panel.sc-is-open {
  grid-template-rows: 1fr;
  margin-block: calc(1.5 * var(--dsvc-tile-gap)); /* + поле пункта 4 = 16 от плиток */
  border-block-width: var(--sc-line);
  transition:
    grid-template-rows var(--dsvc-open-dur) var(--sc-ease-out-expo),
    margin-block var(--dsvc-open-dur) var(--sc-ease-out-expo),
    border-block-width 0s;
}

/* Переезд в другой ряд — без анимации закрытия (класс ставит скрипт) */
.sc-dsvc__panel.sc-is-moving { transition: none; }

.sc-dsvc__clip {
  min-block-size: 0;
  overflow: hidden;
}

.sc-dsvc__shelf { padding-block: 0; } /* строки сами несут поля; было 24 (правка 2026-10-11) */

.sc-dsvc__pane {
  display: flex;
  flex-direction: column;
}

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

/* Второй уровень: подпись подгруппы капсом, под ней чипы (чипы — sc-dindications из страницы напрямку) */
/* Второй уровень строками, как биография (.sc-dbio__row): слева подгруппа в колонке 320,
   справа чипы; строки через волосяную линию, последняя — без (низ закрывает линия полочки).
   Первая группа категории без подгруппы — левая ячейка пустая (2026-10-11) */
.sc-dsvc__group {
  --dsvc-label-w: 320px; /* = плита Button/Block и колонка подписи биографии */
  display: grid;
  grid-template-columns: var(--dsvc-label-w) minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
  padding-block: var(--sc-space-6); /* 24 */
  border-block-end: var(--hairline) solid var(--border);
}

.sc-dsvc__group:last-child { border-block-end: 0; }

/* группа без подписи: чипы с первой колонки */
.sc-dsvc__group > .sc-dindications__list:first-child { grid-column: 1 / -1; }

/* Полочка как тематики журнала (хаб, 2026-10-12; vm-topics.css .vm-topics__group):
   чипы послуг слева, «Сторінка напрямку · Virtus» справа — ссылка на линии текста
   первого ряда чипов (поле 12 сверху, как у подписи подгруппы) */
.sc-dsvc__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-8);
  padding-block: var(--sc-space-6); /* 24, как полочка журнала */
}

.sc-dsvc__row > .sc-dindications__list {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.sc-dsvc__all {
  flex: none;
  padding-block: var(--sc-space-3) 0;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}

/* Напрямок без вкладених послуг — плитка-посилання: клік одразу веде на сторінку (2026-10-12) */
a.sc-dsvc__tile--link {
  text-decoration: none;
  box-sizing: border-box;
}

/* Підпис-посилання (хаб: «Сторінка напрямку») */
a.sc-dsvc__link {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Ряд лише з посиланням (напрямок без вкладених послуг) */
.sc-dsvc__group > .sc-dsvc__subtitle:only-child { grid-column: 1 / -1; }

.sc-dsvc__subtitle {
  margin: 0;
  /* по верху ряда, на одной линии с верхом чипов; текст чипа ниже на поле 12 —
     подпись компенсирует это полем сверху и ложится на его базовую линию (2026-10-11) */
  padding-block: var(--sc-space-3) 0;
  font-weight: var(--sc-weight-medium);
  color: var(--foreground);
}

/* Чипы появляются волной: каждый чуть позже предыдущего (--i ставит скрипт) */
.sc-dsvc__panel.sc-is-open .sc-dsvc__pane:not([hidden]) .sc-dindications__list > li,
.sc-dsvc__panel.sc-is-open .sc-dsvc__pane:not([hidden]) .sc-dsvc__all,
.sc-dsvc__panel.sc-is-open .sc-dsvc__pane:not([hidden]) .sc-dsvc__subtitle {
  animation: sc-dsvc-in var(--dsvc-chip-dur) var(--sc-ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * var(--dsvc-chip-step));
}

@keyframes sc-dsvc-in {
  from { opacity: 0; transform: translateY(var(--sc-space-2)); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Биография: строки через волосяную линию, подпись слева ---------- */

.sc-dbio {
  /* Колонка подписи — половина полосы (сетка 6 из 12 колонок): текст справа начинается
     от середины, как колонка «что получаете» в B12 (правка 2026-10-11; было 320) */
  --dbio-label-w: calc(6 * (100% - 11 * var(--sc-grid-gutter)) / 12 + 5 * var(--sc-grid-gutter));
  display: flex;
  flex-direction: column;
  border-block-start: var(--hairline) solid var(--border);
}

.sc-dbio__row {
  display: grid;
  grid-template-columns: var(--dbio-label-w) minmax(0, 1fr);
  gap: var(--section-gap);
  padding-block: var(--sc-space-8); /* 32 */
  border-block-end: var(--hairline) solid var(--border);
}

.sc-dbio__label { margin: 0; }

.sc-dbio__body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-md);
  margin: 0;
  max-inline-size: var(--sc-measure);
}

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

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

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

@media (hover: hover) and (pointer: fine) {
  .sc-dsvc__tile[aria-expanded="false"]:hover .sc-dsvc__arrow svg {
    transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
  }
  .sc-dsvc__tile[aria-expanded="false"]:hover { background: var(--muted); }
  a.sc-dsvc__link:hover { text-decoration: none; }
}

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

.sc-dsvc__tile:active { background: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
  .sc-dsvc__tile,
  .sc-dsvc__arrow svg,
  .sc-dsvc__panel,
  .sc-dsvc__panel.sc-is-open { transition: none; }
  .sc-dsvc__panel.sc-is-open .sc-dsvc__pane:not([hidden]) .sc-dindications__list > li,
  .sc-dsvc__panel.sc-is-open .sc-dsvc__pane:not([hidden]) .sc-dsvc__subtitle { animation: none; }
}

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

@media (max-width: 640px) {
  .sc-dsvc { --dsvc-tile-min: 140px; } /* две плитки в ряд */
  /* на телефоне всегда две: при трёх длинные капсом слова («ГАСТРОЕНТЕРОЛОГІЯ») вылезали за плитку (2026-11-03) */
  .sc-dsvc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

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

  /* Полочка напрямку на телефоні (2026-11-03): послуги — на всю ширину, одна під одною,
     «Сторінка напрямку» — після них. Було: чипи в половину ширини, посилання праворуч */
  .sc-dsvc__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--stack-gap-lg);
  }

  .sc-dsvc__row > .sc-dindications__list {
    flex-direction: column;
    align-items: stretch;
  }

  .sc-dsvc__row .sc-dindications__list > li,
  .sc-dsvc__row .sc-dindications__chip {
    display: flex;
    inline-size: 100%;
  }

  .sc-dsvc__row .sc-dindications__chip--virtus { justify-content: space-between; }

  .sc-dsvc__all { align-self: flex-start; padding-block-start: 0; }
}

/* Метка «Virtus» на плитці категорії послуг лікаря (2026-10-27): категорія не з клітинних
   технологій — як на плитках «Види послуги» сторінки напрямку, у правому верхньому куті */
.sc-dsvc__tile { position: relative; }
.sc-dsvc__source {
  position: absolute;
  inset-block-start: calc(var(--grid-gap) - var(--sc-line));
  inset-inline-end: var(--grid-gap);
  color: var(--sc-neutral-600);
  text-transform: none;
  letter-spacing: normal;
}
.sc-dsvc__tile[aria-expanded="true"] .sc-dsvc__source { color: var(--sc-white-alpha-60); }

/* ---------- Vlog лікаря (2026-11-03): ролики 16:9 по три в рядок, під кожним назва; на телефоні — стрічка вбік ---------- */
.sc-dvlog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--section-gap) var(--sc-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-dvlog .sc-dvideo { margin: 0; }
.sc-dvlog .sc-dvideo__caption { padding-inline-end: var(--sc-tile-text-inset); color: var(--sc-neutral-600); }
.sc-dvlog .sc-dvideo__open { inline-size: 100%; aspect-ratio: 16 / 9; }

@media (max-width: 640px) {
  .sc-dvlog {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    margin-inline: calc(-1 * var(--sc-pad-x));
    padding-inline: var(--sc-pad-x);
    scroll-padding-inline: var(--sc-pad-x);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sc-dvlog::-webkit-scrollbar { display: none; }
  .sc-dvlog > li { scroll-snap-align: start; }
}