/* =====================================================================
   Правки под тему inmedical. Подключаются только на страницах сотрудников.
   ===================================================================== */

/*
 * Тема держит на обёртке overflow:hidden ради выезжающего меню. Любой overflow,
 * кроме visible и clip, создаёт контейнер прокрутки и отключает position:sticky
 * у всего внутри — липкий постер и якорное меню просто уезжают вверх.
 *
 * overflow:clip клипает так же, как hidden, но контейнера прокрутки не создаёт.
 */
.wrapper.st-body {
	overflow: clip;
}

/* =====================================================================
   Окно просмотра сканов и видео. В прототипе оно жило в разметке страницы;
   здесь создаётся скриптом, поэтому стили нужны свои.
   ===================================================================== */

.nnp-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 20, 24, .55);
}

.nnp-modal__box {
	position: relative;
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	padding: 22px;
	border-radius: 16px;
	background: #fff;
}

.nnp-modal--wide .nnp-modal__box {
	max-width: 900px;
}

.nnp-modal__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #5A6677;
}

.nnp-modal__title {
	margin: 0 0 12px;
	font-weight: 700;
}

.nnp-modal__media img,
.nnp-modal__media iframe {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 12px;
}

.nnp-modal__media iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

.nnp-modal__cap {
	margin-top: 10px;
	color: #5A6677;
	font-size: 14px;
}

/* Окно с формой записи Клиентикса — не видео.

   Пропорции 16/9 из правила выше сжимали форму в полосу: на телефоне при
   ширине окна 300px оставалось 170px высоты, и от формы была видна одна
   шапка со своими полосами прокрутки. Здесь пропорции снимаются, а окну
   задаётся высота — форма занимает его целиком. */
.nnp-modal--frame .nnp-modal__box {
	display: flex;
	flex-direction: column;
	max-width: 520px;
	height: 92vh;
	max-height: 760px;
	padding: 12px;
	overflow: hidden;
}

/* Место сверху — под крестик, чтобы он не лёг на шапку формы. */
.nnp-modal--frame .nnp-modal__media {
	flex: 1;
	min-height: 0;
	margin-top: 30px;
}

.nnp-modal--frame .nnp-modal__media iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 10px;
}

.nnp-modal--frame .nnp-modal__cap {
	display: none;
}

@media (max-width: 600px) {
	/* На телефоне форме нужен весь экран: у неё внутри свои шаги и прокрутка. */
	.nnp-modal--frame {
		padding: 8px;
	}

	.nnp-modal--frame .nnp-modal__box {
		max-width: none;
		height: 96vh;
		max-height: none;
		padding: 8px;
	}
}

/* Адресная строка мобильных браузеров съедает часть vh — dvh считает
   видимую высоту. Правило идёт следом: браузеры без поддержки его пропустят. */
@supports (height: 100dvh) {
	.nnp-modal--frame .nnp-modal__box {
		height: 92dvh;
	}

	@media (max-width: 600px) {
		.nnp-modal--frame .nnp-modal__box {
			height: 96dvh;
		}
	}
}

/* Подсказка «Все цены →» под ценой в постере.
   В прототипе её дорисовывал spec_data.js и вешал инлайновые стили, поэтому
   правила нет в profile.css — и не должно быть: тот файл генерируется
   bin/scope-css.py из макета, ручные правки затрутся. */
.nn-profile .poster__price-more{display:block;font-size:12px;font-weight:600;color:#337AE5;margin-top:4px;}
.nn-profile a.poster__price{text-decoration:none;}

/* Цена в постере — ссылка на прайс, а <a> по умолчанию строчный: вертикальные
   отступы у строчного элемента не работают, и блок цены прилипал к фактам
   (7px вместо 16px в макете, где это <div>). */
.nn-profile a.poster__price{display:block;}

/* Заголовок счётчика. В дизайн-системе он 700/24px, но лежит в .counter__head,
   а не в .pblock__head — специфичности не хватает, и тема перебивает его своим
   h2 (400/25px). Остальные заголовки блоков не трогаем: они и так 900/26px,
   как в макете. */
.nn-profile .counter__head h2{font-weight:700;font-size:24px;line-height:1.6;}

/* Скрытые до раскрытия специализации в постере. Правило нужно потому, что
   .poster__tag задаёт display, а он перебивает атрибут hidden. */
.nn-profile .poster__tag[hidden]{display:none;}

/* Раскрывающиеся блоки («Что входит в приём», маршрут, парковка).
   Тема inmedical задаёт свой межстрочный интервал (26.4px вместо normal) —
   кнопка вырастала с 51px до 70px и выглядела рыхлой. Её же правило добавляет
   иконкам margin-left:2px и vertical-align:middle, из-за чего стрелка справа
   стояла косо. Возвращаем поведение дизайн-системы. */
.nn-profile .contact-acc__head,
.nn-profile .contact-acc__head span,
.nn-profile .contact-acc__head .caret{line-height:normal;}
.nn-profile .contact-acc__head svg{margin:0;vertical-align:baseline;}

/* Слайдер команды на странице сотрудника — вариант из макета: карточка
   фиксированные 240px (влезает ~3.3 вместо ровно 4) и без прилипания при
   прокрутке. Обрезанная карточка у края — так и задумано: она показывает,
   что лента продолжается.

   Ширина одна на всех экранах: сверка мобильной версии 12.08 показала, что
   в макете карточка и на 360px те же 240px, а у нас она растягивалась до
   ширины ленты (279px) — соседняя карточка выглядывала меньше, чем задумано,
   и размер карточки скакал при смене ширины экрана. Прилипание отключаем
   только с 600px: на телефоне оно помогает попадать в карточку. */
.nn-profile .nnts--compact .nnts-track>*{flex:0 0 240px;}

@media (min-width:600px){
  .nn-profile .nnts--compact .nnts-track{scroll-snap-type:none;}
}

/* Стрелка аккордеона — сплошной треугольник вместо тонкого шеврона: штриховой
   вариант при 19px и толщине 2.2 попадал на дробные пиксели и выглядел рвано.
   Размер ужимаем: залитая фигура при том же боксе смотрится крупнее. */
.nn-profile .contact-acc__head .caret{width:19px;height:19px;color:var(--text-3);transition:transform .2s ease;}

/* Bootstrap 2 из темы рисует `.caret` треугольником из бордеров
   (border:4px 4px 0). Класс совпал с нашим, и поверх стрелки печатались
   «уголки» — их и было видно во всех аккордеонах. Бордеры гасим у любой
   нашей каретки, а не только в контактах. */
.nn-profile svg.caret{border:0;background:none;}

/* Своё правило для значка видео-визитки убрано (0.13.44): в дизайн-системе
   этот значок есть — `.scard__play`, и он уже перенесён в ds.css/profile.css.
   Карточка печатает его, а не самодельный `.scard__video`. */

/* Цитата в биографии. В макете она размечена классом `.bio-quote`, а из
   визуального редактора приходит голый <blockquote> — правило нужно на тег,
   иначе фирменная полоса слева не появится. Значения — из `.bio-quote`. */
.nn-profile .bio blockquote{border-left:3px solid var(--brand);padding:4px 0 4px 22px;margin:26px 0 6px;
  font-size:19px;line-height:1.6;font-style:italic;color:var(--ink);}
.nn-profile .bio blockquote p{margin:0;}

/* =====================================================================
   Фото-галерея филиала в контактах (.cphotos-gal).

   Эти правила жили НЕ в `profile_v2.css`, а в теге <style> самой страницы
   прототипа, поэтому `bin/scope-css.py` их не видел и перенос их не захватил.
   Без обёртки галерея филиала наследовала оформление галереи документов:
   портретные плитки 3/4 по 188 px вместо ландшафтных 3/2 по четверти ширины.

   Значения — как в прототипе, добавлен только скоуп `.nn-profile`.
   ===================================================================== */

.nn-profile .cphotos-gal{--gap:10px;margin:28px 18px 18px;}
.nn-profile .cphotos-gal .gallery{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px;position:static;}
.nn-profile .cphotos-gal .gallery__track{grid-column:2;gap:var(--gap);padding:2px 0;}
/* По три фотографии в ряд вместо четырёх — решение владельца от 12.08:
   при четырёх плитка мельчает и интерьер на ней не разобрать. Дальше вниз
   по ширине экрана — две и одна, как в макете. */
.nn-profile .cphotos-gal .gallery__item{flex:0 0 calc((100% - 2*var(--gap))/3);width:calc((100% - 2*var(--gap))/3);height:auto;aspect-ratio:3/2;border-radius:12px;overflow:hidden;}
.nn-profile .cphotos-gal .gallery__item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.nn-profile .cphotos-gal .rail__arrow{position:static;transform:none;width:42px;height:42px;min-width:42px;min-height:42px;flex:none;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:none;color:var(--primary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;}
.nn-profile .cphotos-gal .rail__arrow.l{grid-column:1;}
.nn-profile .cphotos-gal .rail__arrow.r{grid-column:3;}
.nn-profile .cphotos-gal .rail__arrow:hover{background:var(--blue-50);border-color:var(--primary);color:var(--primary);}
.nn-profile .cphotos-gal .rail__arrow svg{width:20px;height:20px;filter:none;}
.nn-profile .cphotos-gal .gallery__dots{grid-column:1 / -1;margin-top:10px;justify-content:center;}
@media (max-width:1023px){
  .nn-profile .cphotos-gal .gallery__item{flex:0 0 calc((100% - 1*var(--gap))/2);width:calc((100% - 1*var(--gap))/2);}
}
@media (max-width:767px){
  .nn-profile .cphotos-gal{--gap:8px;}
  .nn-profile .cphotos-gal .gallery{column-gap:8px;}
  .nn-profile .cphotos-gal .gallery__item{flex:0 0 100%;width:100%;aspect-ratio:16/9;}
  .nn-profile .cphotos-gal .rail__arrow{width:38px;height:38px;min-width:38px;min-height:38px;}
}

/* Схема проезда и схема парковки в контактах. В макете на их месте заглушка
   `.map-stub`, поэтому оформления загруженной картинки в дизайн-системе нет.
   Геометрию берём у заглушки: те же поля, скругление и рамка. */
.nn-profile .scheme{position:relative;display:block;margin:14px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--gray-50);}
/* Значок «увеличить» — те же значения, что у плиток галереи (profile.css). */
.nn-profile .scheme .zoom{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--primary);}
.nn-profile .scheme .zoom svg{width:15px;height:15px;}
.nn-profile .scheme img{display:block;width:100%;height:auto;}
.nn-profile .scheme+.map-stub{margin-top:12px;}

/* Видео маршрута — играет прямо в пункте «Как добраться?», как на странице
   контактов сайта. Вертикальную версию показываем на телефоне: снятый под
   широкий экран ролик там занимает полосу в четверть экрана. */
.nn-profile .nn-route{margin-top:14px;}
.nn-profile .nn-route__cap{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--text-2);}
.nn-profile .nn-route__frame{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;}
.nn-profile .nn-route__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.nn-profile .nn-route__frame--mb{display:none;aspect-ratio:9/16;max-width:340px;margin-inline:auto;}
@media (max-width:900px){
  .nn-profile .nn-route__frame--pc{display:none;}
  .nn-profile .nn-route__frame--mb{display:block;}
}

/* Каталог команды: карточки филиалов в нижнем блоке. В макете сетка
   асимметричная (слева клиники, справа стандарты и видео) — пока правой
   колонки нет, держим равные колонки, иначе второй филиал выглядит обрезанным. */
.nn-profile .nn-team-contacts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;}
.nn-profile .nn-team-contacts>.pblock{padding-top:0;border-top:0;}

/* Карточка сотрудника целиком ведёт на его страницу (обработчик в profile.js).
   В каталоге команды курсор задаёт макет, в слайдере правила не было. */
.nn-profile .nnts .scard{cursor:pointer;}
.nn-profile .nnts .scard__name{transition:color .15s;}
.nn-profile .nnts .scard:hover .scard__name{color:var(--primary);}

/* =====================================================================
   Слой всплывающих окон.

   Класс переименован с `.nn-modal` на `.nnp-modal` (0.14.7): на сайте уже
   есть свой элемент с точно таким же классом — снаружи плагина, с
   `display:none` и `z-index:1000000`. Наше окно открывалось, но оставалось
   невидимым: чужое правило гасило его показ. Отсюда же правило про запас —
   поднимаем наши окна выше баннера кук (9 999 999) и чужой модалки.
   ===================================================================== */
.nnp-modal{z-index:10000000;}
.nn-profile .lightbox{z-index:10000000;}

/* ===================== Правки страницы команды (0.19.0) ===================== */

/* ФИО в карточке: тёмное, синее только под курсором. Без этого правила ссылка
   наследовала синий цвет ссылок темы и вся сетка «горела» синим. */
.nn-profile .scard__name{color:var(--ink);text-decoration:none;transition:color .15s;}
.nn-profile .scard:hover .scard__name,
.nn-profile .scard__name:hover{color:var(--primary);}

/* Карточка сотрудника приёма печатает лид целиком — длинный текст выламывал
   сетку (кейс Жельверта). Три строки, дальше многоточие, как в макете. */
.nn-profile .scard__role{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Тема на hover перекрашивает текст ссылок в тёмный — на синих кнопках текст
   становился нечитаемым. Держим цвета кнопок своими в любом состоянии. */
.nn-profile a.btn--primary:hover, .nn-profile a.btn--primary:focus,
.nn-profile button.btn--primary:hover, .nn-profile button.btn--primary:focus,
.nn-profile .scard__cta:hover, .nn-profile .scard__cta:focus{color:#fff;}
.nn-profile a.btn--secondary:hover, .nn-profile a.btn--secondary:focus{color:var(--primary);}

/* Скрытые чипы «ещё N»: собственный display у .scard__chip перебивал бы
   атрибут hidden — фиксируем явно. */
.nn-profile .scard__chip[hidden]{display:none;}

/*
 * Лента якорей стоит ровно под шапкой темы. Плавный переход тут вреден:
 * пока он идёт, выехавшая шапка успевает накрыть меню — именно это и было
 * видно на десктопе. Значение --top-offset пересчитывает profile.js на каждом
 * кадре прокрутки, так что скачка всё равно не заметно.
 */
.nn-profile .pnav{transition:none;}

/* Фото в карточке ведёт на страницу сотрудника. Ссылка — прозрачный слой
   поверх картинки (см. card.php): правый клик по фото предлагает «Открыть
   ссылку», а не «Копировать изображение». Кнопка видео — слоем выше. */
.nn-profile .scard__photolink{position:absolute;inset:0;z-index:3;display:block;border-radius:inherit;outline:none;-webkit-tap-highlight-color:transparent;}
/* Накладка из обхода клавиатурой исключена (tabindex=-1): фокусная рамка ей
   не нужна, а по клику она рисовалась чёрным контуром вокруг всего фото.
   Клавиатуре остаётся ссылка-имя под фото, у неё рамка штатная. */
.nn-profile .scard__photolink:focus,
.nn-profile .scard__photolink:focus-visible{outline:none;box-shadow:none;}
.nn-profile .scard__play{z-index:4;}

/* Лента помещается целиком — стрелки и точки не нужны (класс ставит profile.js). */
.nn-profile .is-static .rail__arrow,
.nn-profile .is-static .gallery .rail__arrow,
.nn-profile .is-static .dots{display:none;}

/* Копии для бесконечной прокрутки не должны попадать в поиск по странице. */
.nn-profile [data-clone]{user-select:none;}

/* Строка «бесплатная парковка» со знаком — как в аккордеонах на главной. */
.nn-profile .nn-parkrow{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;}
.nn-profile .nn-parkrow__ic{flex:none;width:35px;height:41px;object-fit:contain;}
/* Значок маршрута — свои пропорции: метро лежачее, пешеход вертикальный.
   Бокс задан заранее (иначе до загрузки картинки строка схлопывается),
   вписывание оставляет object-fit из соседнего правила. */
.nn-profile .nn-parkrow__ic--route{width:48px;height:auto;max-height:52px;}
.nn-profile .nn-parkrow .contact-acc__text{margin:0;}

/* Галерея фотографий клиники в карточке сотрудника: четыре кадра в ряд.
   Ширина считается через ту же переменную --gap, что и базовое правило выше,
   иначе кадры разъезжаются: там ширина задана и flex-basis, и width. */
.nn-profile .cphotos-gal .gallery__item{
  flex:0 0 calc((100% - 3*var(--gap))/4);
  width:calc((100% - 3*var(--gap))/4);
}
@media (max-width:900px){
  .nn-profile .cphotos-gal .gallery__item{
    flex:0 0 calc((100% - 1*var(--gap))/2);
    width:calc((100% - 1*var(--gap))/2);
  }
}
@media (max-width:560px){
  .nn-profile .cphotos-gal .gallery__item{flex:0 0 100%;width:100%;}
}

/* На странице команды блок контактов уже — там три кадра в ряд.
   Правило идёт после «четырёх» и перебивает его только внутри .ccard. */
.nn-profile .ccard .cphotos-gal .gallery__item{
  flex:0 0 calc((100% - 2*var(--gap))/3);
  width:calc((100% - 2*var(--gap))/3);
}
@media (max-width:900px){
  .nn-profile .ccard .cphotos-gal .gallery__item{
    flex:0 0 calc((100% - 1*var(--gap))/2);
    width:calc((100% - 1*var(--gap))/2);
  }
}
/* На телефоне кадр один на всю ленту — как в общей галерее: правило «два в
   ряд» выше писалось для планшетной ширины и перебивало телефонное 100%. */
@media (max-width:767px){
  .nn-profile .ccard .cphotos-gal .gallery__item{
    flex:0 0 100%;
    width:100%;
    aspect-ratio:16/9;
  }
}


/* Ролик без обложки печатается плеером площадки — рамка повторяет плитку. */
.nn-profile .vblock__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0B2846;}
.nn-profile .vblock__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Свой значок принципа занимает место штатного, вписывается целиком.

   Правило стоит и на <picture>: конвертер WebP оборачивает картинку в него,
   и элементом флекс-строки становится обёртка, а не img. Без размера обёртка
   ужималась флексом до 7px, а max-width:100% не давал картинке вылезти из
   неё — значок выходил в толщину спички. */
.nn-profile .principle .principle__ic{flex:none;width:26px;height:26px;object-fit:contain;}
.nn-profile .principle>picture{flex:none;width:26px;height:26px;}
.nn-profile .principle>picture .principle__ic{width:100%;height:100%;}

/* Ровные цифры одной высоты.

   Сайт подключает вариативный Merriweather (css2, 300..900), а в его новой
   версии цифры по умолчанию «старостильные»: 3, 4, 5, 7, 9 свисают ниже
   строки — в стаже «38 лет» тройка стояла ниже восьмёрки. Включаем
   маюскульный набор цифр на всём контуре; свойство наследуется, отдельные
   элементы догонять не нужно. */
.nn-profile{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;}

/* Схемы проезда и парковки: широкая картинка на компьютере, вертикальная на
   телефоне. Переключение по CSS, а не через <picture> — см. пояснение в
   contacts.php. Когда мобильной версии нет, десктопная остаётся видимой
   на всех ширинах: одиночная картинка класса --mb не печатается вовсе. */
/* !important: оптимизатор CSS на сайте пересобирает стили, и без него
   правило проигрывало каскад — на компьютере оставались видны обе схемы. */
.nn-profile .scheme__img--mb{display:none!important;}
@media (max-width:900px){
  .nn-profile .scheme__img--mb{display:block!important;}
  /* Десктопная прячется, только когда у схемы есть мобильная пара (--dual). */
  .nn-profile .scheme--dual .scheme__img--pc{display:none!important;}
}

/* Горизонтальный жест на стрелке идёт в скрипт (свайп ленты, см. cards.js),
   вертикальный остаётся странице — прокрутку вниз стрелка не мешает. */
.nn-profile .rail__arrow,
.nn-profile .nnts-arrow,
.nn-profile .counter__arrow{touch-action:pan-y;}

/* Сенсорные устройства: один свайп — одна карточка.

   Обязательное прилипание с остановкой на каждой карточке: резкий жест не
   пролетает несколько карточек, а останавливается на следующей. Позиция
   после жеста всегда на границе карточки — перенос бесконечной петли
   ложится ровно, без «перескока на случайного врача». На компьютере, где
   листают колесом и стрелками, остаётся мягкое прилипание. */
@media (hover: none), (pointer: coarse) {
  .nn-profile .nnts-track,
  .nn-profile .rail__track,
  .nn-profile .gallery__track,
  .nn-profile .counter{scroll-snap-type:x mandatory!important;}
  .nn-profile .nnts-track>*,
  .nn-profile .rail__track>*,
  .nn-profile .gallery__track>*,
  .nn-profile .counter>*{scroll-snap-align:start;scroll-snap-stop:always;}
}

/* Карточка анимирует только тень и подъём при наведении — не размеры.

   В дизайн-системе у .scard стоит transition на все свойства. Когда скрипт
   выставляет карточкам ширину, они 0,2 с «перетекали» от старой к новой, а
   длина набора для бесконечной петли считалась в этот же миг — по ещё не
   доехавшей ширине. Петля получалась неверной длины, и перенос попадал на
   случайную карточку; на телефоне это выглядело как прыжки при свайпе. */
.nn-profile .scard,
.nn-profile .nnts .scard,
.nn-profile .nnts-track>*{transition-property:box-shadow,transform!important;}