/* ==================================================================
 * Мобильная адаптация med-expert.ru
 *
 * Подключается ПОСЛЕ main.css и custom.css (см. include/head/styles.php),
 * поэтому при равной специфичности выигрывает по порядку каскада и
 * обходится без !important.
 *
 * Раскладка ПК не меняется: почти всё живёт внутри медиа-запроса до 767.9px.
 * Вне его — только то, что и должно работать на всех ширинах: видимый фокус
 * для клавиатуры, prefers-reduced-motion, скрытая до фокуса ссылка «Перейти
 * к содержимому» и наследование шрифта cookie-кнопкой, которая из <div>
 * стала <button>. Ни одно из этих правил вида ПК-страницы не меняет.
 *
 * Значения — из handoff-пакета mobile-redesign/DESIGN_SYSTEM.md.
 *
 * Чего здесь СОЗНАТЕЛЬНО нет, потому что уже есть в main.css:
 *   box-sizing: border-box (main.css:25) и img { max-width: 100% } (main.css:44);
 *   мобильная сетка columns__col-mob--*, .mob-menu, gap 15px у .columns.
 * ================================================================== */

/* ---------- Токены ---------------------------------------------- */

/* Только те значения, на которые здесь действительно ссылаются. Полная
   палитра и типографика описаны в DESIGN_SYSTEM.md пакета; дублировать её
   сюда переменными, которыми никто не пользуется, смысла нет — цвета уже
   заданы в main.css. */
:root {
	--mdx-text: #0e3449;
	--mdx-accent: #007c8e;
	--mdx-surface: #f2f4f6;
	--mdx-border: #e1e5ea;

	/* Минимальная зона нажатия, высота поля/основной кнопки и высота
	   кнопки списка — из DESIGN_SYSTEM.md пакета. */
	--mdx-tap: 44px;
	--mdx-control-h: 52px;
	--mdx-button-h: 48px;

	/* Боковые поля контейнера по ширинам. */
	--mdx-gutter: 24px;
}

@media only screen and (max-width: 479.9px) {
	:root {
		--mdx-gutter: 20px;
	}
}

@media only screen and (max-width: 374.9px) {
	:root {
		--mdx-gutter: 16px;
	}
}

/* ---------- Глобальное ------------------------------------------ */

/* img уже прикрыт в main.css, остальное переполняет контейнер на узких экранах. */
iframe,
video,
table {
	max-width: 100%;
}

/* Видимый фокус для клавиатуры. Специфичность намеренно низкая: правила
   Fancybox (.f-button:focus-visible и т.п.) остаются главнее. */
:focus-visible {
	outline: 2px solid var(--mdx-accent);
	outline-offset: 2px;
}

/* Пользователь просил меньше движения — выключаем анимации, а не ускоряем. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cookie-баннер: кнопка стала <button> вместо <div>. Браузер даёт кнопкам
   свой шрифт и размер, поэтому возвращаем наследование — вид не должен
   отличаться от прежнего ни на ПК, ни на мобильном. Размеры и цвета
   по-прежнему приходят из custom.css (.cookie-notice-button). */
.cookie-notice-button {
	font-family: inherit;
	line-height: inherit;
}

/* Ссылка «Перейти к содержимому»: не видна, пока на неё не встал фокус. */
.mdx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background-color: #fff;
	color: var(--mdx-text);
	font-size: 16px;
	font-weight: 500;
	border-radius: 0 0 10px 0;
	box-shadow: 0 2px 10px rgba(14, 52, 73, 0.25);
}

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

/* ---------- Мобильная раскладка --------------------------------- */

@media only screen and (max-width: 767.9px) {
	/* ---------- Типографика по DESIGN_SYSTEM.md пакета ---------- */

	/* Порядок правил важен: у H1 обычно оба класса (title title--page),
	   специфичность одинаковая, поэтому побеждает то, что ниже. Сначала
	   общий .title (H2), затем .title--page (H1). */

	/* H2: было 30px из main.css, по пакету 24px. */
	.title {
		font-size: 24px;
		line-height: 1.3;
	}

	/* H1: было 30px, по пакету 28px. */
	.title--page {
		font-size: 28px;
		line-height: 1.2;
	}

	/* Текст кнопок: main.css ужимает .button--wide до 12px, пакет требует
	   16px и на мобильном тоже. */
	.button {
		font-size: 16px;
	}

	/* Кроме шапки: там кнопки стоят в одном ряду с логотипом и бургером,
	   и на 320px строка помещается только при мелком тексте. Увеличение
	   вернуло бы горизонтальную прокрутку, из-за которой сайт обрезался. */
	.header .button {
		font-size: 12px;
	}

	/* Внутренние отступы карточек направлений: 30px по кругу и 42px снизу
	   съедали ширину узкого экрана. По пакету — 20px. */
	.services__article {
		padding: 20px;
	}

	/* ---------- Высоты контролов по DESIGN_SYSTEM.md ------------ */

	/* Поля ввода, списки и поиск: пакет требует 52px, на бою 37–49px. */
	.form__input,
	.form__select,
	.search__input,
	select,
	textarea {
		min-height: var(--mdx-control-h);
	}

	/* Основная кнопка 52px. Шапка снова исключена: её кнопки стоят
	   в одном ряду с логотипом и бургером и должны оставаться плотными. */
	main .button,
	.footer .button {
		min-height: var(--mdx-control-h);
	}

	/* Боковые поля 24 / 20 / 16px вместо фиксированных 23px из main.css. */
	.container {
		padding-left: var(--mdx-gutter);
		padding-right: var(--mdx-gutter);
	}

	/* iOS увеличивает масштаб страницы, если шрифт поля меньше 16px. */
	input,
	select,
	textarea {
		font-size: 16px;
	}

	/* Ссылки-телефоны, иконочные кнопки и переключатели — не меньше 44×44. */
	.mob-menu__burger,
	.bvi-open,
	.header__toolbar-btn-call {
		min-width: var(--mdx-tap);
		min-height: var(--mdx-tap);
	}

	/* main.css задаёт панели min-height: 35.4375rem (567px) без верхнего
	   предела. На iPhone SE (320×568) панель уходила за низ окна на 82px —
	   пустым белым полем под последним пунктом. Сами ссылки при этом
	   оставались видны, так что правка косметическая: панель прижимается
	   к содержимому и не торчит за экран.
	   overflow-y нужен на будущее: если пунктов меню станет больше, чем
	   помещается, панель прокрутится внутри себя, а не обрежется. */
	.mob-menu__content {
		max-height: calc(100vh - 5.1875rem);
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mob-menu__link {
		min-height: var(--mdx-tap);
	}

	/* ---------- Подвал ---------------------------------------- */

	/* Колонки подвала уже складываются в один столбец (columns__col-tab--12),
	   а вот кнопка оставалась узкой — 188px посреди пустой строки. */
	.footer .button {
		width: 100%;
	}

	/* Кнопка на всю ширину стоит в одной flex-строке с иконками соцсетей,
	   и та объявлена nowrap: 335px кнопки + 30px промежутка + 85px иконок
	   не помещались в 335px строки, иконки уезжали за правый край и тянули
	   за собой всю страницу (на детальной клиники документ разъезжался до
	   473px при экране 375). Подвал лежит вне .main-container, поэтому его
	   overflow-x: hidden это переполнение не обрезал.
	   Разрешаем строке переноситься: кнопка занимает свою строку, иконки
	   встают под ней. */
	.footer__bottom .flex {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* Ссылки в списках подвала были высотой 20px — вдвое меньше зоны нажатия.
	   Их 23 штуки, поэтому подвал заметно вырастет (примерно на 370px);
	   это осознанная плата за попадание пальцем. */
	.footer__menu-link {
		display: block;
		min-height: var(--mdx-tap);
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.footer__socials-link {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		min-width: var(--mdx-tap);
		min-height: var(--mdx-tap);
	}

	.footer__privacy,
	.footer__contacts,
	.tel--footer {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-tap);
	}

	/* ---------- Cookie-баннер ---------------------------------- */

	.cookie-notice-button {
		min-height: var(--mdx-tap);
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* На телефонах с «домашней полосой» баннер прижимался под неё. */
	.cookie-notice-container {
		padding-bottom: calc(15px + env(safe-area-inset-bottom));
	}

	/* ---------- Главная: значения из самого прототипа ------------ *
	 * Взяты не из пересказа в DESIGN_SYSTEM.md, а из renderVals()
	 * в Главная.dc.html — ветка mob (w < 768).
	 * ------------------------------------------------------------ */

	/* dirIcon 60 → 48px, dirIconMb 20 → 14px */
	.services__picture {
		width: 48px;
		height: 48px;
		margin-bottom: 14px;
	}

	/* newsPad: на ПК 40px 100px 55px, на мобильном 20px по кругу */
	.news {
		padding: 20px;
	}

	/* faqPad: на мобильном блок вопросов без собственных полей —
	   боковые уже даёт .container */
	.answer {
		padding: 0;
	}

	/* faqFont 20 → 17px, faqPadY 33/0/20 → 16/0/12.
	   !important нужен, потому что main.css задаёт этот отступ
	   через !important. Зона нажатия не страдает: вопрос занимает
	   две строки и остаётся выше 44px. */
	.answer__trigger {
		font-size: 17px;
		padding: 16px 0 12px !important;
	}

	/* cardPad адресов: 31px 36px → 20px */
	.article-address {
		padding: 20px;
	}

	/* h2mb: по типографскому своду отступ после заголовка 16px */
	h2.title {
		margin-bottom: 16px;
	}

	/* btnW: «Задать вопрос» на всю ширину */
	.answer__bottom .button {
		width: 100%;
	}

	/* mapH 396 → 260px. На бою карта занимала 571px — больше
	   половины экрана телефона. */
	.clinics-map__map,
	.clinics-map__map iframe {
		height: 260px;
		min-height: 260px;
	}

	/* ---------- Адреса клиник на главной ------------------------ */

	/* Поповер «режим работы» всплывал сбоку от карточки: custom.css задаёт
	   ему right: 120% без медиа-запроса. На ПК он помещается слева от
	   карточки, а на телефоне уезжал целиком за левый край экрана
	   (на 375px — в область −329..−47), и по нажатию на иконку не
	   появлялось ничего. Раскрываем его внутри карточки.

	   Растянуть поповер по ширине карточки мешает разметка: и он, и иконка
	   лежат в колонке span 1 — это 9px на телефоне. Поэтому снимаем с колонки
	   позиционирование, и поповер притягивается к самой карточке
	   (.article-address, она position: relative), а left/right: 0 дают ему
	   её полную ширину.

	   !important здесь вынужденный дважды: исходное правило в custom.css само
	   объявлено через !important, а position: relative у колонки приходит
	   инлайн-стилем, который обычным правилом не перебить. */
	.article-address > .columns__col--1 {
		position: static !important;
	}

	.article-address__popup {
		position: absolute !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin-top: 8px;
	}

	/* Список адресов был областью с собственной прокруткой высотой 396px
	   внутри и без того прокручиваемой страницы: попасть пальцем в нужную
	   полосу почти невозможно. Раскрываем список целиком. */
	.article-address__block-scroll {
		max-height: none;
		overflow-y: visible;
	}

	/* ---------- Каталоги ---------------------------------------- */

	/* «Найти» в фильтре врачей была 187px посреди пустой строки. Теперь
	   занимает всю ширину формы.

	   «Подробнее» в карточке клиники (251px) сознательно не растягиваем:
	   у неё уже стоит width--100, а узкой её делает колонка span 11 —
	   оставшийся span 1 занимает иконка режима работы. Растянуть кнопку
	   значит вытолкнуть иконку на отдельную строку и перестроить карточку. */
	.form__submit-btn {
		width: 100%;
	}

	/* «Показать еще» — 96×23px, мимо зоны нажатия. Ширину не трогаем:
	   это ссылка с пунктиром, а не кнопка-плашка, растягивать её не надо.
	   Два класса: в списках врачей стоит .show-more, в карточке врача —
	   только .show-more--dashed. */
	.show-more,
	.show-more--dashed {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-button-h);
	}

	/* Переключатели фильтра «Принимает детей» и «Выезд на дом» были
	   высотой 24px — палец в них не попадает. Сам чекбокс визуально
	   скрыт, кликабельна подпись, ей и добавляем высоту. */
	.form__label--switch {
		min-height: var(--mdx-tap);
	}

	/* Поиск по каталогу: подпись 38px, кнопка лупы 26px. */
	.search__label {
		min-height: var(--mdx-tap);
	}

	.search__button {
		min-width: var(--mdx-tap);
		min-height: var(--mdx-tap);
	}

	/* Табы «Для взрослых / Для детей» и «Направления / Врачи / Лицензии»
	   были высотой 23px. Ряд табов уже прокручивается по горизонтали
	   (.tabs__controls, overflow-x: scroll) — этого не трогаем. */
	.tabs__trigger {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-tap);
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	/* Телефоны, адреса, названия клиник и почта — 23–29px. Это основные
	   действия карточки: позвонить, открыть карту, перейти в клинику. */
	.article-address .link--green-dot,
	.article-address__header a,
	.article-address address a,
	.labs__item a,
	.page-intro__bottom-tel,
	.page-intro__bottom-mail,
	.page-intro__bottom-addr {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-tap);
	}

	/* ---------- Карточка врача ---------------------------------- */

	/* Строка с колонками врача объявлена шириной 150% прямо в шаблоне
	   (specialists.detail/template.php) — так на ПК в неё встают две
	   колонки по 400px. На телефоне она вылезала за экран и уносила
	   с собой календарь записи: правый край виджета обрезался, и часть
	   его была недоступна. !important нужен из-за инлайн-стиля. */
	.mdx-doc-cols {
		width: 100% !important;
		gap: 20px !important;
	}

	.appointment-root {
		width: 100% !important;
	}

	/* Кнопки карточки врача были 218 и 172px посреди пустой строки. */
	.docs-detail__card .button,
	.docs-detail__buttons .button {
		width: 100%;
	}

	/* ---------- Навигация разделов детальных страниц ------------ */

	/* Навигация «Об услуге / Врачи / Цены / Отзывы» на страницах направления,
	   услуги и клиники. Ряд уже прокручивается по горизонтали, но липким
	   не был, а страницы длинные — до нужного раздела приходилось
	   возвращаться наверх.

	   top: 0, а не высота шапки: на мобильном .header не фиксированный
	   (main.css переводит его в position: relative ниже 767.9px), он
	   уезжает вверх при прокрутке и перекрывать навигацию не может. */

	/* Без этой строки sticky не работает вовсе: overflow-x: hidden у
	   .main-container делает её контейнером прокрутки, и липкий элемент
	   начинает липнуть к ней, а не к окну. overflow-x: clip клипает так же,
	   но контейнера прокрутки не создаёт.
	   Браузеры без поддержки clip (Safari до 16) просто отбросят строку и
	   останутся с hidden: навигация не будет липкой, но ничего не сломается. */
	.main-container {
		overflow-x: clip;
	}

	.nav {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 500;
		background-color: #fff;
	}

	.nav__link {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-tap);
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	/* ---------- Форма отзыва ------------------------------------ */

	/* Звёзды рейтинга — 40×40. Иконка внутри остаётся 40px, растёт только
	   зона нажатия, поэтому вид не меняется. */
	.form__icon {
		min-width: var(--mdx-tap);
		min-height: var(--mdx-tap);
	}

	/* Подпись согласия на обработку данных — 32px. Чекбокс в ней 26×26,
	   и промахнуться мимо него легко. */
	.checkbox--square-agreement {
		min-height: var(--mdx-tap);
	}

	/* «Отправить» была 187px посреди пустой строки. */
	.review__form-btn {
		width: 100%;
	}

	/* Выбор клиники и ссылки на карту в виджете записи — 23–31px. */
	.appt-clinic-tabs button,
	.appointment-root a,
	.mdx-phone-link,
	.link--underline,
	.link-icon {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: var(--mdx-tap);
	}
}

/* ---------- Узкие экраны: 320–374px ------------------------------ *
 * main.css задаёт .main-container { min-width: 22.5rem } — жёсткий пол
 * в 360px. На экране 320px он не даёт странице сжаться, и вёрстка уезжает
 * за край: body { overflow-x: hidden } прячет прокрутку, но содержимое
 * при этом просто обрезается. Снимаем пол и укладываем ряд шапки в одну
 * строку — иначе кнопки переносятся и шапка вырастает со 177 до 229px.
 * Правила намеренно ограничены шириной < 375px: с 375px исходная
 * раскладка помещается сама и её трогать незачем.
 * ---------------------------------------------------------------- */

@media only screen and (max-width: 374.9px) {
	.main-container {
		min-width: 0;
	}

	.header-bottom .columns {
		-ms-grid-columns: auto 12px minmax(0, 1fr);
		grid-template-columns: auto minmax(0, 1fr);
		gap: 12px;
	}

	.header-bottom .columns > * {
		grid-column: auto;
	}

	.header-bottom__inner {
		min-width: 0;
	}

	.header__toolbar {
		gap: 8px;
		min-width: 0;
	}

	/* 100px — наибольший логотип, при котором «Скорая помощь» и «Запись
	   на прием» ещё встают в одну строку на 320px. */
	.header-bottom .logo {
		max-width: 100px;
	}

	.header-bottom .logo img {
		width: 100%;
		height: auto;
	}
}


/* ==================================================================
 * Фазы A и B структурной доработки (план от 06.08.2026).
 * Компоненты mdx-*: быстрые действия, компакт-шапка, нижняя панель,
 * вкладки Список/Карта, аккордеон адресов, компактные направления.
 * Разметку добавляют include-файлы и mobile.js; здесь — только вид.
 * ================================================================== */

/* Дубль телефона и «плюсиков» по всему сайту: у элементов версии для
   слабовидящих (.bvi-show) нигде нет правила скрытия по умолчанию, и они
   видны одновременно с обычными (.bvi-hide). bvi.min.css включает их
   через body .bvi-body .bvi-show { display:block !important }, так что
   скрытие по умолчанию режим для слабовидящих не ломает. */
.bvi-show {
	display: none;
}

/* Компоненты, живущие только на мобильном/планшете, по умолчанию скрыты. */
.mdx-quick,
.mdx-seg,
.mdx-all-link {
	display: none;
}

@media only screen and (max-width: 767.9px) {

	/* ---------- П4: направления компактным списком ------------- */
	/* Карточка с иконкой 48px и тремя строками описания (~200px)
	   становится строкой навигации: выбор направления — это переход,
	   а описание живёт на детальной странице. Только главная. */
	main.main--index .services__article {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		min-height: 56px;
	}

	main.main--index .services__article::after {
		content: "\203A";           /* › */
		font-size: 22px;
		line-height: 1;
		color: var(--mdx-accent);
		flex-shrink: 0;
	}

	main.main--index .services__picture {
		width: 36px;
		height: 36px;
		margin: 0;
		flex-shrink: 0;
		border-radius: 50%;
		overflow: hidden;
	}

	main.main--index .services__picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	main.main--index .services__title {
		flex: 1;
		margin: 0;
		font-size: 15px;
	}

	main.main--index .services__info {
		display: none;
	}

	.mdx-all-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: var(--mdx-button-h);
		margin-top: 6px;
		color: var(--mdx-accent);
		font-weight: 600;
		font-size: 15px;
	}

	/* ---------- П7: FAQ — четыре вопроса вместо девяти --------- */
	/* Шаблон patients.faq.list общий с разделом «Пациентам», поэтому
	   ограничение — только через main--index. Полный список и без того
	   доступен по существующей ссылке «Все ответы врачей». */
	main.main--index .answer__collapse > .collapse__wrapper:nth-of-type(n + 5) {
		display: none;
	}

	/* ---------- П2а: адреса аккордеоном ------------------------ */
	/* Свёрнутая карточка — только название и стрелка; mobile.js
	   добавляет кнопку и класс mdx-open. Попап режима работы исключён
	   из принудительного показа — им управляет собственный код. */
	main.main--index .article-address:not(.article-address--wide) > *:not(.article-address__header) {
		display: none;
	}

	/* custom.css держит карточку не ниже 185px — свёрнутая строка должна
	   сжиматься до заголовка. */
	main.main--index .article-address:not(.article-address--wide) {
		min-height: 0;
	}

	/* :not(.bvi-show) обязателен: без него раскрытие показывало бы и дубль
	   телефона для версии слабовидящих, который скрыт глобальным правилом. */
	main.main--index .article-address.mdx-open > *:not(.article-address__header):not(.article-address__popup):not(.bvi-show) {
		display: block;
	}

	main.main--index .article-address:not(.mdx-open) .article-address__popup-trigger {
		display: none;
	}

	main.main--index .article-address__header > a {
		flex: 1;
	}

	.mdx-acc-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--mdx-tap);
		height: var(--mdx-tap);
		margin-left: auto;
		border: 0;
		background: none;
		color: var(--mdx-accent);
		cursor: pointer;
		flex-shrink: 0;
	}

	.mdx-acc-btn::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -4px;
		transition: transform 0.2s;
	}

	.article-address.mdx-open .mdx-acc-btn::before {
		transform: rotate(-135deg);
		margin-top: 4px;
	}

	/* ---------- П2б: вкладки «Список | Карта» ------------------ */
	.mdx-seg {
		display: flex;
		background: #fff;
		border: 1px solid var(--mdx-border);
		border-radius: 12px;
		padding: 3px;
		margin-bottom: 16px;
	}

	.mdx-seg button {
		flex: 1;
		min-height: var(--mdx-tap);
		border: 0;
		background: none;
		border-radius: 9px;
		font-size: 14px;
		font-weight: 600;
		color: #6e7677;
		cursor: pointer;
	}

	.mdx-seg button[aria-selected="true"] {
		background: var(--mdx-accent);
		color: #fff;
	}

	main.main--index.mdx-view-map .clinics-map .columns__col--8 {
		display: none;
	}

	main.main--index:not(.mdx-view-map) .clinics-map .columns__col--4 {
		display: none;
	}

	/* ---------- П3: быстрые действия под баннером -------------- */
	.mdx-quick {
		display: block;
		margin-bottom: 30px;
	}

	.mdx-quick__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.mdx-quick__item {
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: var(--mdx-surface);
		border-radius: 12px;
		padding: 14px;
		min-height: 84px;
		font-weight: 600;
		font-size: 14px;
		color: var(--mdx-text);
	}

	.mdx-quick__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--mdx-accent);
	}

	.mdx-quick__icon svg {
		width: 16px;
		height: 16px;
		fill: #fff;
	}

	/* ---------- П6: первый экран врача (макет согласован) ------- */
	/* Колонка фото становится строкой: портрет 118×150 слева, блок
	   фактов (специальность/стаж/возраст, шаблонный .mdx-doc-facts)
	   справа, кнопка записи переносится на всю ширину ниже. Исходные
	   строки данных в правой карточке скрываются — это те же
	   переменные шаблона, текст не расходится. */
	.docs-detail .columns__col--4 {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		align-items: flex-start;
	}

	.docs-detail__picture {
		flex: 0 0 118px;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	.docs-detail__picture img {
		width: 118px;
		height: 150px;
		object-fit: cover;
		object-position: top;
		border-radius: 12px;
	}

	.mdx-doc-facts {
		flex: 1;
		min-width: 0;
		padding-top: 2px;
	}

	.mdx-doc-facts > div {
		display: flex;
		align-items: center;
		gap: 9px;
		margin-bottom: 9px;
		font-size: 14.5px;
	}

	.mdx-doc-cta {
		width: 100%;
	}

	.mdx-doc-cols .docs-detail__links--top {
		display: none;
	}

	/* Старая пара кнопок «Записаться на прием» (вела на пустой якорь
	   #appointment) и «Оставить отзыв» — обе теперь на первом экране,
	   старый блок скрыт, чтобы не было двух больших кнопок записи. */
	.docs-detail__card-wrapper-btns {
		display: none;
	}

	.mdx-doc-review {
		width: 100%;
		justify-content: center;
		min-height: var(--mdx-tap);
	}

	/* Ссылка «Все ответы врачей» — последняя зона нажатия ниже 40px
	   по сквозному аудиту. */
	.answer__bottom-link {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	/* ---------- Типографский свод: ритм секций ------------------ */
	/* Отступы между блоками задавались парами утилит mb-N и mbm-N и
	   скакали от 30 до 105px. Единый ритм — 40px. Специфичность выше
	   утилит, поэтому перекрываются обе; секции без mb-класса (обёртки
	   крошек) не затронуты.
	   Осторожно с текстом таких комментариев: сочетание «звёздочка/слэш»
	   в первой версии закрывало комментарий посреди фразы, и парсер
	   съедал правило ниже. */
	.main .section[class*="mb-"] {
		margin-bottom: 40px;
	}

	/* ---------- Календарь записи: плотнее ----------------------- */
	.appt-calendar-mini .calendar__body {
		gap: 12px;
	}

	.calendar__head--calendar .calendar__part {
		padding: 10px 12px;
	}

	.calendar__hour {
		padding: 12px;
	}

	.calendar__body--final-text {
		margin-top: 14px;
		padding: 8px 14px;
	}

	.appt-clinic-tabs button {
		min-height: 40px;
	}

	/* ---------- П1: нижняя панель записи ----------------------- */
	.mdx-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		display: flex;
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--mdx-border);
		box-shadow: 0 -6px 24px rgba(14, 52, 73, 0.12);
		transform: translateY(110%);
		transition: transform 0.25s;
	}

	html.mdx-bar-on .mdx-bar {
		transform: translateY(0);
	}

	.mdx-bar__call {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--mdx-button-h);
		height: var(--mdx-button-h);
		border: 1.5px solid var(--mdx-accent);
		border-radius: 50%;
		flex-shrink: 0;
	}

	.mdx-bar__call svg {
		width: 18px;
		height: 18px;
		fill: var(--mdx-accent);
	}

	.mdx-bar__cta {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--mdx-button-h);
		background: var(--mdx-accent);
		border-radius: 24px;
		color: #fff;
		font-weight: 600;
		font-size: 15px;
	}

	/* Подвал не должен прятаться за панелью. */
	html.mdx-has-bar body {
		padding-bottom: calc(70px + env(safe-area-inset-bottom));
	}
}

@media (min-width: 768px) {
	.mdx-bar {
		display: none;
	}
}

/* ---------- П5: компактная шапка после прокрутки ---------------- *
 * Работает на всех ширинах с бургером (<1200px): обычная шапка на
 * мобильном не фиксирована и уезжает вместе с телефоном и записью.
 * Появление управляет mobile.js классом mdx-chdr-on на html.
 * ---------------------------------------------------------------- */

@media (max-width: 1199.9px) {
	.mdx-chdr {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		padding-top: calc(8px + env(safe-area-inset-top));
		background: #fff;
		box-shadow: 0 2px 14px rgba(14, 52, 73, 0.12);
		transform: translateY(-110%);
		transition: transform 0.25s;
	}

	html.mdx-chdr-on .mdx-chdr {
		transform: translateY(0);
	}

	/* Серая служебная полоса (.header-top) на мобильном сама по себе
	   position:fixed с z-index 999 и перекрывала планку: телефон и бургер
	   в ней есть, а записи нет. Планка её ЗАМЕНЯЕТ, а не дополняет.
	   visibility, а не display: внутри полосы живёт панель меню, и её
	   нужно вернуть видимой, иначе открытое из планки меню исчезло бы. */
	html.mdx-chdr-on .header-top {
		visibility: hidden;
	}

	/* У .mob-menu в main.css собственное visibility:visible — оно
	   перебивает наследование, и бургер полосы просвечивал под планкой.
	   Прячем блок явно, а панель возвращаем правилом ниже. */
	html.mdx-chdr-on .header-top .mob-menu {
		visibility: hidden;
	}

	html.mdx-chdr-on .header-top .mob-menu__content {
		visibility: visible;
	}

	.mdx-chdr__logo {
		margin-right: auto;
	}

	.mdx-chdr__logo img {
		height: 30px;
		width: auto;
		display: block;
	}

	.mdx-chdr__tel {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1.5px solid var(--mdx-accent);
		border-radius: 50%;
		flex-shrink: 0;
	}

	.mdx-chdr__tel svg {
		width: 16px;
		height: 16px;
		fill: var(--mdx-accent);
	}

	.mdx-chdr__cta {
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 16px;
		background: var(--mdx-accent);
		border-radius: 22px;
		color: #fff;
		font-weight: 600;
		font-size: 13px;
		white-space: nowrap;
	}

	/* На страницах с нижней панелью запись уже есть — не дублируем. */
	html.mdx-has-bar .mdx-chdr__cta {
		display: none;
	}

	.mdx-chdr__burger {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: var(--mdx-tap);
		height: var(--mdx-tap);
		border: 0;
		background: none;
		cursor: pointer;
	}

	.mdx-chdr__burger span {
		width: 20px;
		height: 2px;
		background: var(--mdx-text);
		border-radius: 1px;
	}

	/* Липкая навигация разделов не должна прятаться под планку. */
	html.mdx-chdr-on .nav {
		top: calc(56px + env(safe-area-inset-top));
	}

	/* Панель меню становится полноэкранной: с компакт-шапкой бургер
	   доступен из любого места страницы, а прежняя панель была
	   привязана к верху документа и на прокрученной странице
	   оказывалась вне экрана. */
	.mob-menu__content {
		position: fixed !important;
		top: 0 !important;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		/* Без собственного слоя панель (z-index: auto) рисовалась ПОД
		   затемнением: бэкдроп добавляется в конец body и в порядке
		   документа идёт позже. 1300 — слой панели меню по шкале пакета. */
		z-index: 1300;
	}

	/* Затемнение — отдельный элемент, который mobile.js вставляет в body.
	   Псевдоэлемент с z-index:-1 не годится: отрицательные слои рисуются
	   ПОСЛЕ фона родителя, и затемнение ложилось поверх белой подложки
	   панели.

	   z-index 950, а не «выше панели минус один»: панель живёт ВНУТРИ
	   .header, а у того z-index: 999 — свой stacking-контекст. Любой
	   z-index панели действует только внутри него, поэтому бэкдроп в body
	   обязан быть НИЖЕ 999, иначе накрывает всю шапку вместе с панелью.
	   Контент страницы (z auto) он при этом затемняет. Клик по затемнению
	   закрывает меню и не проваливается на контент. */
	.mdx-backdrop {
		position: fixed;
		inset: 0;
		z-index: 950;
		border: 0;
		padding: 0;
		background: rgba(14, 52, 73, 0.45);
	}
}

@media (min-width: 1200px) {
	.mdx-chdr {
		display: none;
	}
}


/* ==================================================================
 * Доводка по голосовым замечаниям от 06.08.2026: новости-карусель,
 * компактные карточки клиник, подвал, фильтр врачей, услуги врача.
 * Решения согласованы по иллюстрированному плану (варианты «А»).
 * ================================================================== */

/* Кнопка «Фильтры» существует только на мобильном. */
.mdx-filter-btn {
	display: none;
}

@media only screen and (max-width: 767.9px) {

	/* ---------- Г1-А: новости каруселью со свайпом -------------- */
	/* Разметка новостей главной — вертикальный столбец карточек в
	   .news__inner (шаблон patients.news.list). Превращаем его в
	   горизонтальную ленту со scroll-snap: карточка 80% ширины, край
	   следующей подсказывает жест, фото сжато до 16:9. Описание уже
	   ограничено тремя строками собственным классом card__text-lc--3. */
	main.main--index .news__inner {
		display: flex;
		/* main.css задаёт .news__inner flex-direction: column — без
		   явного row карточки так и оставались стопкой. */
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	main.main--index .news__inner::-webkit-scrollbar {
		display: none;
	}

	main.main--index .news__inner > .card {
		flex: 0 0 80%;
		scroll-snap-align: start;
		height: auto;
	}

	main.main--index .news__inner .card__picture {
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
		overflow: hidden;
	}

	main.main--index .news__inner .card__picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---------- Г2: переключатель и карточки клиник ------------- */
	/* Кнопки сегмента наследовали чужую типографику, и подпись
	   уползала за край. Полная изоляция: флекс-центровка и явные
	   шрифт/межстрочный. */
	.mdx-seg button {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: inherit;
		font-size: 14px;
		line-height: 1.2;
		margin: 0;
		padding: 10px 8px;
		-webkit-appearance: none;
		appearance: none;
	}

	/* Карточка-строка: свёрнутая — 48px заголовка, без воздуха. */
	main.main--index .article-address:not(.article-address--wide) {
		padding: 2px 16px;
	}

	main.main--index .article-address.mdx-open {
		padding-bottom: 14px;
	}

	/* Межкарточный зазор: у контейнера списка gap 30px из main.css —
	   вместе с margin карточек между строками зияло 40px. Оставляем
	   один источник зазора — 8px на контейнере. */
	main.main--index .article-address__block-scroll {
		gap: 8px;
	}

	main.main--index .article-address:not(.article-address--wide) {
		margin-bottom: 0;
	}

	main.main--index .article-address:not(.mdx-open) .article-address__header {
		margin-bottom: 0;
	}

	main.main--index .article-address__header {
		min-height: 48px;
	}

	main.main--index .article-address__header > a {
		font-size: 15px;
	}

	/* Внутренности раскрытой карточки — плотный ритм. */
	main.main--index .article-address .link--green-dot {
		min-height: 36px;
		margin: 0;
	}

	main.main--index .article-address address a,
	main.main--index .article-address address div {
		min-height: 36px;
		font-size: 14px;
	}

	/* ---------- Г3: подвал -------------------------------------- */
	.footer__socials {
		gap: 12px;
	}

	/* Верхний уровень меню подвала — заголовок группы капителью,
	   вложенные пункты — ровные строки 40px. Убирает «пляску»
	   размеров, на которую вы указали. */
	.footer .footer__menu-list > .footer__menu-item > .footer__menu-link {
		font-size: 12px;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: #8da7b6;
		font-weight: 600;
		min-height: 34px;
		padding: 14px 0 2px;
	}

	.footer .footer__menu-list--inner .footer__menu-link {
		font-size: 15px;
		min-height: 40px;
		padding: 6px 0;
	}

	.footer .tel--footer {
		font-size: 22px;
		font-variant-numeric: tabular-nums;
	}

	.footer__copyright p,
	.footer__privacy {
		font-size: 13.5px;
	}

	/* ---------- В1-А: фильтр врачей за кнопкой ------------------ */
	/* Поле поиска по фамилии остаётся видимым; списки, переключатели
	   и «Найти» скрыты до нажатия «Фильтры». Класс вешает mobile.js,
	   поэтому без JS фильтр остаётся полностью развёрнутым. */
	.mdx-filters-collapsed .form__select-label,
	.mdx-filters-collapsed .form__label--switch,
	.mdx-filters-collapsed .form__submit-btn {
		display: none;
	}

	.mdx-filter-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: var(--mdx-button-h);
		margin: 12px 0 0;
		padding: 0 16px;
		border: 1.5px solid var(--mdx-accent);
		border-radius: 12px;
		background: none;
		color: var(--mdx-accent);
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	/* Шеврон — бордерами, никаких эмодзи и картинок. */
	.mdx-filter-btn::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -4px;
		transition: transform 0.2s;
	}

	.mdx-filter-btn[aria-expanded="true"]::after {
		transform: rotate(-135deg);
		margin-top: 4px;
	}

	/* ---------- В3: услуги врача компактнее --------------------- */
	.price-block .link-row {
		padding: 14px 16px;
		margin-bottom: 10px;
	}

	.price-block .price-block__title {
		font-size: 15px;
		line-height: 1.35;
		margin: 0 0 10px;
	}

	.price-block .price-block__content--right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.price-block .price-block__content--right .fz--24 {
		font-size: 18px;
	}

	.price-block .price-block__content--right .button {
		min-height: 40px;
		width: auto;
		padding: 0 18px;
		font-size: 14px;
	}

	/* Таб с названием клиники над списком цен. */
	.price-block__content-tab {
		min-height: var(--mdx-tap);
		display: flex;
		align-items: center;
	}
}