/* ===========================================
   RESPONSIVE — Адаптивная верстка главной
   Грузится последним в бандле главной, поэтому мобильные
   оверрайды hero живут здесь. Правила шапки - в chrome.css,
   мобильное меню - в menu.css.
   =========================================== */

/* ─── Tablet + Mobile (max 1024px): мобильный макет hero ───
   ВАЖНО: на <=1024 отключён html{zoom:1.25} (base.css), поэтому все
   десктопные компенсации /1.25 здесь перекрываются обычными единицами */
@media (max-width: 1024px) {
  :root {
    --container: 100%;
  }

  .container {
    padding: 0 var(--sp-5);
  }

  /* ── Hero: видео на весь первый экран ── */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
    padding-top: calc(var(--topbar-h) + var(--header-h) + 16px);
    padding-bottom: var(--sp-10);
  }

  /* Фон до самого верха - без серой полосы (topbar на мобиле скрыт) */
  .hero__bg { top: 0; }

  .hero__emblem { display: none; }

  /* ── Заголовочный блок: титулы и логотип по центру ── */
  .hero__heading-block,
  .hero__heading-block--compact {
    width: calc(100% - 32px);
    max-width: none;
    padding-left: 0;
    text-align: center;
    min-height: 0;
    margin-top: var(--sp-2);
  }
  /* Состояния после кликов не сдвигают блок */
  .hero--appointment-mode .hero__heading-block--compact,
  .hero--programs-mode .hero__heading-block--compact,
  .hero--mode-active .hero__heading-block--compact {
    margin-top: var(--sp-2);
  }

  .hero__upper-title {
    font-size: 12px;
    letter-spacing: 0.14em;
    line-height: 1.6;
    margin-bottom: 2px;
  }
  .hero__fgbu-title {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-bottom: 0;
  }

  /* Логотип - в потоке, по центру, ниже титулов */
  .hero__heading-logo,
  .hero__heading-block--compact .hero__heading-logo {
    position: static;
    left: auto; top: auto; bottom: auto;
    transform: none;
    margin: var(--sp-3) auto 0;
    width: min(48vw, 190px);
    height: 104px;
  }

  /* ── Обёртка тумблера/кнопок: на всю ширину, без десктопных сдвигов ── */
  .hero__toggle-wrap,
  .hero__toggle-wrap--toggle-showing,
  .hero__toggle-wrap--programs-showing,
  .hero__toggle-wrap--shifted {
    width: calc(100% - 32px);
    margin-left: 0;
    margin-top: var(--sp-4);
  }
  /* В engaged-состояниях компакт-кнопка (position:absolute, JS) висит под
     логотипом - отодвигаем wrap, чтобы тумблер/подкнопки не попали под неё */
  .hero--engaged .hero__toggle-wrap {
    margin-left: 0;
    margin-top: 80px;
  }

  /* Рисованная подсказка тумблера уезжает за экран - на мобиле не показываем */
  .toggle-hint { display: none; }

  /* ── Стартовые кнопки и подкнопки программ: одна под другой ── */
  .hero__starter,
  .hero__programs {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .hero__starter--visible,
  .hero__programs--visible {
    max-height: 280px;
  }
  /* Свёрнутый (не --visible) starter/programs всё равно тянет margin-bottom
     из базового правила (hero.css) - мёртвое пространство перед тумблером,
     пока блок невидим. .toggle--hidden уже обнуляет свой margin-bottom по
     этому же принципу (hero.css) - делаем то же здесь. */
  .hero__starter:not(.hero__starter--visible),
  .hero__programs:not(.hero__programs--visible) {
    margin-bottom: 0;
  }
  .hero-btn {
    min-width: 0;
    width: 100%;
    max-width: 420px;
    min-height: 76px;
    padding: 18px 24px;
  }
  /* Компакт-кнопка (перенесена в hero, position:absolute из JS) не должна
     наследовать min-height стартовой кнопки - иначе рендерится выше, чем
     inline height:42px, заданный из toggle.js. */
  .hero.hero--appointment-mode > .hero-btn,
  .hero.hero--programs-mode > .hero-btn {
    min-height: 0;
  }
  .hero-btn__title {
    font-size: 18px;
    max-width: none;
  }

  /* ── Контент режима (пилюли/CTA/телефоны): по центру, колонкой ── */
  .hero__subs,
  .hero__cta,
  .hero__phones,
  .hero--mode-active .hero__subs,
  .hero--mode-active .hero__cta,
  .hero--mode-active .hero__phones {
    padding-left: 0;
    justify-content: center;
  }
  .hero__subs--visible { max-height: 240px; }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__content--visible { max-height: 640px; }
  .hero__phones {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }
  .hero__phones--visible { max-height: 240px; }

  /* ── Info-карточки: из абсолюта справа - в поток под контентом ── */
  .hero__right,
  .hero__right--visible,
  .hero--mode-active .hero__right--visible {
    position: static;
    left: auto; top: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    flex-direction: column;
    transform: none;
  }
  .hero__right {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s var(--ease-smooth),
                opacity 0.6s var(--ease-smooth),
                margin-top 0.6s var(--ease-smooth);
  }
  .hero__right--visible,
  .hero--mode-active .hero__right--visible {
    max-height: 640px;
    margin-top: var(--sp-4);
  }

  /* ── Стеклянная подложка на всю ширину ── */
  .hero__backdrop,
  .hero__backdrop--expanded,
  .hero--mode-active .hero__backdrop--expanded {
    left: 0;
    transform: none;
    width: 100%;
  }

  #programs { scroll-margin-top: 84px; }

  /* ── Секции ── */
  .directions__grid,
  .directions__grid--secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .directions__all-list {
    column-count: 3;
  }

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

  .programs__grid {
    max-width: 100%;
    gap: var(--sp-4);
  }

  .about__content {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .advantages__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

/* ─── Mobile (max 768px) ─── */
@media (max-width: 768px) {
  .tricolor {
    height: 2px;
  }

  /* Topbar скрыт (chrome.css) - отступ hero только под шапку 60px */
  .hero {
    padding-top: 84px;
  }

  .toggle__btn {
    /* «Платные услуги» = 102px в Involve Bold 13px */
    width: min(30vw, 116px);
    padding: 12px 0;
    font-size: var(--text-sm);
  }

  /* Grids to 1 column */
  .directions__grid,
  .directions__grid--secondary,
  .certificates__grid {
    grid-template-columns: 1fr;
  }

  .directions__all-list {
    column-count: 2;
  }

  /* Текст кнопки «Все направления» не должен скрываться правилом
     .header__actions .btn--outline span из chrome.css */
  .directions__more .btn--outline span {
    display: inline;
  }

  .programs__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .program-card--featured {
    transform: none;
    order: -1;
  }

  .program-card--featured:hover {
    transform: translateY(-4px);
  }

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

  /* Плитки-цифры (40+/150+/50000+) строго по 2 в ряд */
  .about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .about__stat-box {
    min-width: 0;
    padding: var(--sp-4) var(--sp-3);
  }

  /* Секция поиска: шире бар/дропдаун (меньше боковых полей) + чипы по 3 в ряд */
  .search-section .container {
    padding: 0 var(--sp-3);
  }

  .search-section__tags {
    gap: var(--sp-1);
  }

  .search-section__tags .tag {
    padding: 6px 12px;
    font-size: var(--text-xs);
  }

  .advantages__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Section spacing */
  .section {
    padding: var(--sp-12) 0;
  }

  .section__title {
    font-size: var(--text-2xl);
  }

  /* Tabs scroll */
  .tabs {
    overflow-x: auto;
  }

  /* Modal */
  .modal__content {
    padding: var(--sp-6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: calc(100dvh - 24px);
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal__phones {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .modal__footer {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .modal__footer .btn {
    width: 100%;
  }

  /* Cards in sliders */
  .content-card {
    width: 300px;
  }

  /* Шире (по просьбе заказчика): было 160px и смотрелось тесно. 200px ~ как
     на десктопе (210px); в слайдере видна 1 карточка целиком + «пик» второй
     как сигнал прокрутки. Боковые отступы секции врачей уменьшены ниже
     (@media 768) - карточки ближе к краям экрана. */
  .doc-card {
    width: 200px;
  }

  /* Scroll hint hide on mobile */
  .hero__scroll-hint {
    display: none;
  }
}

/* ─── Mobile (max 768px) ─── */
@media (max-width: 768px) {
  /* Секция «Наши врачи» на телефоне: карточки заметно крупнее и ближе к краям.
     Прошлый шаг (160->200, отступ 20->12) заказчик почти не заметил, поэтому
     усилено: карточка 230px, боковой отступ секции 8px, промежуток между
     карточками 12px. Всё scoped на секцию врачей - прочие секции (их .container
     20px и общий .slider gap) не трогаем. Заголовок «Наши врачи» и стрелки
     сдвигаются к краю на ~12px, кнопка «Посмотреть всех» центрирована. */
  .doctors .container {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
  }
  .doctors .slider {
    gap: var(--sp-3);
  }
  .doc-card {
    width: 230px;
  }
}

/* ─── Small mobile (max 480px) ─── */
@media (max-width: 480px) {
  .hero-btn {
    min-height: 70px;
    padding: 16px 18px;
  }

  .hero-btn__title {
    font-size: 17px;
  }

  .toggle__btn {
    /* «Платные услуги» = 94.2px в Involve Bold 12px; на 320px экрана 30vw=96 - впритык, но влезает */
    width: min(30vw, 108px);
    padding: 11px 0;
    font-size: var(--text-xs);
  }

  .content-card {
    width: 260px;
  }

  .stat__number {
    font-size: var(--text-3xl);
  }

  .directions__all-list {
    column-count: 1;
  }
}