/* ============================================================
   СТРАНИЦА КЛИНИКИ — база: общие для секций примитивы.

   Отдельный бандл от главной (см. local/include/sx/hospital/shell.php):
   шапка и подвал нового дизайна стоят на всех страницах сайта и тянут
   бандл local/assets/sx — стили одной страницы туда класть нельзя.

   Шрифты, токены (--sx-*) и сброс .sx-scope приезжают из бандла главной,
   он подключается раньше. Пути к общим картинкам и иконкам пишем
   АБСОЛЮТНО: ../icons/ указывал бы внутрь sx-hospital, где их нет.

   Файлы parts/*.css склеиваются по алфавиту (inc/assets.php) —
   один файл на блок страницы, префикс задаёт каскад.
   ============================================================ */

/* Голубая зона: шапка + герой + карточки-справка. Отступ снизу даёт
   секция карточек, поэтому у обёртки его гасим. Низ зоны скруглён —
   так она отделяется от белого контента под ней. */
.sx-hosp-top{padding-bottom:0;border-radius:0 0 32px 32px;}

/* ---- Фирменная форма: фаска слева сверху и справа снизу ------------- */
/* Та же фигура, что у карточек блока «Почему нас выбирают» на главной
   (.sx-why-card--stat, parts/06-why.css): два угла срезаны под 45°, два
   других скруглены, и САМИ СТЫКИ ФАСКИ ТОЖЕ СКРУГЛЕНЫ тем же радиусом —
   без этого срез выглядит слишком резким.

   Дуга стыка набрана тремя хордами по 15° (отклонение от окружности 0.2px
   при r=32): так clip-path остаётся адаптивным (calc/%), чего не умеют ни
   path(), ни SVG-маска фиксированного размера. Коэффициенты при радиусе —
   геометрия угла 135°: точка на ребре отступает от вершины на
   r/tg67.5°=.414214r, точка на диагонали — на .292893r по каждой оси.
   Формулы 1:1 из 06-why.css, менять их надо в обоих местах сразу.

   Настройки: --sx-cut — размер фаски, --sx-cut-radius — радиус скруглений. */
.sx-cut{
  --sx-cut:64px;
  --sx-cut-radius:32px;
  --sx-c-edge:calc(var(--sx-cut) + var(--sx-cut-radius) * .414214);
  --sx-c-arc1a:calc(var(--sx-cut) + var(--sx-cut-radius) * .155395);
  --sx-c-arc1b:calc(var(--sx-cut-radius) * .034074);
  --sx-c-arc2a:calc(var(--sx-cut) - var(--sx-cut-radius) * .085786);
  --sx-c-arc2b:calc(var(--sx-cut-radius) * .133975);
  --sx-c-diaga:calc(var(--sx-cut) - var(--sx-cut-radius) * .292893);
  --sx-c-diagb:calc(var(--sx-cut-radius) * .292893);
  /* скруглены только правый верхний и левый нижний — два других срезаны */
  border-radius:0 var(--sx-cut-radius) 0 var(--sx-cut-radius);
  clip-path:polygon(
    var(--sx-c-edge) 0, 100% 0,
    100% calc(100% - var(--sx-c-edge)),
    calc(100% - var(--sx-c-arc1b)) calc(100% - var(--sx-c-arc1a)),
    calc(100% - var(--sx-c-arc2b)) calc(100% - var(--sx-c-arc2a)),
    calc(100% - var(--sx-c-diagb)) calc(100% - var(--sx-c-diaga)),
    calc(100% - var(--sx-c-diaga)) calc(100% - var(--sx-c-diagb)),
    calc(100% - var(--sx-c-arc2a)) calc(100% - var(--sx-c-arc2b)),
    calc(100% - var(--sx-c-arc1a)) calc(100% - var(--sx-c-arc1b)),
    calc(100% - var(--sx-c-edge)) 100%,
    0 100%,
    0 var(--sx-c-edge),
    var(--sx-c-arc1b) var(--sx-c-arc1a),
    var(--sx-c-arc2b) var(--sx-c-arc2a),
    var(--sx-c-diagb) var(--sx-c-diaga),
    var(--sx-c-diaga) var(--sx-c-diagb),
    var(--sx-c-arc2a) var(--sx-c-arc2b),
    var(--sx-c-arc1a) var(--sx-c-arc1b));}

/* ---- Кнопка-контур (вторая кнопка героя) ---------------------------- */
.sx-hosp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:56px;padding:12px 32px;border:1px solid #4c7dff;border-radius:12px;
  color:#4c7dff;font-weight:500;font-size:18px;line-height:1.05;letter-spacing:.9px;text-transform:uppercase;
  transition:background .15s ease,color .15s ease;}
.sx-hosp-btn-ghost:hover{background:#4c7dff;color:#fff;}

/* ---- Квадратная кнопка-стрелка 32×32 (карточки, «все отделения») ----- */
.sx-hosp-etc{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid #4c7dff;border-radius:8px;
  transition:background .15s ease;}
/* arrow-sm.svg смотрит ВЛЕВО (в общем бандле им листают карусели назад),
   здесь нужна стрелка «дальше» — разворачиваем по горизонтали. */
.sx-hosp-etc__arr{width:7px;height:12px;background-color:#4c7dff;transform:scaleX(-1);
  -webkit-mask:url(/local/assets/sx/icons/arrow-sm.svg) center/contain no-repeat;
          mask:url(/local/assets/sx/icons/arrow-sm.svg) center/contain no-repeat;}
.sx-hosp-etc:hover{background:#4c7dff;}
.sx-hosp-etc:hover .sx-hosp-etc__arr{background-color:#fff;}
.sx-hosp-etc--solid{background:#4c7dff;border-color:#4c7dff;}
.sx-hosp-etc--solid .sx-hosp-etc__arr{background-color:#fff;}

/* ---- Шапка секции: заголовок + подзаголовок + ссылка «все …» -------- */
/* Вертикальные поля секций из макета: у всех 60px сверху и снизу,
   у «Клиник и отделений» сверху 120 — она первая на белом фоне
   и отбивается от голубой зоны. */
.sx-hosp-sec{padding-block:60px;}
.sx-hosp-sec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;}
.sx-hosp-sec__title{font-weight:500;font-size:60px;line-height:1.07;letter-spacing:-2.4px;color:var(--sx-ink);}
.sx-hosp-sec__sub{margin-top:12px;font-size:20px;line-height:1.2;letter-spacing:-.4px;color:var(--sx-ink-soft);}
.sx-hosp-sec__all{flex:none;display:inline-flex;align-items:center;gap:16px;
  font-weight:500;font-size:16px;line-height:1.05;letter-spacing:.8px;text-transform:uppercase;color:#4c7dff;}
.sx-hosp-sec__all .sx-hosp-etc{background:#4c7dff;border-color:#4c7dff;}
.sx-hosp-sec__all .sx-hosp-etc__arr{background-color:#fff;}
.sx-hosp-sec__all:hover .sx-hosp-etc{background:#1e5bff;border-color:#1e5bff;}

/* ---- Вкладки-пилюли (типы подразделений) ---------------------------- */
/* Тот же примитив, что .sx-tab в каталоге главной: моноширинный 24/1.1,
   паддинги 12/24 дают ровно 50px высоты из макета. Активный фон в макете
   страницы клиники светлее общего --sx-blue. */
.sx-hosp-pill{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:8px;
  border:1px solid #4c7dff;color:#4c7dff;
  font-family:var(--sx-font-mono);font-size:24px;line-height:1.1;letter-spacing:-1.2px;
  transition:background .15s ease,color .15s ease;}
.sx-hosp-pills{display:flex;flex-wrap:wrap;gap:16px;}
.sx-hosp-pill.is-active{background:#4c7dff;border-color:#4c7dff;color:#fff;}
.sx-hosp-pill:not(.is-active):hover{background:rgba(76,125,255,.1);}

/* ---- Цветной тег (тип подразделения в карточке) --------------------- */
/* Палитра тегов дизайнера — восемь пар «фон / текст». Размеры сняты с его
   образца: кегль 16, высота около 35, поля 16 по бокам, скругление 8. Какой цвет
   у какого типа, решает sx_hosp_unit_tag() в include/sx/hospital/data.php.
   align-self — чтобы в колонке карточки тег не растягивался на всю ширину. */
.sx-hosp-tag{align-self:flex-start;display:inline-flex;align-items:center;padding:6px 16px;border-radius:8px;
  background:var(--sx-tag-bg);color:var(--sx-tag-fg);
  font-size:16px;line-height:1.4;letter-spacing:-.32px;white-space:nowrap;}
.sx-hosp-tag--blue{--sx-tag-bg:#e4ecff;--sx-tag-fg:#1748cc;}
.sx-hosp-tag--violet{--sx-tag-bg:#ede5ff;--sx-tag-fg:#6435b8;}
.sx-hosp-tag--teal{--sx-tag-bg:#d8f1ec;--sx-tag-fg:#096b5b;}
.sx-hosp-tag--lime{--sx-tag-bg:#e8f0cc;--sx-tag-fg:#536c16;}
.sx-hosp-tag--amber{--sx-tag-bg:#ffedc2;--sx-tag-fg:#805600;}
.sx-hosp-tag--coral{--sx-tag-bg:#ffe0d6;--sx-tag-fg:#a33d25;}
.sx-hosp-tag--pink{--sx-tag-bg:#f9deed;--sx-tag-fg:#94285c;}
.sx-hosp-tag--gray{--sx-tag-bg:#e6ebf2;--sx-tag-fg:#4b5565;}
/* ============================================================
   Блок 1 — герой страницы клиники
   ============================================================ */
/* Отступ от шапки: в макете между её карточкой и карточкой героя
   остаётся полоса голубого фона. */
.sx-hosp-hero{padding-top:48px;}
/* Карточка героя тянется на всю ширину голубой зоны за вычетом её полей (40px). */
.sx-hosp-hero__wrap{padding-inline:var(--sx-gutter);}
.sx-hosp-hero__card{background:#fff;border-radius:24px;overflow:hidden;}

/* — Хлебные крошки — */
.sx-hosp-crumbs{border-bottom:1px solid #e4e9f5;padding:8px 0 5px;}
.sx-hosp-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  max-width:1360px;padding:11px 32px;
  font-size:14px;line-height:1.3;letter-spacing:-.2px;color:#6b7280;}
.sx-hosp-crumbs__list a{color:inherit;transition:color .15s ease;}
.sx-hosp-crumbs__list a:hover{color:var(--sx-blue);}
.sx-hosp-crumbs__list [aria-current]{font-weight:500;color:var(--sx-ink);}
/* Разделитель — шеврон из общего бандла, покрашен маской под цвет текста. */
.sx-hosp-crumbs__sep{width:13px;height:13px;background-color:#6b7280;flex:none;transform:scaleX(-1);
  -webkit-mask:url(/local/assets/sx/icons/arrow-sm.svg) center/7px 11px no-repeat;
          mask:url(/local/assets/sx/icons/arrow-sm.svg) center/7px 11px no-repeat;}

/* — Тело: сетка «текст + фото» — */
/* Раскладка задаётся именованными областями, а не вложенными колонками:
   на 768 фото стоит рядом только с чипсами и кнопками, а заголовок и лид
   идут во всю ширину — вложенными обёртками так не переставить. */
.sx-hosp-hero__body{display:grid;gap:24px 40px;padding:64px 32px;
  grid-template-columns:minmax(0,1fr) minmax(0,45%);
  grid-template-areas:
    "title photo"
    "lead  photo"
    "chips photo"
    "acts  photo";
  align-content:space-between;}
.sx-hosp-hero__title{grid-area:title;font-weight:500;font-size:60px;line-height:1.07;letter-spacing:-2.4px;color:var(--sx-ink);}
.sx-hosp-hero__lead{grid-area:lead;max-width:859px;font-size:20px;line-height:1.2;letter-spacing:-.4px;color:var(--sx-ink-soft);}
/* Чипсы направлений — тот же примитив, что «Реклама» в каталоге главной (.sx-adchip). */
.sx-hosp-hero__chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start;}
/* Кнопки отбиты от чипсов сильнее остальных строк — так в макете. */
.sx-hosp-hero__actions{grid-area:acts;display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  align-self:end;margin-top:32px;}

/* — Фотография — */
/* Фирменная фаска (.sx-cut в 00-base.css). Значения посчитаны по маске из
   макета: диагональ среза проходит через x+y=64, скругления 32. */
/* Ширину задаёт колонка сетки, а не сама картинка: с `auto`-колонкой
   и max-width в процентах фото ужималось до половины своей ячейки и
   висело в пустом столбце. */
.sx-hosp-hero__photo{grid-area:photo;position:relative;align-self:center;
  width:100%;max-width:808px;justify-self:end;aspect-ratio:808/538;
  --sx-cut:64px;--sx-cut-radius:32px;overflow:hidden;}
.sx-hosp-hero__photo img{width:100%;height:100%;object-fit:cover;}
/* Синяя вуаль поверх фото — из макета, приглушает пёстрый кадр под текст рядом. */
.sx-hosp-hero__photo::after{content:"";position:absolute;inset:0;background:rgba(30,91,255,.1);}

/* — Видео вместо фото — */
/* Обложка с кнопкой запуска по макету: полупрозрачный белый круг с белым
   треугольником, при наведении круг белый, треугольник тёмный. Кнопка выше
   вуали (z-index), иначе ::after ложится поверх неё. Рамки фокуса у ссылки
   не видно — её срезает фаска, — поэтому фокус показывает сама кнопка. */
.sx-hosp-hero__photo--video{display:block;cursor:pointer;}
.sx-hosp-hero__play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,.5);color:#fff;
  transition:background .15s ease,color .15s ease;}
/* Треугольник чуть правее середины: по центру рамки он выглядит сдвинутым влево. */
.sx-hosp-hero__play svg{width:62%;height:62%;margin-left:4%;fill:currentColor;}
.sx-hosp-hero__photo--video:hover .sx-hosp-hero__play,
.sx-hosp-hero__photo--video:focus-visible .sx-hosp-hero__play{background:#fff;color:var(--sx-black);}
.sx-hosp-hero__photo--video:focus-visible{outline:none;}

/* Окно с роликом — нативный <dialog>: верхний слой, Esc и возврат фокуса
   браузер делает сам. Крестик вынесен над роликом, чтобы не лечь на кнопки
   плеера.

   Ширину окна задаёт сам плеер (у <dialog> она по содержимому): не шире
   1280 и экрана, и не выше экрана за вычетом места под крестик. Высоту даёт
   пропорция ролика — --sx-video-ratio, её ставит скрипт по загрузке видео,
   до того 16:9. Так и горизонтальный, и вертикальный ролик получают столько
   экрана, сколько помещается, без чёрных полей по краям. Только vh, без dvh:
   объявление с var() браузер без dvh не отбросит, а сбросит ширину в auto. */
.sx-hosp-video{max-width:none;max-height:none;
  margin:auto;padding:0;border:0;border-radius:16px;background:#000;overflow:visible;}
.sx-hosp-video::backdrop{background:rgba(11,21,48,.85);}
.sx-hosp-video__player{--sx-video-ratio:16 / 9;display:block;
  width:min(1280px,calc(100vw - 48px),calc((100vh - 136px) * (var(--sx-video-ratio))));
  aspect-ratio:var(--sx-video-ratio);
  border-radius:16px;background:#000;}
.sx-hosp-video__close{position:absolute;right:0;bottom:calc(100% + 12px);
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background .15s ease;}
.sx-hosp-video__close:hover,
.sx-hosp-video__close:focus-visible{background:rgba(255,255,255,.3);}
.sx-hosp-video__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
/* ============================================================
   Блок 2 — карточки-справка (главврач, режим, контакты, e-mail, адрес)
   ============================================================ */
.sx-hosp-info{padding:16px 0 48px;}
/* Не грид, а flex-wrap: в макете на 1440 и 768 карточки идут 3 + 2, причём
   вторая строка растягивается на всю ширину. Грид с фиксированным числом
   колонок оставил бы в ней дырку. */
.sx-hosp-info__grid{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;}

/* container-type — ради плашки метро ниже: её кегль считается от ширины
   карточки, а колонок в сетке от одной до пяти. */
.sx-hosp-info__grid > .sx-hosp-card{flex:1 1 calc(20% - 20px);}
.sx-hosp-card{position:relative;display:flex;flex-direction:column;gap:12px;
  background:#fff;border-radius:24px;padding:24px;container-type:inline-size;}
.sx-hosp-card__head{display:flex;align-items:flex-start;gap:12px;}
/* Иконки — экспорт из макета (icons/ic-*.svg), синие прямо в файле:
   вставлены через <img>, а туда currentColor не проходит. */
.sx-hosp-card__ic{flex:none;width:24px;height:24px;}
.sx-hosp-card__ic--route{background-color:var(--sx-blue);
  -webkit-mask:url(/local/assets/sx/icons/ic-route.svg) center/contain no-repeat;
          mask:url(/local/assets/sx/icons/ic-route.svg) center/contain no-repeat;}
.sx-hosp-card__label{font-family:var(--sx-font-mono);font-size:18px;line-height:1.4;letter-spacing:-.36px;
  color:var(--sx-black);text-transform:uppercase;}
.sx-hosp-card__body{display:flex;flex-direction:column;gap:8px;}
.sx-hosp-card__value{font-size:18px;line-height:1.2;letter-spacing:-.36px;color:var(--sx-black);overflow-wrap:anywhere;}
.sx-hosp-card__value a{transition:color .15s ease;}
.sx-hosp-card__value a:hover{color:var(--sx-blue);}
.sx-hosp-card__note{font-size:16px;line-height:1.2;letter-spacing:-.32px;color:var(--sx-ink-soft);}
/* Кнопка-стрелка всегда в правом нижнем углу карточки, независимо от длины текста. */
.sx-hosp-card > .sx-hosp-etc{margin-top:auto;align-self:flex-end;}

/* Карточка адреса: плашка метро прижата к низу. */
.sx-hosp-card--addr .sx-hosp-card__body{flex:1 1 auto;}
/* Плашка метро: 18px как в макете, но если строка длиннее («Проспект
   Вернадского — 12 мин пешком») — кегль ужимается, а не уходит в две строки.
   Считаем от ширины карточки: моноширинный символ = 0.6em, под иконку с
   зазором и поля уходит 40px, длина строки — из --sx-metro-len (ставит
   разметка). Ниже 12px не опускаемся — дальше уже нечитаемо. */
.sx-hosp-metro{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:2px 6px;border-radius:8px;background:#bae2fc;color:var(--sx-black);
  font-family:var(--sx-font-mono);line-height:1.4;letter-spacing:-.36px;
  white-space:nowrap;
  font-size:clamp(12px, calc((100cqi - 40px) / (var(--sx-metro-len, 24) * 0.6)), 18px);}
.sx-hosp-metro__ic{flex:none;width:19px;height:13px;}
/* ============================================================
   Блок 3 — «Клиники и отделения»
   ============================================================ */
/* Сколько карточек открыто до нажатия «Показать ещё». Читает
   js/parts/10-units.js — в макете это два ряда сетки, а число колонок
   меняется на брейкпойнтах. */
.sx-hosp-units{--sx-units-step:8;padding-top:120px;}
.sx-hosp-units__tabs{margin-top:32px;}
/* Четыре колонки: 1840 контейнера = 4 карточки по 442 + 3 зазора по 24. */
.sx-hosp-units__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px;}

.sx-hosp-unit{display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:#f7f9fc;border:1px solid #eef2f7;border-radius:24px;padding:25px;
  transition:border-color .15s ease,box-shadow .15s ease;}
.sx-hosp-unit:hover{border-color:#d8e2f2;box-shadow:0 4px 12px rgba(30,91,255,.06);}
/* Карточка скрыта фильтром вкладок или свёрнутым списком — класс перебивает display:flex. */
.sx-hosp-unit[hidden]{display:none;}

.sx-hosp-unit__top{display:flex;flex-direction:column;gap:12px;}
.sx-hosp-unit__title{font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.36px;color:var(--sx-black);}
.sx-hosp-unit__descr{font-size:16px;line-height:1.2;letter-spacing:-.32px;color:var(--sx-ink-soft);}

/* Низ карточки: контакты слева, кнопка-стрелка справа НА ОДНОЙ линии
   с последней строкой — так в макете. Карточки в ряду разной высоты,
   поэтому низ прижат к основанию (justify-content:space-between выше). */
.sx-hosp-unit__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-top:1px solid var(--sx-card-border);padding-top:24px;}
.sx-hosp-unit__foot > .sx-hosp-etc{flex:none;}
.sx-hosp-unit__meta{display:flex;flex-direction:column;gap:12px;}
.sx-hosp-unit__row{display:flex;align-items:center;gap:8px;
  font-size:16px;line-height:1.2;letter-spacing:-.32px;color:var(--sx-ink-soft);overflow-wrap:anywhere;}
.sx-hosp-unit__row a{transition:color .15s ease;}
.sx-hosp-unit__row a:hover{color:var(--sx-blue);}
/* Иконки строк — экспорт из макета (icons/row-*.svg), синие прямо в файле. */
.sx-hosp-unit__row-ic{flex:none;width:24px;height:24px;}

/* Кнопка «Показать ещё»: в макете слева под сеткой, зазор 48. Прячется,
   когда показывать больше нечего (ставит js/parts/10-units.js). */
.sx-hosp-units__more{display:none;margin-top:48px;}
.sx-hosp-units__more.is-on{display:block;}
/* ============================================================
   Блок «О больнице» — описание раздела из админки

   Типографика — .sx-page (общий бандл), поправки под текст из визуального
   редактора — .sx-inner__content (бандл внутренних страниц). Здесь только
   то, что встречается в описаниях больниц: заголовки-раскладки «иконка +
   заголовок» таблицей, <br> после них, пустой <h2> под роликом, встроенный плеер.
   ============================================================ */

/* Отступ — только под заголовком блока: когда описание озаглавлено само,
   заголовка у блока нет (sections/03a-about.php). */
.sx-hosp-sec__head + .sx-hosp-about__text{margin-top:40px;}

/* Редактор ставит <br> после таблицы-заголовка и в конце блока: вместе
   с отступом таблицы выходила дыра в две строки. */
.sx-hosp-about__text .section > table + br,
.sx-hosp-about__text .section > br:last-child{display:none;}
.sx-hosp-about__text td > :where(h2,h3):last-child{margin-bottom:0;}
.sx-hosp-about__text :where(h2,h3,h4):empty{display:none;}
.sx-hosp-about__text .section + .section{margin-top:24px;}

/* Ролик Rutube у ЦМиД вставлен с width="720": на телефоне шире экрана. */
.sx-hosp-about__text iframe{max-width:100%;height:auto;aspect-ratio:16/9;}
.sx-hosp-about__text video{max-width:100%;}

@media (max-width:767px){
  .sx-hosp-sec__head + .sx-hosp-about__text{margin-top:24px;}
}
/* ============================================================
   Блок 4 — «Ведущие специалисты подразделения»

   Вёрстка блока — общая с главной (.sx-docs / .sx-doc в бандле sx).
   Здесь только отличия макета страницы клиники.
   ============================================================ */
/* На главной блок отбит margin-top:96px от предыдущего; тут секции
   разделяет собственный вертикальный ритм страницы. */
.sx-hosp-docs{margin-top:0;padding-block:64px;}
/* Заголовок в макете в две строки и стоит выше ссылки «все врачи». */
.sx-hosp-docs .sx-docs__head{align-items:flex-end;}
.sx-hosp-docs .sx-docs__all{font-size:16px;letter-spacing:.8px;}
/* Колонка слева без счётчика «165 докторов наук»: лид сверху, стрелки снизу. */
.sx-hosp-docs .sx-docs__stat-intro{font-size:20px;line-height:1.2;letter-spacing:-.4px;}
.sx-hosp-docs .sx-navbtn{width:120px;height:72px;}
/* ============================================================
   Блок 5 — «Медицинские услуги»
   ============================================================ */
.sx-hosp-serv__panel{display:flex;align-items:stretch;margin-top:40px;
  background:#eff5ff;border:1px solid #eef2f7;border-radius:24px;overflow:hidden;}

/* — Колонка направлений — */
.sx-hosp-serv__nav{flex:none;width:378px;display:flex;flex-direction:column;gap:40px;
  background:#fff;padding:40px 32px;}
/* Пункт: стрелка слева абсолютом, потому что она (45×51) выше строки и в потоке
   растянула бы шаг между направлениями. Неактивные приглушены прозрачностью —
   так в макете: цвет тот же, гасится вся строка вместе со счётчиком. */
.sx-hosp-serv__cat{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding-left:61px;text-align:left;opacity:.5;transition:opacity .15s ease;}
.sx-hosp-serv__cat:hover{opacity:.8;}
.sx-hosp-serv__cat.is-active{opacity:1;}
.sx-hosp-serv__cat-arr{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:45px;height:51px;opacity:0;transition:opacity .15s ease;}
.sx-hosp-serv__cat.is-active .sx-hosp-serv__cat-arr{opacity:1;}
/* Кегль 18 (стиль Headline 6), а не 24 из первой версии макета: названия направлений
   приходят из старых прайсов и длинные — «Консервативное лечение (стоимость полного
   курса лечения)» в 24 растягивалось на пять-шесть строк, и колонка выходила выше
   самих карточек. */
.sx-hosp-serv__cat-name{font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.36px;color:var(--sx-blue);}
.sx-hosp-serv__cat-num{flex:none;min-width:24px;padding:4px 8px;border-radius:8px;
  background:var(--sx-blue);color:#fff;text-align:center;
  font-size:16px;line-height:1.2;letter-spacing:-.32px;}

/* — Карточки услуг — */
.sx-hosp-serv__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px;padding:40px;}
.sx-hosp-serv__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.sx-hosp-serv__grid[hidden]{display:none;}

.sx-hosp-serv-card{display:flex;flex-direction:column;gap:16px;
  background:#fff;border:1px solid var(--sx-card-border);border-radius:24px;padding:24px;
  filter:drop-shadow(0 4px 3.45px rgba(0,0,0,.05));}
/* Плашка «Очно» / «По записи»: поля только по горизонтали, высоту задаёт
   межстрочный интервал самого текста (25px при 18/1.4) — так в макете. */
.sx-hosp-serv-card__tag{align-self:flex-start;padding:0 4px;border-radius:8px;
  font-family:var(--sx-font-mono);font-size:18px;line-height:1.4;letter-spacing:-.36px;color:var(--sx-black);}
.sx-hosp-serv-card__tag--now{background:#bae2fc;}
.sx-hosp-serv-card__tag--appt{background:#bafcf1;}
.sx-hosp-serv-card__title{font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.36px;color:var(--sx-black);}
.sx-hosp-serv-card__descr{margin-top:-4px;font-size:16px;line-height:1.2;letter-spacing:-.32px;color:var(--sx-ink-soft);}
.sx-hosp-serv-card > .sx-hosp-etc{margin-top:auto;align-self:flex-end;}

/* — Кнопка категории и «помочь с выбором» — */
.sx-hosp-serv__cta{display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:12px 24px;text-align:center;
  background:var(--sx-blue);border-radius:12px;color:#fff;
  font-weight:500;font-size:18px;line-height:1.05;letter-spacing:.9px;text-transform:uppercase;
  transition:background .15s ease;}
.sx-hosp-serv__cta:hover{background:#1749d6;}
.sx-hosp-serv__help{align-self:center;display:inline-flex;align-items:center;gap:16px;
  font-weight:500;font-size:16px;line-height:1.05;letter-spacing:.8px;text-transform:uppercase;color:#4c7dff;}
/* ============================================================
   Блок 6 — «Как записаться на приём»

   Сам блок — партиал главной (.sx-book из бандла sx). Здесь подложка,
   которой на главной нет, и цвета карточек: в макете страницы клиники
   они лежат на голубом фоне и потому полупрозрачные, а не залитые
   градиентом, как на белой главной.
   ============================================================ */
/* Подложка во всю ширину экрана со скруглением по всем углам — так в макете
   (AppointmentSection занимает все 1920, поля 40px только у содержимого). */
.sx-hosp-book{padding-block:60px;background:#eff5ff;border-radius:40px;}
/* На главной блок отбит margin-top:96px от предыдущей секции — тут отступ
   даёт подложка, иначе он вылезет пустой полосой внутри неё. */
.sx-hosp-book .sx-book{margin-top:0;}

/* Карточка: #A3BDCB под 15% поверх голубой подложки (в макете это одна
   заливка вектора). Градиент главной здесь дал бы серое пятно. */
.sx-hosp-book .sx-book-card{background:rgba(163,189,203,.15);}
/* Бейдж в макете страницы клиники набран обычным регистром и 18-м кеглем,
   а не прописными 14, как на главной. */
.sx-hosp-book .sx-book-card__badge{padding:0 4px;font-size:18px;line-height:1.4;
  letter-spacing:-.36px;text-transform:none;}
.sx-hosp-book .sx-book-card__divider{background:#b3c9e6;}
.sx-hosp-book .sx-book-card__btn{border-color:#4c7dff;}
/* Акцентная карточка «Телемедицина» — ровная заливка, без градиента главной. */
.sx-hosp-book .sx-book-card.is-accent{background:var(--sx-blue);}
.sx-hosp-book .sx-book-card.is-accent .sx-book-card__badge{background:rgba(255,255,255,.2);border-radius:4px;}
.sx-hosp-book .sx-book-card.is-accent .sx-book-card__divider{background:rgba(255,255,255,.5);}
.sx-hosp-book .sx-book-card.is-accent .sx-book-card__btn{border-color:#fff;}
/* ============================================================
   Блок 7 — «Адрес и маршрут» (Figma node 424:3177)

   Слева синяя карточка адреса и три карточки-справки, справа карта.
   Ширины из макета: колонка 901, зазор 72, карта добирает остаток.
   ============================================================ */
.sx-hosp-route{background:#fff;padding-block:120px;}
.sx-hosp-route__body{display:flex;gap:72px;align-items:stretch;margin-top:32px;}
/* Колонка — доля от ширины контента (49% ≈ 901 из 1840 в макете 1920),
   с потолком по макету: на 1440 она обязана ужаться, иначе карта схлопнется. */
.sx-hosp-route__side{flex:none;width:49%;max-width:901px;display:flex;flex-direction:column;gap:32px;}

/* — Синяя карточка адреса — */
.sx-hosp-addr{position:relative;overflow:hidden;
  min-height:345px;padding:40px;border-radius:32px;
  background:#5f71ff;color:#fff;}
/* Эмблема-водяной знак: прижата к правому краю и центрирована по высоте. */
.sx-hosp-addr__emblem{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:341px;height:279px;pointer-events:none;}
.sx-hosp-addr > :not(.sx-hosp-addr__emblem){position:relative;z-index:1;}

.sx-hosp-addr__head{display:flex;align-items:flex-start;gap:12px;}
.sx-hosp-addr__ic{width:32px;height:32px;flex:none;background-color:#fff;
  -webkit-mask:url(/local/assets/sx-hospital/icons/route-white.svg) center/contain no-repeat;
          mask:url(/local/assets/sx-hospital/icons/route-white.svg) center/contain no-repeat;}
.sx-hosp-addr__label{font-family:var(--sx-font-mono);font-size:24px;line-height:1.4;letter-spacing:-1.2px;
  text-transform:uppercase;}

.sx-hosp-addr__street{margin-top:16px;max-width:705px;font-size:24px;line-height:1.4;letter-spacing:-.96px;}
.sx-hosp-addr__entrance{margin-top:16px;font-size:20px;line-height:1.2;letter-spacing:-.4px;}
/* Плашка метро — полупрозрачная по белому, а не голубая, как на светлом фоне. */
.sx-hosp-addr__metro{display:inline-flex;align-items:center;gap:6px;margin-top:24px;
  padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  font-family:var(--sx-font-mono);font-size:18px;line-height:1.4;letter-spacing:-.36px;white-space:nowrap;}
.sx-hosp-addr__metro-ic{flex:none;width:19px;height:13px;background-color:#fff;
  -webkit-mask:url(/local/assets/sx-hospital/icons/ic-metro.svg) center/contain no-repeat;
          mask:url(/local/assets/sx-hospital/icons/ic-metro.svg) center/contain no-repeat;}

/* — Низ карточки: кнопка записи, разделитель, оценка — */
.sx-hosp-addr__foot{display:flex;align-items:center;gap:40px;margin-top:32px;}
/* Та же фигурная кнопка, что в шапке сайта, но вывернутая: белая заливка,
   тёмный текст (на синей карточке синяя кнопка не читалась бы). */
.sx-hosp-addr__book{flex:none;position:relative;width:236px;height:56px;
  display:inline-flex;align-items:center;
  background:url(/local/assets/sx-hospital/icons/btn-book-white.svg) center/100% 100% no-repeat;}
.sx-hosp-addr__book-t{margin-left:32px;font-weight:500;font-size:18px;line-height:1.05;
  letter-spacing:.9px;text-transform:uppercase;color:var(--sx-ink);}
.sx-hosp-addr__book-arr{position:absolute;right:32px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;}
.sx-hosp-addr__foot::before{content:"";flex:none;order:1;width:1px;height:65px;background:rgba(255,255,255,.5);}
.sx-hosp-rate{order:2;display:flex;flex-direction:column;gap:6px;}
.sx-hosp-rate__cap{font-size:16px;line-height:1.2;letter-spacing:-.32px;}

/* Звёзды идут в обратном порядке, чтобы подсветить наведённую И ВСЕ ЛЕВЕЕ неё:
   CSS умеет выбирать только следующих соседей, поэтому row-reverse. */
.sx-hosp-rate__stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;}
.sx-hosp-star{width:40px;height:40px;padding:0;border:0;cursor:pointer;background-color:#fff;
  -webkit-mask:url(/local/assets/sx-hospital/icons/star-out.svg) center/contain no-repeat;
          mask:url(/local/assets/sx-hospital/icons/star-out.svg) center/contain no-repeat;}
.sx-hosp-rate:not(.is-rated):not(.is-sending) .sx-hosp-star:hover,
.sx-hosp-rate:not(.is-rated):not(.is-sending) .sx-hosp-star:hover ~ .sx-hosp-star,
.sx-hosp-star.is-on{
  -webkit-mask-image:url(/local/assets/sx-hospital/icons/star-bold.svg);
          mask-image:url(/local/assets/sx-hospital/icons/star-bold.svg);}
/* Оценка поставлена или уходит на сервер — звёзды замирают. */
.sx-hosp-rate.is-rated .sx-hosp-star,
.sx-hosp-rate.is-sending .sx-hosp-star{cursor:default;}
.sx-hosp-rate.is-sending{opacity:.7;}

/* — Три карточки-справки под адресом — */
/* Как и в ряду под героем — flex-wrap: на 1920 три карточки в строку,
   на 1440 две и одна во всю ширину. */
.sx-hosp-route__cards{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;}
.sx-hosp-route__cards > .sx-hosp-card{flex:1 1 240px;}
/* Модификатор «плоской» карточки: в блоке маршрута фон серый с рамкой,
   а не белый, как в ряду под героем. */
.sx-hosp-card--flat{background:#f7f9fc;border:1px solid #eef2f7;border-radius:16px;gap:8px;}

/* — Карта — */
.sx-hosp-route__map{position:relative;flex:1 1 0;min-width:0;min-height:526px;
  background:#e8eef4;border:1px solid #d0d8ea;border-radius:20px;overflow:hidden;
  box-shadow:0 4px 24px rgba(11,29,110,.09);}
.sx-hosp-route__canvas{position:absolute;inset:0;}
/* Карточка объекта поверх карты — прижата к низу. */
.sx-hosp-route__card{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.96);border-radius:12px;padding:12px 16px;
  box-shadow:0 4px 16px rgba(11,29,110,.12);}
.sx-hosp-route__card-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;background:#eff5ff;}
.sx-hosp-route__card-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
.sx-hosp-route__card-name{font-weight:700;font-size:13px;line-height:1.5;color:var(--sx-ink);}
.sx-hosp-route__card-addr{font-size:11px;line-height:1.5;color:var(--sx-ink-soft);}
.sx-hosp-route__card-btn{flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;background:var(--sx-blue);color:#fff;
  font-weight:700;font-size:12px;line-height:1.5;transition:background .15s ease;}
.sx-hosp-route__card-btn:hover{background:#4c7dff;}
/* ============================================================
   Страница клиники — адаптив.

   Макет нарисован под 1920, 1440, 768 и 375 (Figma 424:2271 / 424:3517 /
   424:1346 / 424:586). Точки переключения — те же, что у главной
   (parts/20-resp-*.css общего бандла).

   Файл идёт ПОСЛЕ блочных (20- > 0X-), поэтому перебивает их правила.
   ============================================================ */

/* ---- Узкий десктоп: 1280–1599 --------------------------------------- */
@media (max-width:1599px){
  .sx-hosp-hero__title{font-size:48px;letter-spacing:-1.9px;}
  .sx-hosp-sec__title{font-size:48px;letter-spacing:-1.9px;}
  /* Карточки-справки идут 3 + 2, вторая строка растягивается (макет 1440). */
  .sx-hosp-info__grid > .sx-hosp-card{flex-basis:calc(33.333% - 16px);}
  .sx-hosp-units__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* Панель услуг в макете 1440 заметно плотнее: поля 24 вместо 40. */
  .sx-hosp-serv__nav{width:340px;padding:24px;}
  .sx-hosp-serv__body{padding:24px;gap:16px;}
  .sx-hosp-route{padding-block:80px;}
}

/* ---- Планшет и узкие окна: до 1279 ---------------------------------- */
@media (max-width:1279px){
  .sx-hosp-sec{padding-block:48px;}
  .sx-hosp-units{padding-top:64px;--sx-units-step:6;}
  .sx-hosp-units__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sx-hosp-serv__grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  .sx-hosp-route{padding-block:32px;}
  .sx-hosp-route__body{flex-direction:column;gap:16px;}
  .sx-hosp-route__side{width:100%;max-width:none;}
  .sx-hosp-route__map{min-height:360px;width:100%;}
  /* Синяя карточка адреса в макете 768 набрана мельче десктопной:
     адрес 21, вход 18, метро 14 обычным шрифтом (не моно). */
  .sx-hosp-addr{padding:24px;border-radius:24px;}
  .sx-hosp-addr__label{font-size:24px;line-height:1.25;letter-spacing:-1px;}
  .sx-hosp-addr__street{margin-top:16px;font-size:21px;line-height:1.4;letter-spacing:-1.05px;}
  .sx-hosp-addr__entrance{margin-top:12px;font-size:18px;line-height:1.2;letter-spacing:-.36px;}
  .sx-hosp-addr__metro{margin-top:16px;font-family:var(--sx-font);font-size:14px;line-height:1.4;letter-spacing:-.28px;}
  .sx-hosp-addr__foot{margin-top:32px;}
  .sx-hosp-rate__cap{font-size:15px;}
  .sx-hosp-addr__emblem{width:285px;height:234px;right:-32px;}
  /* Карточки-справки под адресом в макете плотнее десктопных. */
  .sx-hosp-route__cards{gap:16px;}
  .sx-hosp-card--flat{padding:16px;}
  .sx-hosp-card--flat .sx-hosp-card__label{font-size:16px;letter-spacing:-.32px;}
  .sx-hosp-card--flat .sx-hosp-card__value{font-size:16px;letter-spacing:-.32px;}
  .sx-hosp-card--flat .sx-hosp-card__note{font-size:14px;letter-spacing:-.28px;}
}

/* ---- Планшет 768–1023 (макет Figma 424:1346) ------------------------- */
@media (max-width:1023px){
  /* Герой. Поля карточки и зазор от шапки в макете вдвое меньше десктопных. */
  .sx-hosp-hero{padding-top:16px;}
  .sx-hosp-hero__wrap{padding-inline:24px;}
  .sx-hosp-crumbs__list{padding:11px 32px;font-size:15px;letter-spacing:-.3px;}
  /* Заголовок и лид во всю ширину, фотография — рядом только с чипсами
     и кнопками (в макете колонка 308 + зазор 32 + фото 332). */
  .sx-hosp-hero__body{padding:24px;gap:24px 32px;
    grid-template-columns:minmax(0,1fr) minmax(0,49%);
    grid-template-areas:
      "title title"
      "lead  lead"
      "chips photo"
      "acts  photo";}
  .sx-hosp-hero__title{font-size:21px;line-height:1.3;letter-spacing:-1.05px;}
  .sx-hosp-hero__lead{max-width:none;font-weight:500;font-size:16px;line-height:1.3;letter-spacing:-.32px;}
  /* Чипсы мельче: 14/1.4 и фаска 16px вместо 25 (см. .sx-adchip). */
  .sx-hosp-hero__chips{gap:12px;align-content:flex-start;}
  .sx-hosp-hero__chips .sx-adchip{height:31px;padding:0 16px;font-size:14px;line-height:1.4;letter-spacing:-.28px;}
  .sx-hosp-hero__actions{flex-direction:column;align-items:stretch;gap:24px;margin-top:8px;}
  .sx-hosp-hero__actions .sx-hosp-btn-ghost{width:100%;}
  /* Фотография почти квадратная — так в маске макета (332×328). */
  .sx-hosp-hero__photo{max-width:none;align-self:start;aspect-ratio:1/1;--sx-cut:48px;}
  /* Кадр здесь вдвое-втрое уже десктопного — кнопка запуска видео мельче. */
  .sx-hosp-hero__play{width:72px;height:72px;}

  /* Заголовки секций и ссылки «все …»: подпись прячем, остаётся стрелка. */
  .sx-hosp-sec__title{font-size:24px;line-height:1.3;letter-spacing:-.72px;}
  .sx-hosp-sec__sub{margin-top:16px;font-size:14px;line-height:1.5;}
  .sx-hosp-sec__head{gap:16px;}
  .sx-hosp-sec__all-t,
  .sx-hosp-docs .sx-hosp-sec__all-t{display:none;}
  /* Заголовок врачей в одну строку: перенос в разметке нужен только на
     широком десктопе, где он стоит рядом со ссылкой. */
  .sx-hosp-docs .sx-docs__title{font-size:24px;line-height:1.3;letter-spacing:-.72px;}
  .sx-hosp-docs .sx-docs__title br{display:none;}
  .sx-hosp-docs .sx-docs__all{gap:0;}
  .sx-hosp-docs .sx-docs__stat-intro{font-size:14px;line-height:1.5;letter-spacing:normal;}

  /* Блок записи: поля и кегли из макета 768. */
  .sx-hosp-book{padding-block:32px;}
  .sx-hosp-book .sx-book__title{font-size:24px;line-height:1.3;letter-spacing:-.72px;}
  .sx-hosp-book .sx-book__intro{font-size:14px;line-height:1.5;letter-spacing:normal;}
  .sx-hosp-book .sx-book-card__badge{font-size:14px;letter-spacing:-.28px;}
  /* Пилюли направлений — той же высоты, что вкладки отделений. */
  .sx-hosp-serv__cat{padding:10px 16px;}

  /* Вкладки типов уезжают в горизонтальную прокрутку — в макете их лента
     шире экрана и обрезается краем. */
  .sx-hosp-units{padding-top:32px;}
  .sx-hosp-units__tabs{margin-top:24px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;gap:12px;}
  .sx-hosp-units__tabs::-webkit-scrollbar{display:none;}
  /* Пилюли в макете планшета и телефона набраны прописными и заметно выше
     тех, что на десктопе. */
  .sx-hosp-pill{flex:none;padding:10px 16px;font-size:14px;line-height:1.4;
    letter-spacing:-.28px;text-transform:uppercase;}
  .sx-hosp-units__grid{margin-top:32px;}
  /* Карточки отделений в макете планшета и телефона заметно плотнее. */
  .sx-hosp-unit{padding:16px;gap:16px;}
  .sx-hosp-unit__top{gap:8px;}
  .sx-hosp-unit__title{font-size:16px;letter-spacing:-.32px;}
  .sx-hosp-unit__descr{font-size:14px;letter-spacing:-.28px;}
  .sx-hosp-unit__foot{gap:16px;padding-top:16px;}
  .sx-hosp-unit__meta{gap:8px;}
  .sx-hosp-unit__row{font-size:14px;letter-spacing:-.28px;}
  .sx-hosp-unit__row-ic{width:20px;height:20px;}
  /* Тег типа — на ступень мельче, как и остальной текст карточки. */
  .sx-hosp-unit .sx-hosp-tag{padding:4px 12px;font-size:14px;letter-spacing:-.28px;}
  .sx-hosp-units__more{margin-top:24px;}
  .sx-hosp-units__more .sx-hosp-btn-ghost{width:100%;}

  /* Услуги: направления превращаются в ленту пилюль над карточками. */
  .sx-hosp-serv__panel{flex-direction:column;margin-top:24px;}
  .sx-hosp-serv__nav{width:100%;flex-direction:row;flex-wrap:nowrap;gap:12px;
    padding:16px;overflow-x:auto;scrollbar-width:none;background:none;}
  .sx-hosp-serv__nav::-webkit-scrollbar{display:none;}
  .sx-hosp-serv__cat{flex:none;width:auto;padding:8px 16px;gap:8px;opacity:1;
    background:#fff;border:1px solid #4c7dff;border-radius:8px;}
  .sx-hosp-serv__cat.is-active{background:#4c7dff;border-color:#4c7dff;}
  .sx-hosp-serv__cat-arr{display:none;}
  .sx-hosp-serv__cat-name{font-family:var(--sx-font-mono);font-weight:400;
    font-size:14px;line-height:1.4;letter-spacing:-.28px;text-transform:uppercase;}
  .sx-hosp-serv__cat.is-active .sx-hosp-serv__cat-name{color:#fff;}
  .sx-hosp-serv__cat-num{min-width:20px;padding:2px 6px;font-size:12px;background:rgba(76,125,255,.5);}
  .sx-hosp-serv__cat.is-active .sx-hosp-serv__cat-num{background:rgba(255,255,255,.3);}
  .sx-hosp-serv__body{padding:16px;gap:16px;}
  .sx-hosp-serv__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .sx-hosp-serv-card{padding:16px;gap:12px;}
  .sx-hosp-serv-card__tag{font-size:14px;letter-spacing:-.28px;}
  .sx-hosp-serv-card__title{font-size:16px;}
  .sx-hosp-serv-card__descr{font-size:14px;}
}

/* ---- Телефон: до 767 (макет Figma 424:586) --------------------------- */
@media (max-width:767px){
  .sx-hosp-sec{padding-block:32px;}
  .sx-hosp-hero{padding-top:24px;}
  .sx-hosp-hero__wrap{padding-inline:16px;}
  /* Одна колонка, фотография — первой, как в макете 375. */
  /* Шаги между фото, заголовком и лидом в макете 375 — по 8, до чипсов 32. */
  .sx-hosp-hero__body{padding:16px;gap:8px;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"photo" "title" "lead" "chips" "acts";}
  .sx-hosp-hero__photo{aspect-ratio:311/188;--sx-cut:40px;--sx-cut-radius:20px;}
  .sx-hosp-hero__play{width:56px;height:56px;}
  /* Окно с роликом почти во всю ширину телефона. */
  .sx-hosp-video{border-radius:12px;}
  .sx-hosp-video__player{width:min(calc(100vw - 32px),calc((100vh - 136px) * (var(--sx-video-ratio))));
    border-radius:12px;}
  .sx-hosp-hero__chips{margin-top:24px;}
  .sx-hosp-hero__actions{margin-top:16px;gap:16px;}
  /* Фигурная кнопка на всю ширину: подпись со стрелкой едут в центр,
     иначе на 343px между ними остаётся пустая середина. */
  .sx-hosp-hero__actions .sx-btn-book{width:100%;justify-content:center;gap:16px;}
  .sx-hosp-hero__actions .sx-btn-book__t{margin-left:0;}
  .sx-hosp-hero__actions .sx-btn-book__arr{position:static;transform:none;}
  .sx-hosp-crumbs__list{padding:8px 16px;font-size:13px;}

  .sx-hosp-sec__head{flex-direction:row;align-items:flex-start;gap:16px;}
  /* Кегль заголовков секций на 375 тот же, что на планшете (24): при нём
     «Клиники и отделения» и «Медицинские услуги» помещаются в одну строку. */
  .sx-hosp-sec__title{font-size:24px;line-height:1.3;letter-spacing:-.72px;}
  .sx-hosp-sec__sub br{display:none;}

  .sx-hosp-info{padding-bottom:32px;}
  .sx-hosp-info__grid{gap:12px;}
  .sx-hosp-info__grid > .sx-hosp-card{flex-basis:100%;}
  /* Карточки-справки на телефоне плотнее: поля 16 и кегли на ступень ниже. */
  .sx-hosp-card{padding:16px;}
  .sx-hosp-card__label{font-size:16px;letter-spacing:-.32px;}
  .sx-hosp-card__value{font-size:16px;letter-spacing:-.32px;}
  .sx-hosp-card__note{font-size:14px;letter-spacing:-.28px;}
  /* Стрелка уходит в правый нижний угол карточки, а не на отдельную строку:
     в макете 375 она стоит сбоку от подписи. */
  .sx-hosp-card:has(> .sx-hosp-etc){position:relative;padding-right:56px;}
  .sx-hosp-card > .sx-hosp-etc{position:absolute;right:16px;bottom:16px;margin:0;}

  .sx-hosp-units{padding-top:24px;--sx-units-step:4;}
  .sx-hosp-units__grid{grid-template-columns:1fr;gap:16px;}

  .sx-hosp-serv__grid{grid-template-columns:1fr;gap:12px;}
  /* Подпись длинная — кнопка тянется по высоте, а не режет текст. */
  .sx-hosp-serv__cta{min-height:48px;font-size:14px;letter-spacing:.7px;line-height:1.2;}

  .sx-hosp-book{padding-block:32px;border-radius:24px;}
  /* На телефоне карточки идут в одну колонку и заголовок в них мельче. */
  .sx-hosp-book .sx-book-card__title{font-size:20px;line-height:1.25;letter-spacing:-.4px;}

  .sx-hosp-route{padding-block:32px;}
  .sx-hosp-addr{padding:20px;border-radius:20px;}
  /* На телефоне эмблемы в карточке нет — она перекрыла бы текст. */
  .sx-hosp-addr__emblem{display:none;}
  .sx-hosp-addr__label{font-size:16px;line-height:1.25;letter-spacing:-.8px;}
  .sx-hosp-addr__ic{width:24px;height:24px;}
  .sx-hosp-addr__foot{margin-top:20px;}
  .sx-hosp-addr__street{margin-top:12px;font-size:18px;line-height:1.3;letter-spacing:-.54px;}
  .sx-hosp-addr__entrance{margin-top:8px;font-size:14px;}
  /* Кегль поменьше — строка «Спортивная — 5 мин пешком» остаётся в одну,
     как в макете 375, и не разъезжается на две. */
  .sx-hosp-addr__metro{margin-top:12px;font-family:var(--sx-font);font-size:13px;letter-spacing:-.26px;}
  /* Кнопка и оценка друг под другом по центру: рядом они не помещаются,
     а вертикальный разделитель между ними в колонке не читается. */
  .sx-hosp-addr__foot{flex-direction:column;align-items:stretch;gap:20px;}
  .sx-hosp-addr__foot::before{display:none;}
  .sx-hosp-addr__book{width:100%;justify-content:center;gap:16px;}
  .sx-hosp-addr__book-t{margin-left:0;}
  .sx-hosp-addr__book-arr{position:static;transform:none;}
  .sx-hosp-rate{align-items:center;}
  .sx-hosp-route__cards > .sx-hosp-card{flex-basis:100%;}
  .sx-hosp-route__map{min-height:280px;}
  /* Карточка объекта над картой в один столбец: кнопка не влезает рядом с текстом. */
  .sx-hosp-route__card{flex-wrap:wrap;gap:12px;}
  .sx-hosp-route__card-btn{width:100%;justify-content:center;}
}

/* ---- Узкие телефоны -------------------------------------------------- */
@media (max-width:480px){
  .sx-hosp-hero__title{font-size:20px;letter-spacing:-.6px;}
}