/* Поведение на узких экранах.
   Порядок сверху вниз: планшет → телефон. */

/* ══ ДО 1200: герой ужимается, фото интерьера уходят ══ */
/* Размер активного кадра галереи задан числом, а не через min():
   скрипт читает его, чтобы заранее вычислить центр, а вычисляемое
   значение он прочитать не может. */
@media (max-width: 1500px) {
  :root { --gal-w-active: 660px; --gal-h-active: 400px; }
}
@media (max-width: 1100px) {
  :root { --gal-w-active: 520px; --gal-h-active: 340px; --gal-w: 220px; --gal-h: 260px; }
}
@media (max-width: 760px) {
  :root { --gal-w-active: 330px; --gal-h-active: 250px; --gal-w: 150px; --gal-h: 190px; }
}

/* На страницах без врача справа больше свободного места — снимки клиники
   там крупнее, иначе первый экран выглядит полупустым. */
@media (min-width: 1201px) {
  .hero--no-doctor .hero__photo--1 { width: clamp(260px, 27vw, 400px); }
  .hero--no-doctor .hero__photo--2 { width: clamp(230px, 24vw, 350px); top: 340px; }
}

@media (max-width: 1200px) {
  /* Владелец: «в первом экране везде должны быть фотки нашей настоящей
     клиники». Раньше на узких экранах их просто прятали — человек с телефона
     клинику не видел вовсе. Теперь они идут в потоке, парой под текстом. */
  .hero__photos {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    grid-column: 1 / -1;   /* сетка первого экрана двухколоночная: занимаем обе */
  }
  .hero__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 267;
    object-fit: cover;
    border-width: 5px;
    transform: none;
  }
  .hero__botanical { display: none; }
  .benefits { margin-top: var(--s-3); }
  .hero__branch { left: 62%; top: 60px; }
  .hero__text { max-width: 58%; }
  .nav { margin-left: var(--s-4); gap: 22px; font-size: var(--fs-small); }
  .header__phone { font-size: 17px; }
  .directions__grid { grid-template-columns: repeat(3, 1fr); }
  .directions__grid li:nth-child(13) { grid-column: auto; }
  /* сводка встаёт над карточками: в две колонки на планшете отзывы
     сжимаются до столбика из одного слова */
  .reviews__panel { grid-template-columns: 1fr; gap: var(--s-3); }
  .reviews__summary { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
  .reviews__summary .reviews__title { margin-bottom: 0; }
  .reviews__score { font-size: 44px; }
  /* доля без minmax: minmax(0, 50%) разрешает колонке быть уже максимума,
     и сетка сжимает карточки до нечитаемых */
  .reviews__track { grid-auto-columns: 48%; }
  .doctors__track { grid-auto-columns: 48%; }
  .work-slider__track { grid-auto-columns: calc((100% - var(--s-3)) / 2); }
  .route__inner { grid-template-columns: 1fr 1fr; }
  .route__map { grid-column: 1 / -1; order: 3; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ══ ДО 900: одна колонка, меню в бургер ══ */
@media (max-width: 900px) {
  .burger {
    display: grid;
    place-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 8px;
  }
  .burger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
  }

  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s-2) var(--gutter);
    background: #fff;
    box-shadow: var(--sh-card);
    display: none;
  }
  .nav--open { display: flex; }
  .nav a { padding-block: 12px; }

  .header__inner { position: relative; min-height: 74px; gap: var(--s-3); }
  .header__phone { font-size: 15px; }
  .header__phone svg { display: none; }
  .logo__name { font-size: 16px; }
  .logo__mark svg { width: 36px; height: 36px; }

  /* Герой: на узком экране всё встаёт в поток — текст, под ним врач */
  .hero__inner { height: auto; padding-bottom: var(--s-3); }
  .hero__text {
    position: static;
    max-width: none;
    padding-top: var(--s-4);
    padding-left: 0;
  }
  .hero__lead br { display: none; }
  /* Первый экран внутренней страницы: врач встаёт в поток, поэтому
     запас высоты под абсолютную фигуру больше не нужен */
  .hero--inner .hero__inner { min-height: 0; }
  .hero--inner .hero__text { padding-top: 8px; max-width: none; }
  .hero--inner .facts--hero { max-width: none; }
  .hero--inner .hero__doctor { top: auto; }

  .hero__doctor {
    position: static;
    width: min(420px, 86vw);
    margin: var(--s-3) auto 0;
    transform: none;
  }
  .hero__doctor > img,
  .hero__doctor > picture > img { width: 100%; height: auto; }
  .hero__branch { display: none; }
  .hero__proof { flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

  /* Преимущества: две колонки, волну убираем — на узком она нечитаема */
  .benefits { margin-top: var(--s-4); }
  .benefits__ribbon { display: none; }
  .benefits__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .benefits__inner .benefit:last-child { grid-column: 1 / -1; }

  /* Отзывы: сводка над карточками, одна карточка на экран.
     Иначе сетка держит три колонки и текст рассыпается по одному слову. */
  .reviews__panel { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-3); }
  .reviews__score { font-size: 56px; }
  /* чуть уже экрана — край следующей карточки виден и подсказывает,
     что список листается */
  .reviews__track { grid-auto-columns: 100%; }
  .doctors__track { grid-auto-columns: 100%; }
  .review__source { flex-wrap: nowrap; white-space: nowrap; }

  .directions__grid { grid-template-columns: repeat(2, 1fr); }

  .route__inner { grid-template-columns: 1fr; }
  .route__map { order: 0; }

  .cta__panel { flex-direction: column; text-align: center; gap: var(--s-3); padding-block: var(--s-4); padding-left: var(--s-4); }
  .cta__person { display: none; }
  .cta__title { font-size: 28px; }

  .footer__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__bottom { flex-direction: column; gap: var(--s-2); }
  .footer__pattern { display: none; }
  /* контурные листья справа на узком экране не нужны, а сияние
     теперь стоит за фигурой врача — см. блок первого экрана ниже */
  .hero__botanical { display: none; }
}

/* ══ ДО 560: телефон ══ */
@media (max-width: 560px) {
  /* Секции: воздуха меньше, иначе страница растягивается на километр */
  .benefits,
  .reviews,
  .directions,
  .doctors,
  .gallery,
  .route  { padding-block: var(--s-5); }
  .cta    { padding-block: var(--s-4) var(--s-5); }
  .section-title { margin-bottom: var(--s-4); }

  /* Шапка: номер сворачивается в значок, иначе распирает страницу */
  .header__phone {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    font-size: 0;
    border-radius: 50%;
    background: var(--glow);
  }
  .header__phone svg { display: block; width: 20px; height: 20px; }
  .logo__mark { flex-basis: 44px; }
  .logo__mark svg { width: 44px; height: 44px; }
  .logo__name { font-size: 16px; }
  .logo__sub { font-size: 10px; }
  .header__inner { gap: var(--s-2); min-height: 74px; }

  /* Первый экран */
  .hero__text { padding-top: var(--s-3); }
  .hero__doctor { width: min(330px, 76vw); margin-top: var(--s-2); }
  .hero--inner .facts--hero { gap: 12px; }
  .hero__cta { margin-top: var(--s-4); }
  .hero__proof { flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
  /* Рейтинг и награда стоят друг под другом, поэтому их значки должны быть
     одного размера — иначе текст награды заметно уезжает вправо. */
  .rating__score { font-size: 30px; }
  .rating__caption { font-size: 15px; }
  .rating__top { gap: 9px; }
  .ya-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .award { gap: 9px; }
  /* медаль крупнее значка Яндекса, но текст выравниваем отступом,
     чтобы обе строки начинались с одной вертикали */
  /* Медаль и подписи держим в одном размере с рейтингом слева: у награды
     текст был на два-три пункта мельче, и два блока читались как разные. */
  .award img { width: 56px; height: 56px; margin-left: -7px; }
  .award__text { width: auto; }
  .award__text strong { font-size: 17px; }
  .award__text span { font-size: 15px; }
  .stars svg { width: 112px; height: 20px; }

  /* Кнопки: узкий экран не повод превращать их в полосу */
  .btn { padding: 17px 18px 17px 24px; font-size: 16px; }
  .btn__arrow { width: 32px; height: 32px; flex-basis: 32px; }

  /* Преимущества: две колонки, пятая иконка на телефоне не нужна.
     Блок подтянут вверх — под первым экраном оставался лишний провал. */
  .benefits { margin-top: 0; padding-block: 0 var(--s-5); }
  .benefits__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-2); }
  .benefits__inner .benefit:nth-child(5) { display: none; }
  .benefit img { width: 96px; height: 96px; }
  .benefit p { font-size: 16px; }

  /* Направления: две колонки — иначе пятнадцать карточек идут бесконечной лентой */
  /* По одной программе в строке: карточка лежит горизонтально — снимок
     слева, название справа. Так строка не вырастает в громоздкую плитку. */
  .directions__grid { grid-template-columns: 1fr; gap: 10px; }
  .directions__grid .dir {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    min-height: 96px;
  }
  .directions__grid .dir img {
    width: 148px;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .directions__grid .dir__foot {
    min-width: 0;
    padding: 18px 16px;
    font-size: 17px;
  }
  /* Длинные названия («Дерматовенерология») в узкой колонке доезжали
     до стрелки и лезли под неё. Даём тексту переноситься и держим
     между ним и стрелкой воздух. */
  .directions__grid .dir__foot > span:first-child {
    min-width: 0;
    padding-right: 6px;
    /* Кегль под самое длинное название: «Дерматовенерология» должно
       вставать целиком. Рвать слово посреди корня некрасиво, поэтому
       перенос только по слогам, средствами браузера. */
    font-size: 15px;
    line-height: 1.25;
    hyphens: auto;
  }
  .dir img { aspect-ratio: 4 / 3; }
  .dir__foot { padding: 9px 10px; font-size: 14px; gap: 6px; }
  .arrow-pill { width: 24px; height: 24px; flex-basis: 24px; }

  /* Врачи: карточка во всю ширину экрана, стрелки лежат поверх ленты
     по краям — так же, как в галерее. Раньше стрелки стояли в ряду
     и отнимали у карточки почти сто пикселей. */
  .doctors__slider {
    position: relative;
    display: block;
    /* лента выходит за поля страницы: карточке достаётся вся ширина */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: 0;
  }
  .doctors__slider .slider-viewport { padding-inline: var(--gutter); }
  .doctors__slider .slider-arrow {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #fdf1c6 0%, #f2c23a 45%, #cf9a10 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(140, 105, 10, .2), 0 8px 18px rgba(205, 160, 30, .3);
  }
  .doctors__slider .slider-arrow svg { width: 22px; height: 22px; }
  .doctors__slider .slider-arrow--prev { left: 6px; }
  .doctors__slider .slider-arrow--next { right: 6px; }

  /* Лента «Как проходит приём» ведёт себя так же: один кадр на экран,
     стрелки лежат поверх ленты по краям. */
  .work-slider__inner {
    position: relative;
    display: block;
    margin-inline: calc(-1 * var(--gutter));
  }
  .work-slider__inner .slider-viewport { padding-inline: var(--gutter); }
  .work-slider__track { grid-auto-columns: 100%; }
  .work-slider__inner .slider-arrow {
    position: absolute;
    top: 34%;
    z-index: 3;
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #fdf1c6 0%, #f2c23a 45%, #cf9a10 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(140, 105, 10, .2), 0 8px 18px rgba(205, 160, 30, .3);
  }
  .work-slider__inner .slider-arrow svg { width: 22px; height: 22px; }
  .work-slider__inner .slider-arrow--prev { left: 6px; }
  .work-slider__inner .slider-arrow--next { right: 6px; }
  .work__title { font-size: 18px; }

  .doctors__track { grid-auto-columns: 100%; }
  .doc__frame { max-width: 260px; height: 250px; }
  .doc__blob { width: min(105%, 300px); height: 260px; }
    /* Имя не должно ложиться на фигуру: на телефоне кадр обрезан плотнее,
     и под текстом оказывались руки и стетоскоп, а не растворённый низ. */
  .doc__name { margin-top: -18px; }
  .doc__credentials img { width: 92px; }

  /* Галерея устроена как карусель врачей: кадр во всю ширину экрана,
     стрелки лежат поверх него по краям.
     Размеры только через переменные — их читает скрипт, когда считает
     центр; заданные мимо них ширины ломали расчёт. */
  .gallery__slider {
    position: relative;
    display: block;
    padding-inline: 0;
  }
  .gallery__slider .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
  }
  .gallery__slider .slider-arrow svg { width: 22px; height: 22px; }
  .gallery__slider .slider-arrow--prev { left: 10px; }
  .gallery__slider .slider-arrow--next { right: 10px; }

  :root {
    --gal-w: 26px;
    --gal-h: 210px;
    --gal-w-active: 343px;
    --gal-h-active: 240px;
  }

  /* Маршрут и карта */
  .route__title { font-size: 28px; }
  .route__map iframe { height: 260px; }

  /* Призыв */
  .cta__panel { flex-direction: column; text-align: center; gap: var(--s-3); padding: var(--s-4) var(--s-3); }
  .cta__person { display: none; }
  .cta__title { font-size: 26px; }

  /* Футер: ссылки в две колонки, иначе он вытягивается на два экрана */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-2); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__contacts { grid-column: 1 / -1; }
  .footer__phone a { font-size: 20px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
  .footer__pattern { display: none; }
  .footer__col li { padding-block: 0; }
  .footer__col li a,
  .footer__bottom a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Отзывы: виджет сам по себе узкий, ему нужен весь доступный простор */
  .reviews__widget { margin-inline: calc(var(--gutter) * -0.5); }
}

/* Сенсорные экраны: смахивание — но только на узких, где стрелок нет.
   Раньше это правило срабатывало и на сенсорных мониторах, ломая обрезку. */
@media (hover: none) and (max-width: 900px) {
  /* прокрутку убрали: ленту двигает скрипт, а жест он ловит сам —
     иначе палец тянул и ленту, и счётчик кадров одновременно */
  .slider-viewport {
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .slider-viewport::-webkit-scrollbar { display: none; }
  .reviews__track > *,
  .doctors__track > * { scroll-snap-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Внутренние страницы: каталог справок и страница документа
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .certs__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid   { grid-template-columns: repeat(2, 1fr); }
  .cert { min-height: 210px; }
}

@media (max-width: 1100px) {
  /* Фото уходит под текст: в узкой колонке оно мельчает до нечитаемого */
  .pagehead__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .pagehead__photo { max-width: 560px; transform: rotate(1.4deg); }
}

@media (max-width: 900px) {
  .pagehead { padding-block: 0 var(--s-5); }
  .pagehead__photo { border-width: 5px; transform: none; }
  .pagehead--doc { padding-bottom: var(--s-5); }
  .pagehead__lead { font-size: var(--fs-body); }
  .pagehead__glow { width: 300px; top: -120px; right: -110px; opacity: .45; }
  .pagehead__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 18px; }
  .pagehead__icon svg { width: 28px; height: 28px; }

  .facts { gap: 12px; margin-top: var(--s-4); }
  .facts__item { flex: 1 1 150px; padding: 14px 16px 13px; }
  .facts__val b { font-size: 25px; }
  .facts__val--sm { font-size: 16px; }

  .certs, .why, .prices, .qa { padding-bottom: var(--s-5); }

  /* Широкая плитка на узком экране складывается в обычную колонку */
  .cert--wide { flex-direction: column; align-items: flex-start; padding: 22px 22px 18px; }
  .cert--wide .cert__icon { margin-bottom: 16px; }
  .cert--wide .cert__foot { width: 100%; margin-top: 18px; justify-content: space-between; }

  .price-table thead th { padding: 14px 18px; }
  .price-table td { padding: 14px 18px; font-size: var(--fs-small); }
  .price-table__val { font-size: 21px; }

  .prices__ask { padding: 24px 22px; }
  .prices__ask p { font-size: var(--fs-body); }

  .qa__item summary { padding: 18px 20px; font-size: var(--fs-body); }
  .qa__body { padding: 0 20px 22px; }
  .prose p, .prose__list li { font-size: var(--fs-small); }
}

@media (max-width: 560px) {
  .certs__grid { grid-template-columns: 1fr; gap: 14px; }
  .why__grid   { grid-template-columns: 1fr; gap: 14px; }
  .cert { min-height: 0; padding: 20px 20px 16px; }
  .cert__icon { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 14px; }
  .cert__icon svg { width: 27px; height: 27px; }
  .cert__name { font-size: 18px; }
  .cert__foot { padding-top: 18px; }

  .crumbs { flex-wrap: wrap; gap: 7px; margin-bottom: var(--s-3); }
  .pagehead__actions { gap: var(--s-3); }
  .pagehead__phone { font-size: 19px; }

  /* Каждый факт — своей строкой: в две колонки цифры уже не читаются.
     В колонке flex-basis считается по высоте, поэтому рост отключаем —
     иначе плашки растягиваются в пустые прямоугольники. */
  .facts { flex-direction: column; }
  .facts__item { flex: 0 0 auto; max-width: none; padding: 15px 20px 14px; }

  /* Таблица уезжала бы за экран — даём ей прокручиваться внутри своей рамки */
  /* На телефоне таблица не помещается по ширине, и колонка со стоимостью
     уезжала за край: человек видел названия услуг и ни одной цены, пока
     не догадается протянуть таблицу вбок. Поэтому здесь не таблица,
     а список карточек — услуга сверху, цена под ней. */
  .price-table { overflow: visible; }
  .price-table table,
  .price-table tbody,
  .price-table tr,
  .price-table td { display: block; width: 100%; min-width: 0; }
  .price-table thead { display: none; }
  .price-table tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }
  .price-table tr:last-child { border-bottom: 0; }
  .price-table td { padding: 0; border: 0; }
  .price-table td + td { margin-top: 6px; }
  .price-table__val {
    text-align: left;
    font-size: 22px;
    color: var(--brand-deep);
  }

  .qa__sign { flex-basis: 26px; width: 26px; height: 26px; }
  .qa__sign::before, .qa__sign::after { width: 11px; }
}

@media (max-width: 900px) {
  .cred__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .cred__lead { margin: 0 auto var(--s-4); font-size: var(--fs-small); }
}
@media (max-width: 560px) {
  .cred__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cred__caption { margin-top: 11px; font-size: var(--fs-tiny); }
}

/* Между 1000 и 1400 фигура врача подходит вплотную к тексту, и последнее
   слово заголовка ложится прямо на халат. Сдвигаем врача правее и слегка
   уменьшаем — колонка текста получает нужный запас. */
@media (min-width: 1001px) and (max-width: 1400px) {
  .hero__text { max-width: 50%; }
  .hero__doctor { left: 58%; width: clamp(400px, 52vw, 700px); }
  .hero__doctor > img,
  .hero__doctor > picture > img { height: clamp(390px, 44vw, 560px); }
  .hero__branch { left: 61%; width: clamp(110px, 12vw, 165px); }
  .hero__halo { left: 55%; width: clamp(250px, 27vw, 380px); }
}

/* ═══ ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ ═══
   Сверху заголовок с названием клиники и станцией, ниже — портрет врача
   справа и его имя слева, затем запись, условие скидки и рейтинг. */
@media (max-width: 960px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: start;
    column-gap: 12px;
    min-height: 0;
    padding-top: 18px;             /* заголовок не должен липнуть к шапке */
  }

  .hero__text { display: contents; }

  .hero__text h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 26px;
    line-height: 1.14;
  }
  .hero__what { margin-top: 12px; font-size: 19px; }

  .hero__metro { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; font-size: 15px; }

  /* Оффер под кнопкой, по центру: он должен читаться как выгода,
     а не как сноска мелким серым. */
  .hero__lead {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--brand-deep);
    text-align: center;
    white-space: normal;
  }

  .hero__proof { grid-column: 1 / -1; grid-row: 6; }
  .hero__cta   { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; }

  /* портрет и подпись — разные ячейки сетки, поэтому обёртку растворяем */
  .hero__doctor { display: contents; }

  /* Кадр по грудь. Обычная подгонка картинки тут не годится: снимок узкий,
     и «покрытие» срезает его по бокам, а не сверху. Поэтому увеличиваем
     фигуру и обрезаем рамкой, а растворение низа вешаем на саму рамку. */
  /* Снимок для телефона обрезан по грудь и растворён в самом файле,
     поэтому здесь только размер и положение. */
  .hero__doctor picture {
    display: block;
    grid-column: 2;
    grid-row: 3;
    margin-top: 26px;          /* воздух между заголовком и портретом */
    margin-right: calc(-1 * var(--gutter) - 6px);
    overflow: visible;
  }
  .hero__doctor picture > img {
    display: block;
    width: 132%;
    height: auto;
    max-width: none;
    margin-left: -20%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* имя врача — слева от портрета, на уровне лица */
  /* имя стоит на уровне лица врача, ближе к верху кадра */
  .hero__doctor figcaption {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: 78px;
    text-align: left;
  }
  .doccard__name { font-size: 18px; }
  .doccard__role,
  .doccard__exp { font-size: 13px; }

  /* на телефоне пара снимков клиники остаётся, но уже,
     чтобы не отодвигать кнопку записи за экран */
  .hero__photos { gap: 10px; margin-top: 14px; }

  /* Голубое сияние — за головой врача, как на компьютере. Считаем от той же
     точки, где стоит портрет: он занимает правые 54% ширины. */
  .hero__halo {
    top: 205px;
    left: 70%;
    width: 74vw;
    transform: translateX(-50%);
    opacity: .85;
    z-index: 0;
  }

  /* Ветка сбоку от фигуры, ближе к плечу */
  .hero__branch {
    display: block;
    position: absolute;
    top: 190px;
    left: 71%;
    width: 124px;
    z-index: 0;
  }

  .hero__doctor picture,
  .hero__doctor figcaption { position: relative; z-index: 1; }

  /* ── Внутренние страницы: тот же порядок, что на главной, но состав другой.
     Сверху крошки и заголовок, ниже портрет врача справа с именем слева,
     затем цена с приёмом, рейтинг с наградой, кнопка и описание. ── */
  .hero--inner .hero__inner { padding-top: 12px; }

  /* На внутренних страницах заголовок стоит выше, чем на главной, и ветка
     со своей общей раскладки ложилась прямо на слова — «Капельницы
     в Химках» читалось сквозь цветы. Опускаем её к плечу фигуры. */
  .hero--inner .hero__branch { top: 150px; }

  /* Предмет (пробирки, шприц, лоток) на широком экране стоит absolute
     рядом с текстом. На телефоне колонка одна, и он ложился прямо на цену
     и рейтинг — здесь он обычный блок под описанием. */
  .hero--inner .hero__object {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(168px, 46vw);
    margin: 4px auto 0;
    transform: none;
  }

  .hero--inner .crumbs {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 8px;
    font-size: 13px;
  }
  /* max-width в 9.5em придуман для широкого экрана; на телефоне из-за него
     «Оториноларингология» не помещается в строку и уезжает за край */
  .hero--inner .hero__text h1 {
    grid-row: 2;
    max-width: none;
    font-size: 25px;
    overflow-wrap: break-word;
  }

  /* портрет: фигура выходит за правый край, как у врача на главной */
  .hero--inner .hero__doctor > img {
    display: block;
    grid-column: 2;
    grid-row: 3;
    width: 108%;
    max-width: none;
    height: auto;
    margin-top: 14px;
    margin-left: -4%;
    margin-right: calc(-1 * var(--gutter) - 6px);
    position: relative;
    z-index: 1;
  }
  .hero--inner .hero__doctor figcaption {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: 84px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    position: relative;
    z-index: 1;
  }

  /* цена и часы приёма — в столбик: в строку они не помещаются
     и обрезаются по правому краю */
  .hero--inner .facts--hero {
    grid-column: 1 / -1;
    grid-row: 4;
    flex-direction: column;
    align-items: start;
    gap: 8px;
    margin-top: 12px;
  }
  .hero--inner .facts--hero .facts__item { flex: 0 0 auto; }
  .hero--inner .hero__proof { grid-row: 5; }
  .hero--inner .hero__cta   { grid-row: 6; }

  /* описание услуги — обычный абзац, а не оффер, как на главной */
  .hero--inner .hero__lead {
    grid-row: 7;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
    white-space: normal;
  }

  .hero__proof {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: var(--s-3);
  }
  /* кнопка во всю ширину: по такой проще попасть пальцем, и она
     собирает на себе внимание в конце первого экрана */
  .hero__cta {
    margin-top: 20px;
    font-size: 19px;
    padding: 21px 28px;
    justify-content: center;
    text-align: center;
  }
}

/* Планшеты используют ту же последовательность, но не растягивают портрет. */
@media (min-width: 761px) and (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 320px; }
  .hero__doctor picture > img,
  .hero--inner .hero__doctor > img { width: 100%; margin-left: 0; }
  .hero__doctor figcaption { justify-self: end; max-width: 230px; }
  .hero__halo { width: 340px; top: 130px; left: 72%; }
}
/* Справку на телефоне встречает изображение, как и врачебные услуги. */
@media (max-width: 760px) {
  .pagehead--doc .pagehead__grid { gap: 0; }
  .pagehead--doc .pagehead__text, .pagehead--doc .pagehead__media { display: contents; }
  .pagehead--doc .crumbs { grid-row: 1; }
  .pagehead--doc .pagehead__icon { display: none; }
  .pagehead--doc .pagehead__title { grid-row: 2; }
  .pagehead--doc .pagehead__thing { grid-row: 3; padding: 12px 0; }
  .pagehead--doc .pagehead__thing img { max-height: 160px; margin: auto; }
  .pagehead--doc .pagehead__lead { grid-row: 4; }
  .pagehead--doc .facts { grid-row: 5; }
  .pagehead--doc .pagehead__actions { grid-row: 6; }
  .pagehead--doc .hero__proof { grid-row: 7; margin-block: 20px; }
  .pagehead--doc .pagehead__photos { grid-row: 8; }
  .prices__action .btn { font-size: 17px; padding: 18px 22px; }
  .cta__panel::after { display: none; }
}