/* Страницы направлений (/therapy, /ultrasound, ...). Дополняет dentro-home.css и
 * dentro-services.css — оттуда уже есть .crumbs, .help, .dircards/.dircard, .sec.
 * Здесь — только шапка направления и список цен, которых больше нигде нет.
 */

/* ── шапка направления ──────────────────────────────────────────────────── */
.dir-hero { padding-top: 24px; }
.dir-hero__in { display: flex; gap: 24px; align-items: flex-start; }
.dir-hero__icon {
  flex: none; width: 64px; height: 64px; border-radius: 16px; background: var(--bg-soft);
  color: var(--blue); display: flex; align-items: center; justify-content: center;
}
.dir-hero__icon svg { width: 32px; height: 32px; }
.dir-hero__note { margin-top: 10px; font-size: 18px; color: var(--muted); max-width: 640px; }
.dir-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ── «Приём ведёт» ────────────────────────────────────────────────────────── */
.dir-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.dir-doc {
  display: flex; gap: 20px; padding: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dir-doc:hover, .dir-doc:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hi); border-color: #c7dde8; }
.dir-doc__photo { flex: 0 0 140px; width: 140px; height: 140px; border-radius: 14px; overflow: hidden; }
.dir-doc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.dir-doc__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dir-doc__name { font-size: 18px; font-weight: 700; color: var(--ink); }
.dir-doc__spec { font-size: 15px; color: var(--blue); font-weight: 600; }
.dir-doc__exp { font-size: 14px; color: var(--muted); }
.dir-doc__more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; color: var(--blue-2); }

/* ── список цен (рисует assets/dentro-direction.js) ─────────────────────── */
.dir-price__note { color: var(--muted); font-size: 15px; margin: 8px 0 24px; }
.dir-price__loading { color: var(--muted); }
.dir-price__empty { margin-top: 16px; }
.dir-price__empty a { color: var(--blue); }
.dir-price__retry { border: 0; padding: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; }

.dir-price__search { position: relative; display: flex; align-items: center; margin-bottom: 24px; max-width: 480px; }
.dir-price__search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.dir-price__search-input {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 42px;
  border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px;
  color: var(--ink); background: #fff;
}
.dir-price__search-input:focus { border-color: var(--blue-2); outline: none; }

.dir-price__group + .dir-price__group { margin-top: 28px; }
.dir-price__group h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.dir-price__more {
  margin-top: 12px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font: inherit; font-size: 15px; color: var(--blue); cursor: pointer;
}
.dir-price__more:hover { background: var(--bg-soft); }

.dir-price__rows { display: flex; flex-direction: column; gap: 2px; }
.dir-price__rows[hidden] { display: none; }
.dir-price__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.dir-price__row:last-child { border-bottom: none; }
/* min-width:0 — та же ловушка flex, что уже была с .dirs > li и .docs-search__spec:
   без него длинное название не переносится, а сжимает цену и кнопку до нечитаемого
   состояния (п.11 ТЗ). */
/* DEPLOY.1A.3: названия услуг приходят из МИС и иногда содержат длинные
   фрагменты без пробелов (например, соединённые знаком «+»), которые не могут
   перенестись по обычной границе слова и создают overflow — anywhere позволяет
   перенос только когда ширины действительно не хватает. */
.dir-price__row-name { color: var(--ink); flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.dir-price__row-dots { flex: 1 1 40px; min-width: 20px; border-bottom: 1px dotted #b9c9d1; height: 0; transform: translateY(-4px); }
.dir-price__row-value { flex: none; font-weight: 700; color: var(--blue); white-space: nowrap; }
.dir-price__row-btn { flex: none; }

/* ── адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dir-doc { flex-direction: column; }
  .dir-doc__photo { width: 100%; height: 200px; }
  /* DEPLOY.1A.2: горизонтальная иконка+текст оставляла самым длинным
     однословным заголовкам («Оториноларингология», «Дерматовенерология»)
     всего ~220px на 320px экране — они физически не помещались ни при
     каком разумном размере шрифта. Колонкой (иконка сверху) текстовому блоку
     достаётся вся ширина .wrap; min-width:0 снимает автоматический пол
     flex-элемента (без него длинное неразрывное слово не даёт сжаться). */
  .dir-hero__in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dir-hero__in > div { width: 100%; min-width: 0; }
  .dir-hero__icon { width: 52px; height: 52px; border-radius: 14px; }
  .dir-hero__icon svg { width: 26px; height: 26px; }
  /* Отдельная, более пологая кривая только для H1 направления (не трогает
     общий .dentro-home h1): на 320px даже во всю ширину .wrap самое длинное
     слово не помещается при обычном мобильном размере — на 430px, наоборот,
     колоночной раскладки уже достаточно, и размер остаётся почти прежним. */
  .dir-hero h1 { font-size: clamp(25px, 8.64vw - 2.6px, 40px); }
  .dir-hero__note { font-size: 16px; }
  .dir-hero__btns .btn { flex: 1 1 auto; }
  .dir-price__row-dots { display: none; }
  .dir-price__row-name { flex: 1 1 100%; }
  .dir-price__row-value { flex: 1 1 auto; }
}

/* DEPLOY.1A.2: на планшетной ширине (641–816px) двухколоночная auto-fit-сетка
   (см. .dir-docs выше) продолжает пытаться уместить две карточки врача по
   ~350px, а полному ФИО (nameHtml() держит имя+отчество неразрывной парой,
   не трогаем — см. ТЗ) внутри карточки нужно больше места, чем остаётся
   после фото 140px + паддингов + gap. 816px — фактически измеренная точка,
   с которой две карточки полностью перестают создавать overflow; до неё —
   одна сжимаемая колонка, тексты и фото остаются как в мобильной раскладке
   (.dir-doc уже вертикальная только ≤640px — здесь карточка остаётся
   горизонтальной, меняется только число колонок сетки). */
@media (max-width: 816px) {
  .dir-docs { grid-template-columns: minmax(0, 1fr); }
}