/* vrachy.ru: фирменные цвета и шрифт прежнего сайта, разметка новая, без сборки (Propshaft, вложенность CSS) */
:root {
  --brand: #1aab8f;
  --brand-dark: #15917b;
  --accent: #c70d3b;
  --text: #1f2a30;
  --muted: #6b7780;
  --line: #e3e8eb;
  --bg-soft: #f2f5f7;
  --radius: 8px;
  --page: 1180px;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-dark); }
a:hover { color: var(--accent); }
h1 { font-size: 2rem; line-height: 1.2; margin: .5rem 0 1rem; overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: 1.35rem; margin: 1.5rem 0 .75rem; }
.muted { color: var(--muted); font-weight: normal; }

.page { max-width: var(--page); margin: 0 auto; padding: 1rem 1.25rem 3rem; min-height: 60vh; }

.button {
  display: inline-block; padding: .65rem 1.25rem; border-radius: var(--radius); font: inherit;
  background: var(--brand); color: #fff; text-decoration: none; font-weight: 500; border: 0; cursor: pointer;
  &:hover { background: var(--brand-dark); color: #fff; }
}

.button--ghost {
  background: #fff; color: var(--brand-dark); border: 1px solid var(--brand); margin-top: 1rem;
  &:hover { background: var(--bg-soft); color: var(--brand-dark); }
}

/* шапка */
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.site-header__inner {
  max-width: var(--page); margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.site-header__logo img { display: block; }
.site-nav {
  display: flex; gap: 1.1rem; font-weight: 500; flex-shrink: 0;
  a { color: var(--text); text-decoration: none; &:hover { color: var(--brand); } }
}
.site-header__stats {
  display: flex; gap: .75rem; list-style: none; margin: 0 0 0 auto; padding: 0; color: var(--muted); font-size: .8rem; white-space: nowrap;
  b { color: var(--brand-dark); }
}
.site-subnav {
  max-width: var(--page); margin: 0 auto; padding: 0 1.25rem .6rem; display: flex; gap: 1.25rem; font-size: .9rem; overflow-x: auto; white-space: nowrap;
  a { color: var(--muted); text-decoration: none; &:hover { color: var(--brand); } }
}
.site-header__phone {
  display: grid; text-align: right; font-size: .85rem; color: var(--muted); flex-shrink: 0; white-space: nowrap;
  a { font-size: 1.15rem; font-weight: 700; color: var(--text); text-decoration: none; }
}

/* подвал */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.site-footer__inner { max-width: var(--page); margin: 0 auto; padding: 1.5rem 1.25rem; display: flex; gap: 1.5rem; align-items: flex-start; }
.site-footer__legal { flex: 1; p { margin: 0 0 .35rem; } }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.call-button { display: none; }

/* навигация */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0; font-size: .85rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: .4rem; }
.sorts {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; font-size: .9rem;
  a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); }
  a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
}
.found { color: var(--muted); }
.pagination {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.5rem 0;
  a, span { min-width: 2.25rem; padding: .35rem .6rem; text-align: center; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
  .pagination__current { background: var(--brand); color: #fff; border-color: var(--brand); }
  .pagination__gap { border: 0; }
}

/* поиск */
.hero-search { background: var(--brand); color: #fff; padding: 1.5rem 0 1.75rem; }
.hero-search__inner { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem; h2, p { margin: 0 0 .75rem; } h2 { font-size: 1.6rem; } }
.search-form { display: flex; gap: .5rem; max-width: 720px; margin: 1rem 0; }
.hero-search .search-form { margin: 0; }
.search-form__field { position: relative; flex: 1; input { width: 100%; padding: .7rem .9rem; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius); } }
.hero-search .button { background: var(--accent); &:hover { background: #a90b32; } }
.suggestions {
  position: absolute; z-index: 10; inset: calc(100% + 4px) 0 auto; margin: 0; padding: .35rem 0; list-style: none;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .12);
  a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .9rem; color: var(--text); text-decoration: none; &:hover { background: var(--bg-soft); } }
  small { color: var(--muted); }
}
.suggestions--empty { padding: .6rem .9rem; color: var(--muted); }

/* специальности */
.hero { padding: 1rem 0; }
.specialities {
  columns: 16rem; column-gap: 2rem; list-style: none; padding: 0; margin: 1rem 0;
  li { break-inside: avoid; padding: .2rem 0; }
}

/* галерея клиники: превью одного размера, оригинал по клику */
.gallery {
  display: flex; flex-wrap: wrap; gap: .5rem;
  img { display: block; object-fit: cover; border-radius: var(--radius); background: var(--bg-soft); }
}

/* каталоги диагностики и услуг: разделы колонками, подвиды списком */
.catalog {
  columns: 20rem; column-gap: 2rem; margin: 1rem 0;
  section { break-inside: avoid; margin-bottom: 1.25rem; }
  h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
  ul { list-style: none; padding: 0; margin: 0; }
  li { padding: .15rem 0; }
  ul ul { padding-left: 1rem; font-size: .95rem; }
}
.subtypes {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0;
  a { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .9rem; }
}

/* карточка врача в списке */
.doctor-list { display: grid; gap: 1rem; }
.doctor-card {
  display: grid; grid-template-columns: 125px 1fr 200px; gap: 1.25rem;
  padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.doctor-photo { border-radius: var(--radius); object-fit: cover; aspect-ratio: 4 / 5; background: var(--bg-soft); }
.doctor-card__name { font-size: 1.2rem; margin: 0 0 .25rem; a { color: var(--text); text-decoration: none; &:hover { color: var(--brand); } } }
.doctor-card__specialities { margin: 0; color: var(--brand-dark); }
.doctor-card__facts, .doctor-card__clinic, .doctor-card__metro { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.doctor-card__metro::before { content: "Ⓜ "; color: var(--accent); }
.doctor-card__side { display: grid; gap: .5rem; align-content: start; justify-items: start; }
.doctor-card__price { margin: 0; s { color: var(--muted); margin-left: .35rem; } }

/* клиники */
.clinic-card { display: grid; grid-template-columns: 125px 1fr 200px; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.clinic-logo { object-fit: contain; max-height: 80px; }
.clinic-card__name { font-size: 1.15rem; margin: 0 0 .25rem; a { color: var(--text); text-decoration: none; &:hover { color: var(--brand); } } }
.clinic-card__address, .clinic-card__schedule { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }
.clinic__header { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: start; }
.clinic__address { margin: .5rem 0 .25rem; }
details summary { cursor: pointer; list-style: none; h2 { display: inline; } &::after { content: " ▾"; color: var(--muted); } }
.prices { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .95rem;
  td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
  td:last-child { text-align: right; white-space: nowrap; font-weight: 500; }
}

/* рейтинг звёздами из числа --rating */
.stars {
  --rating: 0;
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  &::before {
    content: "★★★★★"; letter-spacing: 2px; font-size: 1.1rem;
    background: linear-gradient(90deg, #f5b301 calc(var(--rating) / 5 * 100%), #d8dde0 0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* страница врача */
.doctor__header { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.doctor__specialities { color: var(--brand-dark); margin: 0 0 .5rem; }
.doctor__facts { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--muted); }
.doctor__price s { color: var(--muted); margin-left: .35rem; }
.doctor__section { border-top: 1px solid var(--line); margin-top: 1.5rem; }
.clinic-line { display: grid; padding: .5rem 0; .clinic-line__metro { color: var(--muted); } }
.review {
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  header { display: flex; gap: 1rem; align-items: baseline; }
  time { color: var(--muted); font-size: .85rem; }
  .review__clinic { color: var(--muted); font-size: .85rem; margin: .2rem 0 0; }
  p { margin: .4rem 0 0; }
}
.similar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; list-style: none; padding: 0;
  a { display: grid; gap: .4rem; text-decoration: none; color: var(--text); font-size: .9rem; }
}

/* статьи */
.article { max-width: 820px; }
/* таблицы и видео из старых текстов шире телефона: прокрутка внутри, а не всей страницы */
.text table { display: block; max-width: 100%; overflow-x: auto; }
.text iframe { max-width: 100%; }
/* длинные адреса ссылок и слова без пробелов переносятся, а не раздвигают страницу */
.text, .sources, .clinic-card__main, .doctor-card__main { overflow-wrap: anywhere; }
.clinic-card > *, .doctor-card > * { min-width: 0; }
.article-body { line-height: 1.6; img { border-radius: var(--radius); } table { border-collapse: collapse; td, th { border: 1px solid var(--line); padding: .4rem; } } }
.page-meta {
  font-size: .9rem; color: var(--muted); margin-bottom: 1rem;
  p { margin: .25rem 0; }
  .page-meta__warning { background: var(--bg-soft); border-radius: var(--radius); padding: .75rem 1rem; color: var(--text); }
}
.toc { background: var(--bg-soft); border-radius: var(--radius); padding: .75rem 1.25rem; margin: 1rem 0; .toc__title { font-weight: 700; margin: 0 0 .4rem; } ol { margin: 0; padding-left: 1.25rem; } }
.sources, .related, .in-section { border-top: 1px solid var(--line); margin-top: 1.5rem; ol, ul { padding-left: 1.25rem; } }
.sources li { margin: .3rem 0; font-size: .9rem; }
.related ul { list-style: none; padding: 0; display: grid; gap: 1rem; }
.related__link { display: flex; gap: .75rem; align-items: center; font-weight: 600; img { object-fit: cover; border-radius: var(--radius); flex: none; } }
.related p { margin: .3rem 0 0; font-size: .9rem; }
.author-card {
  display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  img { border-radius: 50%; object-fit: cover; aspect-ratio: 1; } p { margin: .15rem 0; } .author-card__name { font-weight: 700; }
}
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1rem 0;
  a { display: grid; gap: .5rem; text-decoration: none; color: var(--text); font-weight: 600; }
  img { width: 100%; height: auto; aspect-ratio: 300 / 195; object-fit: cover; border-radius: var(--radius); background: var(--bg-soft); }
}
.topic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; list-style: none; padding: 0;
  a { display: flex; gap: .75rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
}
.alphabet { columns: 16rem; column-gap: 2rem; section { break-inside: avoid; } h2 { color: var(--accent); margin: .5rem 0 .25rem; } ul { list-style: none; padding: 0; margin: 0 0 .75rem; } }
.columns { columns: 22rem; column-gap: 2rem; }
.calc-list {
  list-style: none; padding: 0; display: grid; gap: 1rem;
  a { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: var(--text); }
}
.expert-row { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; img { border-radius: var(--radius); flex: none; } h2 { margin-top: 0; } }
.license-row { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: 1rem; }
.home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem; }
.popular {
  list-style: none; padding: 0; display: grid; gap: .6rem;
  a { display: flex; gap: .75rem; align-items: center; text-decoration: none; img { object-fit: cover; border-radius: var(--radius); flex: none; } }
}

/* калькуляторы: общий вид формы, поля в ряд, результат появляется после расчёта */
.calc {
  background: var(--bg-soft); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0;
  fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
  legend { font-weight: 700; margin-bottom: .5rem; }
  label { display: block; margin: .4rem 0; }
  input[type=text], input[type=number], input[type=date], select { display: block; margin-top: .25rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; max-width: 100%; background: #fff; }
}
.calc__row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: flex-end; }
.calc__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; .button { margin: 0; } }
.calc__result { display: block; margin-top: 1rem; padding: 1rem; background: #fff; border-left: 4px solid var(--brand); border-radius: var(--radius); overflow-x: auto; &:empty { display: none; } > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } }
.calc__error { border-left-color: var(--accent); color: var(--accent); }
.calc__table { border-collapse: collapse; width: 100%; background: #fff; td, th { border: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; } }
.calc__chart { display: block; width: 100%; height: auto; margin-top: 1rem; }

@media (max-width: 1200px) {
  .site-header__stats { display: none; }
  .site-header__phone { margin-left: auto; }
}

@media (max-width: 900px) {
  .doctor-card, .clinic-card { grid-template-columns: 90px 1fr; }
  .clinic__header { grid-template-columns: 1fr; }
  .doctor-card__side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(120px, auto)); align-items: center; }
  .doctor__header { grid-template-columns: 1fr; }
  .home-columns { grid-template-columns: 1fr; }
  .expert-row { flex-direction: column; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; }
  .site-header__phone { display: none; }
  .site-footer__inner { flex-direction: column; }
  .call-button {
    display: block; position: sticky; bottom: 0; padding: .9rem; text-align: center;
    background: var(--brand); color: #fff; font-weight: 700; text-decoration: none;
  }
}