:root {
  --navy-900: #011a4f;
  --navy: #02256b;
  --blue: #0072b1;
  --blue-100: #e6f1f8;
  --red: #d60c13;
  --red-50: #fdecec;
  --ink: #1a1f2b;
  --muted: #5c6b7a;
  --line: #e2e8ef;

  --container-width: 1280px;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --focus-color: var(--blue);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: var(--blue);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Шапка — два ряда: логотип/адрес/телефон/запись/соцсети/версия для слабовидящих сверху,
   меню + поиск снизу (по образцу референса Multi Clinic). Оба ряда прячутся по-разному на
   мобильном — см. медиа-запрос ниже. Раньше над шапкой была ещё тонкая полоса с номером
   лицензии и часами работы — заказчик попросил убрать (16.08.2026): и то, и другое
   остаётся на сайте (часы — на /kontakty и в блоке записи на главной, сама лицензия —
   документом на /dokumenty, того требует раздел 8.1 брифа про реестровую выписку, а не
   отдельная текстовая строка с номером), так что не потеря доступности, просто освободили
   верх страницы */

.site-header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  /* Выше, чем у .mobile-menu (z-index 150) — иначе раскрытое мобильное меню полностью
     перекрывает шапку вместе с кнопкой-гамбургером, и закрыть меню повторным тапом
     по гамбургеру физически невозможно (нечем — сама кнопка под белой подложкой меню),
     единственный выход — кликнуть по пункту меню, что и было замечено как баг */
  z-index: 160;
}

/* Фон растянут на всю ширину окна (не только до 1480px, как содержимое) — заказчик
   попросил именно так, отдельная обёртка вокруг .header-top-row специально под цвет */
.header-top-row-bg {
  background: var(--blue-100);
}

.header-top-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  max-width: 1480px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.logo-icon {
  width: 36px;
  height: 42px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-caption {
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.logo-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}

.header-address {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.85rem;
  flex: 0 1 220px;
  min-width: 0;
}

.header-address svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--muted);
}

.header-address span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-phone {
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.header-book-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.header-book-btn-short {
  display: none;
}

/* Заказчик специально просил бо́льший отступ до значков соцсетей, не капельку — margin-left:
   auto на обёртке забирает всё свободное место в строке, а не фиксированные несколько
   пикселей. Обёртка (не margin на самой первой иконке), чтобы порядок значков внутри
   (MAX слева от ВКонтакте) можно было менять, не переставляя, у какой из них -spaced */
.header-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.header-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  flex: 0 0 auto;
}

.header-social-icon svg {
  width: 18px;
  height: 18px;
}

.header-social-icon-img {
  width: 20px;
  height: 20px;
  display: block;
}

.header-social-icon:hover {
  background: var(--blue);
  color: #fff;
}

/* У MAX свой фирменный hover — не сплошной цвет, а градиент из официального лого
   (голубой → синий → фиолетовый), заканчивается «Пурпурной туманностью» #9500FF —
   заказчик прислал скриншот лого и явно попросил именно перелив, а не один оттенок */
.header-social-icon-max:hover {
  background: linear-gradient(135deg, #0fb0ff 0%, #1962ff 30%, #5225ff 60%, #9500ff 100%);
}

.header-divider {
  color: var(--muted);
  opacity: 0.5;
  flex: 0 0 auto;
}

.header-a11y-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.header-a11y-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.header-a11y-toggle:hover,
.header-a11y-toggle[aria-expanded="true"] {
  border-color: var(--blue);
  color: var(--blue);
}

.header-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 1.25rem 1rem;
  max-width: 1480px;
}

.main-nav {
  flex: 1;
  min-width: 0;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--navy);
  border-bottom-color: var(--blue);
}

.header-search {
  display: flex;
  align-items: center;
  flex: 0 0 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
}

.header-search input:focus {
  outline: none;
}

.header-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  align-self: stretch;
  border: 0;
  background: var(--blue-100);
  color: var(--blue);
  cursor: pointer;
  flex: 0 0 auto;
}

.header-search svg {
  width: 16px;
  height: 16px;
}

.mobile-search {
  margin-bottom: 1rem;
}

.mobile-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  /* Без этого реальная область нажатия была 44×20px — трём горизонтальным линиям
     .burger не хватает для этого высоты, потому что верхняя/нижняя линии сделаны
     через position:absolute (::before/::after) и не участвуют в расчёте высоты
     родителя. 44px — минимум под палец по рекомендациям Apple/Google */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease, top 0.2s ease;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
}

.burger::before {
  top: -6px;
}

.burger::after {
  top: 6px;
}

/* Гамбургер складывается в крестик, пока меню открыто — иначе непонятно, что по той
   же кнопке меню можно закрыть, а не только переходом по ссылке из списка */
.mobile-menu-toggle[aria-expanded="true"] .burger {
  background: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .burger::before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .burger::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #fff;
  padding: 1.5rem;
  /* Шапка теперь поверх меню (z-index 160) и остаётся видна поверх этой же области —
     без своего верхнего отступа первый пункт списка оказался бы под шапкой */
  padding-top: 4.5rem;
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.mobile-menu a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 1.05rem;
}

/* .mobile-menu a — специфичность (0,1,1) выше, чем у .btn-primary/.btn-accent
   (0,1,0) — без этого переопределения кнопки «Позвонить»/«Записаться» внутри меню
   красились в var(--ink) вместо белого, тёмный текст на тёмном фоне почти не читался */
.mobile-menu a.mobile-call,
.mobile-menu a.mobile-book {
  color: #fff;
}

.mobile-call,
.mobile-book {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
}

.no-scroll {
  overflow: hidden;
  /* position:fixed + top (сдвиг на scrollY, ставится в JS) — надёжнее, чем один
     overflow:hidden, на iOS Safari, где фон иначе всё равно тянется touch-скроллом
     позади полноэкранного мобильного меню */
  position: fixed;
  left: 0;
  right: 0;
}

/* Кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy-900);
}

.btn-accent {
  background: var(--red);
  color: #fff;
}

.btn-accent:hover {
  background: #b40a10;
}

.btn-secondary {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-secondary:hover {
  background: var(--blue-100);
}

.btn-large {
  padding: 0.85rem 1.7rem;
  font-size: 1.02rem;
}

.btn-small {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

/* Hero */

.hero {
  background: var(--blue-100);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  padding: 3rem 1.25rem;
}

.hero-text {
  min-width: 0;
}

.hero-text h1 {
  font-size: 2.2rem;
  color: var(--navy);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.hero-text p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 0;
}

.hero-stats dt {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
}

.hero-stats dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.hero-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #cfe0f5, #eef4fa);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Карусель фото центра в hero — абсолютно спозиционированные слайды с кросс-фейдом
   поверх .hero-media (aspect-ratio + overflow:hidden), а не translateX-лента, как у
   promo-carousel: тут всегда виден ровно один слайд, крутить нечего постранично. */
.hero-carousel-slides {
  position: absolute;
  inset: 0;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero-carousel-slide.is-active {
  opacity: 1;
}

.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.hero-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(2, 37, 107, 0.15);
}

.hero-carousel-dot.active {
  width: 20px;
  border-radius: 4px;
  background: #fff;
  transition: width 0.2s ease;
}

/* Секции */

.section {
  padding: 3.5rem 0;
}

.section-muted {
  background: #f7f9fb;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.section-heading h2 {
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 0.35rem;
}

.section-heading p {
  color: var(--muted);
  margin: 0;
}

.section-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.card-grid {
  display: grid;
  /* auto-fill, не auto-fit: с auto-fit единственная карточка в ряду (например, один
     сотрудник в «Административном персонале») растягивается на всю ширину контейнера,
     а вместе с ней и `.doctor-photo` — у неё aspect-ratio, привязанный к ширине, так что
     разъезжается ещё и по высоте. auto-fill просто оставляет пустые треки вместо растяжения */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Направления */

.direction-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.direction-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(2, 37, 107, 0.08);
}

.direction-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--blue);
  margin-bottom: 1rem;
}

.direction-icon svg {
  width: 22px;
  height: 22px;
}

.direction-card h3 {
  margin: 0 0 0.4rem;
  color: var(--navy);
  font-size: 1.05rem;
}

.direction-card p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.direction-price {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Компактный вариант карточки направления — только логотип-«пульс» + название, без
   описания и цены, в ряд, а не в столбик. Заказчик пожаловался, что на /napravleniya
   (21 направление) обычные карточки слишком высокие и приходится много листать.
   Модификатор, а не правка базового .direction-card/.direction-icon — те же классы
   используют пустые карточки-ссылки хабов (page.html, patsientam.html), которым
   компактный горизонтальный вид не подходит */
.direction-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .direction-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .direction-grid {
    grid-template-columns: 1fr;
  }
}

.direction-card-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.direction-card-compact h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* Белый фон у иконки-лого — заказчик отдельно попросил не серо-голубой квадрат,
   как у обычного .direction-icon, а именно белый (сама карточка и так белая, фон
   не нужен вовсе, но сохраняем фиксированный бокс ради ровного выравнивания) */
.direction-icon-logo {
  width: 36px;
  height: 36px;
  background: #fff;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.direction-icon-logo img {
  width: 20px;
  height: 24px;
  display: block;
}

/* Врачи */

.doctor-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.doctor-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Образование сотрудника из «Персонал» — свёрнуто по умолчанию (<details>, без JS), иначе
   у карточек с длинным списком курсов ПК поехала бы высота всего ряда сетки, раз соседние
   карточки короче. */
.staff-details {
  margin-top: 0.75rem;
}

.staff-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blue);
  font-size: 0.9rem;
}

.staff-details p,
.staff-details .rich-content p {
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  white-space: pre-line;
}

.doctor-photo {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #cfe0f5, #eef4fa);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

/* Надёжный паттерн для картинки во весь блок с aspect-ratio — абсолютное позиционирование,
   не обычный поток с height:100% (см. CLAUDE.md про .promo-card-media: на flex/grid-item
   с aspect-ratio высота потомка через height:100% разрешается ненадёжно, картинка иногда
   падает на свои натуральные пропорции вместо заданного соотношения контейнера) */
.doctor-photo img,
.doctor-profile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  color: var(--navy);
}

.doctor-position {
  margin: 0 0 0.3rem;
  color: var(--blue);
  font-size: 0.9rem;
}

.doctor-meta {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.badge-experience {
  display: inline-block;
  background: var(--blue-100);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 0.6rem;
}

/* Цены */

.price-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  scroll-margin-top: 5rem;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.price-table th {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.price-cell {
  text-align: right;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* Карточка акции/новости — переиспользуется в 4 местах: сетка /aktsii, карусель в конце
   Направлений/О клинике/Цены, одна featured-карточка на главной. Ссылка целиком, а не
   заголовок + отдельная кнопка — вся карточка кликабельна на страницу акции */
/* Чуть красноватый фон — чтобы акции сразу считывались как акции, не как обычные
   карточки. Те же цвета, что были у старого плоского .promo-banner до редизайна —
   уже проверенное сочетание, не выбивается из общей палитры (раздел 4 брифа) */
.promo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #f3b9bc;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--red-50);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.promo-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(2, 37, 107, 0.08);
}

/* aspect-ratio на флекс-элементе колонки + height:100% на потомке — известная нестыковка
   (высота, выведенная из aspect-ratio, не всегда считается "определённой" для разрешения
   процентной высоты потомка, поэтому картинка тогда падает на СВОИ собственные пропорции,
   а не 2:1 контейнера — так и было: у каждой карточки высота отличалась в зависимости от
   исходной картинки). Лечится position:absolute у img/плейсхолдера — тогда высота берётся
   от containing block (.promo-card-media, он position:relative), а не процентом от
   родителя в обычном потоке. */
.promo-card-media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: linear-gradient(160deg, #cfe0f5, #eef4fa);
  flex: 0 0 auto;
}

.promo-card-media img,
.promo-card-media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: #fff;
}

.promo-card-badge-dated {
  background: var(--red);
}

.promo-card-badge-open {
  background: var(--navy);
}

.promo-card-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.promo-card-body h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}

/* Ограничение в 2 строки — иначе длинное описание раздувает карточку по высоте сильнее,
   чем сама картинка; заказчик прислал скриншот, где карточка вышла заметно больше
   референса именно из-за этого */
.promo-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top: auto (не просто отступ) — иначе у карточек без короткого описания (нет
   <p>, которое обычно flex:1 и толкает ссылку вниз) кнопка "Подробнее" прилипала прямо
   под заголовком, а не к низу карточки как у остальных */
.promo-card-link {
  font-weight: 600;
  color: var(--blue);
  margin-top: auto;
  padding-top: 0.25rem;
}

/* Сетка на /aktsii — переменное число карточек, auto-fill (см. правило в CLAUDE.md) */
.promo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

/* Страница одной акции — текст + картинка рядом, у картинки своя разумная ширина, не тянется
   на всю оставшуюся колонку (иначе на широких экранах непропорционально огромная) */
.promo-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 2.5rem;
  align-items: start;
  margin: 1.5rem 0;
}

@media (max-width: 860px) {
  .promo-detail-layout {
    grid-template-columns: 1fr;
  }
}

.promo-detail-media img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.promo-detail-main {
  /* См. граблю в шапке файла — грид-трек minmax(0,...) не спасает сам по себе, нужен
     min-width:0 прямо на элементе с текстом (длинное название акции на узком экране) */
  min-width: 0;
}

.promo-detail-main .badge-experience {
  margin-bottom: 1rem;
}

.promo-detail-main .btn {
  margin-top: 1rem;
}

/* Карусель в конце Направлений/О клинике/Цены — своя лента с прокруткой через transform,
   стрелки лежат поверх карточек по краям, точки под лентой. Без внешних библиотек —
   раздел 2 брифа ограничивает зависимости, простой ванильный слайдер достаточно для 2–3
   карточек за раз. */
.promo-carousel {
  position: relative;
}

.promo-carousel-viewport {
  overflow: hidden;
}

.promo-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.3s ease;
}

.promo-carousel-card {
  flex: 0 0 calc(50% - 0.75rem);
  min-width: 0;
}

@media (max-width: 720px) {
  .promo-carousel-card {
    flex: 0 0 100%;
  }
}

.promo-carousel-arrow {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(2, 37, 107, 0.12);
  padding: 0;
}

.promo-carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.promo-carousel-arrow:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.promo-carousel-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.promo-carousel-prev {
  left: 0.6rem;
}

.promo-carousel-next {
  right: 0.6rem;
}

.promo-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}

.promo-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.promo-carousel-dot.active {
  background: var(--blue);
  width: 22px;
  border-radius: 4px;
  transition: width 0.2s ease;
}

/* Запись на приём */

.booking-grid {
  display: grid;
  /* auto-fit, не auto-fill: тут всегда ровно 2 карточки (Записаться онлайн / Позвонить
     в регистратуру), значит наоборот нужно тянуть их на всю ширину, а не оставлять
     пустой третий "фантомный" трек на широких экранах */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.booking-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.booking-card h3 {
  margin: 0 0 0.5rem;
  color: var(--navy);
}

.booking-card p {
  color: var(--muted);
  margin: 0 0 1rem;
}

.widget-fallback {
  background: var(--blue-100);
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--ink) !important;
}

.widget-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted) !important;
}

/* Отзывы — только настоящие ленты, без своей карточки-сводки ПроДокторов (заказчик
   попросил убрать её 18.08.2026, оставить только Яндекс и виджет «Колонка» с самого
   ПроДокторов — раньше тут ещё была наша карточка с рейтингом, теперь дублировала бы
   виджет «Колонка»). iframe Яндекса — широкая колонка (переехал сюда с /kontakty по
   просьбе заказчика), «Колонка» ПроДокторов — узкая, у неё для этого и название
   соответствующее. Рейтинг клиники в других местах сайта (шапка карточек врачей,
   статистика в hero) — из той же настройки `prodoctorov_rating`, не трогали. */
.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 720px) {
  .reviews-layout {
    grid-template-columns: 1fr;
  }
}

.reviews-layout .reviews-embed,
.reviews-layout .review-quote-widget {
  max-width: 560px;
}

.reviews-note {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Обёртка виджета отзывов ПроДокторов (widget_big) — сама разметка внутри
   стилизуется скриптом виджета с их домена, здесь только карточка-контейнер,
   чтобы не выглядело сиротливо, пока скрипт не подключен. */
.review-quote-widget {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: #fff;
}

.review-quote-widget .pd_powered_by {
  margin-top: 0.75rem;
}

.doctor-rating {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--ink);
}

.doctor-rating span {
  color: #f5a623;
}

.contacts-strip {
  display: grid;
  /* тоже всегда фиксированное число пунктов (адрес/режим/телефон/e-mail) — та же логика,
     что у .booking-grid выше */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.contacts-strip h3 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.contacts-strip p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

/* Дисклеймер про противопоказания */

.disclaimer-bar {
  background: #fff6e0;
  color: #7a5b00;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.6rem 1.25rem;
}

/* Подвал */

.site-footer {
  background: var(--navy);
  color: #cfe0f5;
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-col {
  min-width: 0;
}

.footer-col h2 {
  color: #fff;
  font-size: 0.95rem;
  margin: 0 0 0.9rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 0.55rem;
}

.footer-col a {
  color: #cfe0f5;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-requisites p {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.25rem;
  font-size: 0.8rem;
  color: #9fb4d6;
}

.footer-bottom p {
  margin: 0 0 0.4rem;
}

/* Мобильная адаптация */

@media (max-width: 1219px) {
  .header-nav-row,
  .header-address,
  .header-phone,
  .header-social,
  .header-divider,
  .logo-caption {
    display: none;
  }

  .header-a11y-toggle span {
    display: none;
  }

  .header-book-btn-full {
    display: none;
  }

  .header-book-btn-short {
    display: inline;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Подстраховка: если однажды не влезет (напр. очень длинный номер телефона в другой
     локали) — перенос на вторую строку, а не обрезание/наезд элементов друг на друга.
     В норме при текущем содержимом всё должно помещаться в одну строку и без этого.
     position:relative — точка отсчёта для .header-book-btn, который на мобильном
     стоит по центру абсолютным позиционированием (см. ниже) */
  .header-top-row {
    position: relative;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    flex-wrap: wrap;
  }

  /* По центру шапки независимо от logo/a11y/burger — обычный flex margin тут не даёт
     истинный центр (соседние элементы разной ширины), поэтому кнопка выходит из общего
     потока и центруется абсолютно. Кнопки a11y/бургер из-за этого не считают её ширину
     при своём margin-left:auto — ровно то, что нужно, они просто прижимаются к краю */
  .header-book-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
  }

  .header-a11y-toggle {
    padding: 0.5rem;
    /* Было 36×36 — чуть ниже рекомендованного минимума в 44px под палец */
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    /* Гамбургер после неё уже прижат к правому краю (флекс-элемент вплотную перед ним) —
       без этого a11y-кнопка оставалась там, где её поставил flex-start (сразу после
       «Записаться»), и между ней и гамбургером образовывался большой зазор */
    margin-left: auto;
  }
}

@media (max-width: 1219px) {
  .logo-icon {
    width: 28px;
    height: 33px;
  }

  .logo-name {
    font-size: 1.2rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-media {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Раздел 4 брифа: в мобильной версии красного меньше — только акцент-плашка */
  .btn-accent {
    background: var(--navy);
  }

  .btn-accent:hover {
    background: var(--navy-900);
  }
}

@media (max-width: 340px) {
  /* На самых узких экранах (320px, iPhone SE 1-го поколения) центрированная «Записаться»
     задевала кнопку доступности справа на ~7px — здесь чуть уже сама кнопка */
  .header-book-btn {
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-text h1 {
    font-size: 1.6rem;
  }
}

.page-lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0.5rem 0 2rem;
}

.breadcrumbs {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.breadcrumbs a {
  color: var(--muted);
}

.hint-text {
  color: var(--muted);
  font-size: 0.85rem;
}

.disclaimer-note {
  background: #fff6e0;
  color: #7a5b00;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

/* Страница со свободным контентом (о клинике, правила и т. п.) */

.content-page-inner {
  max-width: 820px;
  margin: 0 auto;
}

/* Карточки-ссылки на хабе «о клинике» — тот же .card-grid, что на /patsientam, но
   заказчик попросил карточки поменьше и фиксированные 3 колонки (для 5 карточек —
   3 в первой строке, 2 во второй), а не auto-fill из базового .card-grid */
.about-hub-grid,
.patsientam-grid {
  margin: 0 0 3rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .about-hub-grid,
  .patsientam-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .about-hub-grid,
  .patsientam-grid {
    grid-template-columns: 1fr;
  }
}

.direction-card-small {
  padding: 1.1rem 1.25rem;
}

.direction-card-small h3 {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.direction-card-small p {
  margin-bottom: 0;
  font-size: 0.85rem;
}

/* Хаб «Анализы» (napravlenie_detail.html, analizy_hub) — во всю ширину .container, не
   content-page-inner, специально ради места под картинку рядом с описанием (заказчик
   прислал референс с фото лаборатории). */
.analizy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.analizy-hero-text {
  min-width: 0;
}

.analizy-hero-text .page-lead {
  margin: 0;
}

.analizy-hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #cfe0f5, #eef4fa);
  border-radius: var(--radius);
  object-fit: cover;
}

@media (max-width: 720px) {
  .analizy-hero {
    grid-template-columns: 1fr;
  }
}

/* Страница кабинета — тот же принцип, что у .analizy-hero (текст слева, фото справа,
   aspect-ratio + object-fit прямо на <img>, без absolute-паттерна — надёжно и без него,
   раз ratio задан на самом img, а не на родителе для потомка через height:100%) */
.room-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.room-hero-text {
  /* Грабля из шапки файла: у грид-элемента с текстом всегда явный min-width:0, а не
     только minmax(0, ...) на треке — длинное название кабинета («Рентген-кабинет
     (стоматологический)») иначе не сжималось и вылезало на узких экранах */
  min-width: 0;
}

.room-hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #cfe0f5, #eef4fa);
  object-fit: cover;
}

@media (max-width: 720px) {
  .room-hero {
    grid-template-columns: 1fr;
  }
}

/* Три компактные ссылки-«таблетки» вместо высоких карточек с квадратной иконкой-плейсхолдером
   — заказчик попросил убрать иконку и сделать блоки меньше, в один ряд. flex-wrap, а не
   nowrap — на узких экранах должны переноситься, а не вылезать за край (см. грабли в
   CLAUDE.md про горизонтальное переполнение). */
.analizy-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 2.5rem;
}

.analizy-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.analizy-pill:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(2, 37, 107, 0.08);
}

.analizy-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

/* Кластер страниц «о клинике» (documenty/vakansii/uchrediteli) — сайдбар слева +
   контент справа. Внутри сайдбара .content-page-inner не центрируется отдельно —
   должен стоять вплотную к сайдбару, а не «плавать» по центру своей колонки. */
.content-page-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.content-page-layout .content-page-inner {
  margin: 0;
  max-width: 760px;
  min-width: 0;
}

@media (max-width: 860px) {
  .content-page-layout {
    grid-template-columns: 1fr;
  }
}

.content-sidebar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  align-self: start;
  position: sticky;
  top: 96px;
  /* Без этого — грабля из шапки этого файла (грид/флекс-элемент без min-width:0):
     на узких экранах (320px) сайдбар не сжимался меньше «естественной» ширины пункта
     меню («Правила предоставления платных услуг» и т.п.), тянул весь грид-трек шире
     контейнера и весь /dokumenty вылезал на 16px по горизонтали */
  min-width: 0;
}

@media (max-width: 860px) {
  .content-sidebar {
    position: static;
  }
}

.content-sidebar-title {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.content-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.content-sidebar-list a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}

.content-sidebar-list a:hover {
  background: var(--blue-100);
}

.content-sidebar-list a.active {
  background: var(--blue-100);
  border-left-color: var(--blue);
  color: var(--navy);
  font-weight: 600;
}

.content-page h1 {
  color: var(--navy);
  font-size: 2rem;
  margin: 0 0 1.5rem;
  text-align: center;
}

.rich-content h2 {
  color: var(--navy);
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
}

.rich-content h3 {
  color: var(--navy);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem;
}

.rich-content p {
  margin: 0 0 1rem;
  color: var(--ink);
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.rich-content li {
  margin-bottom: 0.4rem;
}

.rich-content img {
  border-radius: var(--radius);
  margin: 1rem 0;
}

/* Фильтр по специальности на странице врачей */

.status-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.status-tabs a {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px solid var(--line);
  background: #fff;
}

.status-tabs a.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Профиль врача — фото слева, имя/бейджи/кнопки записи и весь текст справа, по образцу
   референса (Multi Clinic). Уточнение заказчика после первой версии: фото должно
   оставаться на месте, пока описание прокручивается колесом — то есть снова
   position:sticky на колонке с фото (не как в самой первой правке этого же дня, которую
   потом откатили — тут заказчик посмотрел ещё раз внимательнее и описал именно
   закреплённое фото, с конкретными скриншотами разных положений скролла) */

.doctor-page-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .doctor-page-layout {
    grid-template-columns: 1fr;
  }
}

.doctor-profile-photo-col {
  position: sticky;
  top: 96px;
}

@media (max-width: 860px) {
  .doctor-profile-photo-col {
    position: static;
  }
}

.doctor-profile-photo-col .doctor-profile-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #cfe0f5, #eef4fa);
  position: relative;
  overflow: hidden;
}

.doctor-profile-main {
  min-width: 0;
}

.doctor-profile-main h1 {
  color: var(--navy);
  margin: 0 0 0.3rem;
  font-size: 1.7rem;
}

.doctor-profile-main .doctor-position {
  color: var(--muted);
  margin: 0 0 1rem;
}

.doctor-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.doctor-profile-badges .badge-experience {
  margin: 0;
}

.doctor-meta-pill {
  display: inline-block;
  background: var(--blue-100);
  color: var(--navy);
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}

a.doctor-meta-pill:hover {
  background: var(--blue);
  color: #fff;
}

.doctor-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

.doctor-profile-main .doctor-facts {
  margin-top: 0;
}

.form-note-public {
  background: var(--blue-100);
  color: var(--navy-900);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  margin: 1.5rem 0;
}

/* Один общий столбик, не карточки в сетке — заказчик прислал референс, где Образование,
   Сертификат, Аккредитация и т. д. читаются как один непрерывный текст, а не отдельные
   плашки. В админке это по-прежнему разные поля формы (легко заполнять по отдельности),
   здесь они просто идут подряд с жирным подзаголовком-подводкой перед каждым */
.doctor-facts {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 1.5rem 0;
}

.doctor-facts h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.4rem;
}

.doctor-facts p {
  margin: 0 0 0.3rem;
  color: var(--ink);
  white-space: pre-line;
}

.clamp-wrap .clampable {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  overflow: hidden;
}

.clamp-wrap .clampable.expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.clamp-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.3rem;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.clamp-toggle:hover {
  text-decoration: underline;
}

.supervisory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.supervisory-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.supervisory-card h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.supervisory-card p {
  margin: 0 0 0.3rem;
  color: var(--ink);
  font-size: 0.9rem;
}

.price-section-title {
  color: var(--navy);
  font-size: 1.3rem;
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 5rem;
}

.price-section-title:first-of-type {
  margin-top: 0;
}

.price-category {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}

.price-category-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
}

.price-category[open] .price-category-summary {
  margin-bottom: 0.75rem;
}

.price-category .price-table-wrap {
  margin-bottom: 0;
}

/* Контакты */

.contacts-map-block {
  margin: 2.5rem 0;
}

.contacts-map-block h2 {
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.map-embed,
.reviews-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-width: 0;
}

.map-embed iframe,
.reviews-embed iframe {
  display: block;
}

.map-embed-large iframe {
  height: 520px;
}

.home-map {
  margin-top: 1.5rem;
}

.documents-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.document-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.document-row:hover {
  border-color: var(--blue);
  background: var(--blue-100);
}

.document-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--blue);
}

.document-icon svg {
  width: 20px;
  height: 20px;
}

.document-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.document-title {
  font-weight: 600;
  color: var(--ink);
}

.document-type {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.document-open {
  flex: 0 0 auto;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.insurer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.insurer-card h3 {
  color: var(--navy);
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.insurer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.insurer-grid h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.insurer-grid p {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
}

/* Форма анкеты оценки качества */

.feedback-form {
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-top: 1.5rem;
}

.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.required {
  color: var(--red);
}

.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 1rem (16px), не 0.95rem — на iOS Safari фокус на поле с font-size < 16px сам
     зумит страницу; так браузер не трогает масштаб на самой обычной публичной форме
     сайта (анкета оценки качества) */
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
}

.field textarea {
  resize: vertical;
  min-height: 5rem;
}

.field-invalid input,
.field-invalid textarea {
  border-color: var(--red);
}

.field-error {
  color: var(--red);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.checkbox-row input {
  margin-top: 0.25rem;
}

.rating-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rating-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.rating-option:has(input:checked) {
  border-color: var(--navy);
  background: var(--blue-100);
}

.alert-success-block {
  background: #e9f7ee;
  border: 1px solid #bfe4cb;
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 560px;
}

.alert-success-block h2 {
  color: #1a7f37;
  margin: 0 0 0.5rem;
}

.form-error-block {
  max-width: 560px;
  margin-bottom: 1rem;
  color: var(--red) !important;
  background: var(--red-50);
}

/* Honeypot — спрятан классом, не inline-стилем (раздел 10.1) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Карта сайта */

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.sitemap-col {
  min-width: 0;
}

.sitemap-col h2 {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 0.7rem;
}

.sitemap-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sitemap-col a {
  color: var(--ink);
}

.sitemap-col a:hover {
  color: var(--blue);
}

/* Поиск по сайту */

.search-results {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-result-item h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}

.search-result-item p {
  margin: 0;
}

/* Уведомление о cookie */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
}

.cookie-notice-inner p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.88rem;
}

.cookie-notice-inner a {
  color: #cfe0f5;
}

.cookie-notice-inner .btn {
  flex: 0 0 auto;
}

/* Круглая плавающая кнопка Medflex рисует себя сама (round_widget_button.js,
   подключён в base.html) и по умолчанию всегда встаёт в левый нижний угол — это их
   код, мы её не создаём и не позиционируем изначально (см. TODO.md, уже было замечено
   как известная особенность — там же наложение на баннер cookie в левом углу).
   Заказчик попросил кнопку справа — переопределяем через !important, тем же способом,
   каким сама библиотека обычно расставляет left/bottom инлайн-стилем через JS. Не
   проверено вживую в этой среде (booking.medflex.ru заблокирован в песочнице по CSP/
   сети) — подтвердить на реальном телефоне после деплоя, при необходимости поправить
   правый отступ или сам селектор класса под то, что реально приходит от Medflex. */
.medflex-round-widget,
.medflex-round-widget__button {
  left: auto !important;
  right: 20px !important;
}

/* Пока баннер cookie ещё не закрыт (#cookie-notice без [hidden]), он перекрывает круглую
   кнопку виджета снизу — заказчик попросил поднять виджет повыше именно на это время.
   Баннер на мобильном ~148px высотой (реально измерено на 375px) — 170px даёт запас на
   более длинный текст/перенос на других ширинах. Не проверено вживую (Medflex заблокирован
   в этой песочнице сетью) — подтвердить после деплоя и поправить цифру при необходимости.
   :has() — Safari 15.4+/Chrome 105+ (2022), у более старых просто не применится правило,
   деградация до прежнего поведения, не поломка. */
body:has(#cookie-notice:not([hidden])) .medflex-round-widget,
body:has(#cookie-notice:not([hidden])) .medflex-round-widget__button {
  bottom: 170px !important;
}

/* Виды помощи по лицензии */

.licensed-services {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.licensed-services-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

.licensed-services-group summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}

.licensed-services-group ul {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
}

.licensed-services-group li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

@media (max-width: 700px) {
  .licensed-services-group ul {
    columns: 1;
  }
}

/* ==========================================================================
   Версия для слабовидящих (раздел 9 брифа) — своя реализация, без плагинов.
   Переключатели пишут атрибуты data-a11y-* на <html> (app/static/js/public.js),
   тема/шрифт/картинки/интервал хранятся в localStorage и применяются инлайновым
   скриптом в <head> ещё до отрисовки (base.html), чтобы не было вспышки обычной
   темы. Панель — кнопка на самом верху страницы, до основного контента.
   ========================================================================== */

.a11y-panel {
  background: #f4f6f9;
  border-bottom: 1px solid var(--line);
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-panel-inner {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.a11y-group {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.a11y-group legend {
  flex-basis: 100%;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0;
  margin-bottom: 0.2rem;
}

.a11y-panel button[data-a11y-set-theme],
.a11y-panel button[data-a11y-set-font],
.a11y-panel button[data-a11y-toggle-images],
.a11y-panel button[data-a11y-toggle-spacing] {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  height: fit-content;
}

.a11y-panel button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.a11y-reset {
  align-self: center;
  background: none;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Три ступени размера шрифта — весь сайт на rem, поэтому масштабируется целиком */
html[data-a11y-font="1"] {
  font-size: 112.5%;
}

html[data-a11y-font="2"] {
  font-size: 125%;
}

/* Увеличенный межбуквенный/межсловный интервал */
html[data-a11y-spacing="wide"] body {
  letter-spacing: 0.05em;
  word-spacing: 0.12em;
}

/* Отключение изображений — фотографии/декоративная графика убираются, тексту
   и виджетам (карта, запись, отзывы — отдельные встроенные документы) это не мешает */
html[data-a11y-images="off"] img {
  display: none;
}

/* Три альтернативные цветовые схемы — намеренно "радикальный" сброс всех цветов
   через универсальный селектор: сайт не переведён целиком на CSS-переменные для
   каждого оттенка (десятки точечных цветов у бейджей/плашек/градиентов), а точечный
   обход каждого случая ненадёжен и легко пропустить что-то мимо проверки контраста.
   Так — гарантированно 4.5:1 везде, как требует раздел 9, ценой того, что декоративные
   градиенты/тени пропадают в этих режимах (ожидаемо для версии для слабовидящих). */
html[data-a11y-theme="bw"],
html[data-a11y-theme="wb"],
html[data-a11y-theme="blue"] {
  --focus-color: var(--a11y-text);
}

html[data-a11y-theme="bw"] {
  --a11y-bg: #ffffff;
  --a11y-text: #000000;
  --a11y-link: #000000;
}

html[data-a11y-theme="wb"] {
  --a11y-bg: #000000;
  --a11y-text: #ffffff;
  --a11y-link: #ffffff;
}

html[data-a11y-theme="blue"] {
  --a11y-bg: #eaf2fb;
  --a11y-text: #0b2a52;
  --a11y-link: #003366;
}

html[data-a11y-theme="bw"] body,
html[data-a11y-theme="wb"] body,
html[data-a11y-theme="blue"] body {
  background: var(--a11y-bg) !important;
}

html[data-a11y-theme="bw"] body *,
html[data-a11y-theme="wb"] body *,
html[data-a11y-theme="blue"] body * {
  background-color: var(--a11y-bg) !important;
  background-image: none !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-a11y-theme="bw"] body a,
html[data-a11y-theme="wb"] body a,
html[data-a11y-theme="blue"] body a {
  color: var(--a11y-link) !important;
  text-decoration: underline !important;
}

html[data-a11y-theme="bw"] body .btn,
html[data-a11y-theme="wb"] body .btn,
html[data-a11y-theme="blue"] body .btn,
html[data-a11y-theme="bw"] body button,
html[data-a11y-theme="wb"] body button,
html[data-a11y-theme="blue"] body button {
  background: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
  border: 2px solid var(--a11y-text) !important;
  text-decoration: none !important;
}

html[data-a11y-theme="bw"] body .btn:hover,
html[data-a11y-theme="wb"] body .btn:hover,
html[data-a11y-theme="blue"] body .btn:hover,
html[data-a11y-theme="bw"] body button:hover,
html[data-a11y-theme="wb"] body button:hover,
html[data-a11y-theme="blue"] body button:hover {
  background: var(--a11y-text) !important;
  color: var(--a11y-bg) !important;
}

html[data-a11y-theme="bw"] body input,
html[data-a11y-theme="wb"] body input,
html[data-a11y-theme="blue"] body input,
html[data-a11y-theme="bw"] body textarea,
html[data-a11y-theme="wb"] body textarea,
html[data-a11y-theme="blue"] body textarea {
  background: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
  border: 1px solid var(--a11y-text) !important;
}

/* Виджеты и карта — отдельные встроенные документы (iframe), их палитру не трогаем,
   иначе Яндекс.Карты/Medflex/ПроДокторов визуально сломаются внутри себя */
html[data-a11y-theme="bw"] iframe,
html[data-a11y-theme="wb"] iframe,
html[data-a11y-theme="blue"] iframe {
  filter: none !important;
}