/* Страница «Врачи» (/doctors). Дополняет assets/dentro-home.css — там уже есть всё
 * нужное для карточек врача (.docs/.doc), их же рисует блок «Наши врачи» на главной
 * для шести отобранных карточек. Здесь их 13, стиль карточки не меняется — только
 * то, чего нет в общих файлах: хлебные крошки, вступление, блок помощи и сетка на
 * большее количество карточек.
 *
 * .crumbs и .help скопированы без изменений из dentro-services.css: тот файл сюда
 * не подключён, а компоненты те же самые.
 */

/* ── хлебные крошки ──────────────────────────────────────────────────────── */
.crumbs { padding: 16px 0 0; font-size: 14px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '→'; color: #9db4c0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* ── вступление ──────────────────────────────────────────────────────────── */
.intro { padding: 24px 0 8px; }
.intro__sub { margin-top: 12px; font-size: 19px; color: var(--muted); max-width: 640px; }

/* ── поиск и фильтры: крупная двухстрочная панель по утверждённому макету ── */
.docs-search { padding: 8px 0 8px; }
/* От низа панели поиска до карточек — 34–36px по макету, а не обычный
   64px-отступ .sec (тот нужен между другими секциями страницы). */
.sec--tight-top { padding-top: 28px; }
.docs-search__box {
  background: #fff; border: 1px solid #d8e6ed; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(7, 74, 101, .06); padding: 24px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.docs-search__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.docs-search__row1 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 24px; align-items: center; }
.docs-search__field { position: relative; display: flex; align-items: center; min-width: 0; }
.docs-search__icon { position: absolute; left: 20px; width: 22px; height: 22px; flex: 0 0 22px; color: var(--muted); pointer-events: none; }
.docs-search__input {
  width: 100%; height: 56px; padding: 0 20px 0 52px;
  border: 1px solid #d5e2e9; border-radius: 13px;
  font: inherit; font-size: 16px; font-weight: 400; color: #12313f; background: #fff;
}
.docs-search__input:focus { border-color: var(--blue-2); outline: none; box-shadow: 0 0 0 3px rgba(28, 130, 173, .15); }
.docs-search__input::placeholder { color: #8ca2ae; font-weight: 400; }

.docs-search__spec {
  width: 100%; min-width: 0; height: 56px; padding: 0 52px 0 20px;
  border: 1px solid #d5e2e9; border-radius: 13px; font: inherit; font-size: 16px; color: #12313f;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2345606b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; background-size: 18px 18px;
  appearance: none; -webkit-appearance: none;
}
.docs-search__spec:focus { border-color: var(--blue-2); outline: none; box-shadow: 0 0 0 3px rgba(28, 130, 173, .15); }

.docs-search__row2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* segmented control: три равные трети, активная — градиентная плашка */
.docs-search__age {
  display: grid; grid-template-columns: repeat(3, 1fr); width: 480px; height: 56px;
  padding: 0; overflow: hidden; border: 1px solid #d8e4ea; border-radius: 14px; background: #f4f8fa;
}
.docs-search__age button {
  min-width: 0; height: 56px; padding: 0 22px; border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 16px; font-weight: 600; color: #12313f; cursor: pointer;
}
.docs-search__age button + button { border-left: 1px solid #dce7ec; }
.docs-search__age button[aria-pressed="true"] {
  position: relative; z-index: 1; border: 0; border-left: 0; border-radius: 13px;
  background: linear-gradient(135deg, #1387ae 0%, #05617e 100%);
  box-shadow: 0 6px 14px rgba(7, 105, 139, .22); color: #fff; font-weight: 700;
}

.docs-search__meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.docs-search__status { font-size: 16px; color: #677881; white-space: nowrap; }
.docs-search__status strong { color: #12313f; font-weight: 700; }
.docs-search__reset {
  display: inline-flex; align-items: center; gap: 10px; border: 0; border-left: 1px solid #d7e3e9;
  background: none; padding: 8px 0 8px 28px; font: inherit; font-size: 16px; font-weight: 700;
  color: #08749a; white-space: nowrap; cursor: pointer;
}
.docs-search__reset svg { width: 22px; height: 22px; flex: 0 0 22px; }
.docs-search__reset:hover { color: var(--blue-2); }

.docs-empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 17px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
.docs-empty strong { display: block; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.docs-empty[hidden] { display: none; }

/* ── сетка на карточки: те же .doc, что и на главной, шире сетка ───────── */
.docs--all { grid-template-columns: repeat(3, 1fr); }

/* ── блок помощи (перенесён без изменений из dentro-services.css) ───────── */
.help {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 32px;
  flex-wrap: wrap; padding: 32px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.help__title { font-size: 24px; font-weight: 700; }
.help__text { margin-top: 8px; color: var(--muted); max-width: 560px; }
.help__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── персональная страница врача (doctors/<slug>.html) ─────────────────────
 * Врачи из МИС (tools/staff-sync) показывают только шапку профиля — у них нет
 * био. У 12 врачей с наследием от старого сайта (data/doctor-bios.json) в
 * шапке ещё образование (.doc-profile__edu-hero), а ниже — блок «с какими
 * вопросами обращаются». */
/* Секция шапки профиля компактнее обычной .sec (64px сверху/снизу) — иначе между
   кнопками записи и следующим блоком остаётся пустой воздух, особенно у врачей
   без большого био. */
.doc-profile-sec { padding: 32px 0 40px; }
/* align-items: stretch (не center) — фото растягивается по высоте всей колонки
   с текстом справа: чем больше в ней блоков (образование, цены, кнопки),
   тем выше карточка фото, без фиксированного магического числа. */
.doc-profile { display: flex; gap: 40px; align-items: stretch; }
.doc-profile__photo { flex: 0 0 320px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 420px; }
.doc-profile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* min-width:0 — та же ловушка flex-строки, что и у .dir-price__row-name: без него
   длинное неразрывное содержимое (например, ФИО) не даёт колонке сжаться уже
   своей собственной min-content ширины, и на ≥761px (ещё flex-direction:row)
   вся секция вылезает за экран (DEPLOY.1A.1). Ничего не скрывает — просто
   разрешает нормальный перенос по словам внутри. */
.doc-profile__body { flex: 1 1 auto; min-width: 0; }
.doc-profile__spec { margin-top: 8px; font-size: 19px; color: var(--blue); font-weight: 600; }
.doc-profile__exp { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 15px; }
.doc-profile__exp svg { width: 18px; height: 18px; flex: none; }
.doc-profile__intro { margin-top: 16px; font-size: 17px; color: var(--ink); max-width: 640px; }

/* компактное образование прямо в шапке профиля */
.doc-profile__edu-hero { margin: 16px 0 0; padding: 0; list-style: none; max-width: 640px; }
.doc-profile__edu-hero li {
  position: relative; padding-left: 18px; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5;
}
.doc-profile__edu-hero li::before { content: '—'; position: absolute; left: 0; }
.doc-profile__edu-hero li:first-child { margin-top: 0; }

/* первичный/повторный приём — цена подгружается на клиенте из того же прайса
   МИС, что и страницы направлений (см. assets/dentro-doctor-price.js): цифра в
   вёрстке при сборке была бы «вчерашней» между пересборками сайта. */
/* группа — один приём (один platный профиль врача); у врача с несколькими
   платными специализациями (например хирург и онколог) их несколько, у каждой
   своя пара цен — почему не одна общая строка «Первичный/Повторный приём» */
.doc-profile__prices { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.doc-profile__price-group[hidden] { display: none; }
.doc-profile__price-group-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.doc-profile__price-row { display: flex; gap: 24px; flex-wrap: wrap; }
.doc-profile__price { display: flex; flex-direction: column; }
.doc-profile__price-label { font-size: 14px; color: var(--muted); }
.doc-profile__price-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.doc-profile__all-services { display: inline-flex; margin-top: 8px; }

.doc-services { display: grid; gap: 0; margin-top: 18px; }
.doc-services__row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doc-services__row a, .doc-services__row span { color: var(--ink); }
.doc-services__row a:hover { color: var(--accent); }
.doc-services__row strong { white-space: nowrap; color: var(--ink); }
.doc-services__dots { flex: 1; min-width: 18px; border-bottom: 1px dotted var(--muted); opacity: .45; }

.doc-profile__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.doc-profile__btns .btn { min-height: 52px; }
/* Свой стиль вместо .link-more: та стрелка добавляет "→" через ::after, а тут
   текст уже начинается с "←" — вместе получалось "← Все врачи →". */
.doc-profile__back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
  font-weight: 600; color: var(--blue); text-decoration: none; transition: transform .2s ease, color .2s ease;
}
.doc-profile__back:hover { color: var(--blue-2); transform: translateX(-3px); }

.doc-profile__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.doc-profile__tags li {
  padding: 8px 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; color: var(--ink);
}

/* ── «Другие врачи этой специальности» ──────────────────────────────────── */
.doc-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc-related__card {
  display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit;
  min-width: 0;
}
.doc-related__card:hover { border-color: #c7dde8; box-shadow: var(--shadow); }
.doc-related__card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.doc-related__card span { min-width: 0; }
.doc-related__name { display: block; font-weight: 700; font-size: 15px; }
.doc-related__spec { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .docs--all { grid-template-columns: repeat(2, 1fr); }
  .doc-related { grid-template-columns: repeat(2, 1fr); }
}
/* планшет (768–1023px): первая строка фильтров остаётся в две колонки, только
   переключатель возраста чуть уже, высоту полей и кнопок не трогаем */
@media (max-width: 1023px) and (min-width: 768px) {
  .docs-search__age { width: 420px; }
}
@media (max-width: 760px) {
  .intro { padding: 16px 0 0; }
  .intro__sub { font-size: 17px; }
  .doc-related { grid-template-columns: 1fr; }
  .docs--all { grid-template-columns: 1fr; }
  .help { padding: 20px; }
  .help__btns { width: 100%; }
  .help__btns .btn { flex: 1 1 auto; }
  /* строчная раскладка (align-items: stretch) на телефоне не годится — колонкой
     фото растягивать по высоте текста нечем, возвращаем фиксированную высоту */
  .doc-profile { flex-direction: column; align-items: flex-start; gap: 24px; }
  .doc-profile-sec { padding: 24px 0 32px; }
  .doc-profile__photo { flex-basis: auto; width: 220px; min-height: 0; }
  .doc-profile__photo img { height: 280px; }
  .docs-search__box { padding: 16px; }
  .docs-search__row1 { grid-template-columns: 1fr; }
  .docs-search__spec { width: 100%; }
  .docs-search__row2 { flex-direction: column; align-items: stretch; gap: 12px; }
  .docs-search__age { width: 100%; }
  .docs-search__meta { justify-content: space-between; }
}