/* Mobile patch — аккуратная адаптация главной и страницы услуг */

html{ -webkit-text-size-adjust: 100%; }

/* ===== Глобальный "чуть меньше" масштаб на мобильных =====
   Запрос: уменьшить ощущения "огромности" без ломания сетки.
   Делаем компактнее типографику, высоты кнопок и вертикальные отступы.
   (Работает лучше, чем viewport initial-scale, и не ломает iOS.) */
@media (max-width: 640px){
  html{ -webkit-text-size-adjust: 95%; }
  body{ font-size: 15px; }

  /* меньше вертикальных отступов в шапке */
  .header{ padding: 10px 0; }

  /* кнопки: чуть ниже и компактнее */
  .button{ height: 44px !important; font-size: 13px; }
  .button--1{ padding-left: 20px; padding-right: 20px; }
  .index-hero__button{ height: 44px !important; font-size: 14px; padding-left: 22px; padding-right: 22px; }

  /* инпуты/селекты: меньше паддинг, чтобы формы не раздувались */
  input, select, textarea{ font-size: 15px; }
  .input input, .input select, .input textarea{ padding: 10px; }

  /* формы авторизации/регистрации */
  .form{ padding: 18px; border-radius: 14px; }

  /* таблицы в личных кабинетах/страницах */
  .table th, .table td{ padding: 8px 10px; }

  /* карточки: чуть компактнее */
  .card{ padding: 16px; }

  /* specialists.php: компактнее кнопки и карточки */
  .spec-card{ padding: 14px; border-radius: 14px; }
  .spec-btn{ padding: 9px 12px; border-radius: 10px; font-size: 13px; }
  .svc-item{ padding: 10px; }
}

@media (max-width: 380px){
  body{ font-size: 14px; }
  .button, .index-hero__button{ height: 42px !important; }
}

/* На мобильных «кривизна» часто появляется из‑за элементов шире экрана.
   На десктопе overflow не трогаем, чтобы не ломать полноценную вёрстку. */
@media (max-width: 992px){
  img, svg{ max-width: 100%; height: auto; }
  /* Не блокируем прокрутку жёстко (может "заставить" страницу остаться в смещённом X).
     Вместо этого обрезаем редкие выбросы аккуратнее. */
  html{ max-width: 100%; }
  body{ max-width: 100%; overflow-x: hidden; overflow-x: clip; }
}

/* По умолчанию скрываем элементы мобильного слайдера (покажем на маленьких экранах) */
body.page-home .home-specialists__dots,
body.page-home .home-specialists__all-mobile{ display: none; }

/* Универсальные отступы контейнера на мобильных */
@media (max-width: 640px){
  .container, .container--new{ padding-left: 16px !important; padding-right: 16px !important; }
}

/* ===== Fix: container--new (шапка) на мобильных =====
   В assets/styles.css есть правило для .container--new при max-width:1100px,
   которое делает его inline-block и/или сдвигает влево (margin-left:-35px).
   На телефонах из-за этого логотип «уезжает» за край экрана.
   Переписываем ТОЛЬКО для мобильных, ПК-верстку не трогаем. */
@media (max-width: 992px){
  .container--new{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Шапка должна оставаться flex-контейнером (в assets/styles.css на мобильных
     .container--new может перезаписать display). */
  .header__inner.container--new{ display: flex !important; }
}

/* ===== Header: компактнее на мобильных + бургер до 992px ===== */
@media (max-width: 992px){
  /* Safe-area + гарантированный внутренний отступ, чтобы логотип не "уезжал" за край экрана */
  .header__inner{
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
  }

  /* На некоторых разметках/страницах контейнер может терять паддинги —
     страхуемся минимальным отступом непосредственно у логотипа. */
  .header__logo{ padding-left: 6px; }

  /* Ограничиваем логотип по высоте везде на мобильных (не зависит от JS-класса) */
  .header__logo img{ height: 32px; width: auto; max-width: 220px; object-fit: contain; }
  body.m-burger-present .header__inner{ gap: 10px; }

  /* На мобильных прячем десктопные кнопки/ссылки в шапке — всё доступно в бургер-меню.
     Это предотвращает переполнение, из-за которого логотип уезжал за край экрана. */
  body.m-burger-present .auth{ display: none !important; }

  body.m-burger-present .header__logo{
    margin-left: 0 !important;
    margin-right: auto !important;
    flex-shrink: 1 !important;
    min-width: 0;
  }
  body.m-burger-present .header__logo{ max-width: calc(100vw - 72px); }
  body.m-burger-present .header__logo img{
    display: block;
    height: 32px;
    width: auto;
    max-width: 100% !important;
    object-fit: contain;
  }
  body.m-burger-present .m-burger{ margin-left: auto; }
}

/* ===== /services.php: центрирование и защита от «уезда» вправо на мобильных ===== */
@media (max-width: 992px){
  body.services-page .services-container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Явно задаём боковые отступы именно для /services.php,
       чтобы карточки не «прилипали» к краям и визуально были по центру.
       Safe-area учтён для iPhone с «чёлкой». */
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
  }
  body.services-page .services-grid{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-items: stretch;
  }
  body.services-page .service-card{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== /services.php: компактнее карточки на мобильных ===== */
@media (max-width: 640px){
  .services-page .services-hero{ padding: 10px 0 6px; }
  .services-page .services-subtitle{ font-size: 13px; margin-bottom: 14px; }
  .services-page .services-grid{ gap: 12px; }
  .services-page .service-card{ padding: 14px; border-radius: 16px; }
  .services-page .service-card__title{ font-size: 16px; }
  .services-page .service-card__info{ font-size: 13px; line-height: 1.45; }
  .services-page .service-card__price-value{ font-size: 18px; }
  .services-page .service-card__actions--stack{ gap: 8px; }
  .services-page .service-card__actions--stack .button{ height: 42px !important; }
}

/* ===== Главная (index.php) ===== */
@media (max-width: 640px){
  body.page-home .hero{
    height: auto;
    min-height: 320px;
    /* снизу больше воздуха, чтобы «плавающая» белая панель не перекрывала кнопки */
    padding: 46px 0 96px;
    background-position: center;
  }
  body.page-home .home-hero__subtitle{ font-size: 15px; }

  /* Кнопки в баннере: строго без сдвигов и всегда влезают */
  body.page-home .home-hero__actions{ gap: 12px; }
  body.page-home .home-hero__actions .button{ width: 100%; max-width: 360px; transform: none !important; }

  /* Белая панель после баннера: на мобильных без «наезда», чтобы ничего не перекрывало */
  body.page-home .home-panel{ margin-top: 0 !important; padding-top: 18px; }

  /* Заголовок секции на мобильных: в столбик (без «прижатой» ссылки) */
  body.page-home .home-section-head{ flex-direction: column; align-items: flex-start; gap: 6px; }
  body.page-home .home-section-title{ font-size: 20px; }
  body.page-home .home-section-link{ margin: 0; font-size: 13px; }

  /* Наши специалисты: на мобильных делаем слайдер как «популярные сервисы»
     Важно: НИКАКИХ отрицательных margin — они создают горизонтальный скролл страницы. */
  body.page-home .home-specialists__frame{
    border: 1px solid rgba(11,183,167,.55);
    border-radius: 14px;
    padding: 10px;
    background: #fff;
  }
  body.page-home .home-specialists__grid{
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 0 10px;
    margin: 0;
    scroll-padding: 12px;
  }
  body.page-home .home-specialists__grid::-webkit-scrollbar{ display:none; }
  body.page-home .home-specialists__grid{ scrollbar-width: none; }
  body.page-home .doctor-card{
    flex: 0 0 82%;
    max-width: 420px;
    scroll-snap-align: start;
  }
  body.page-home .doctor-card__photo{ height: 124px; object-fit: contain; }

  /* Скрываем «Все специалисты» в заголовке и показываем под слайдером */
  body.page-home .home-section-link--specialists-desktop{ display: none; }
  body.page-home .home-specialists__all-mobile{
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: #2F6FAD;
    text-decoration: none;
  }

  /* Точки как на слайдере */
  body.page-home .home-specialists__dots{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  body.page-home .home-specialists__dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: #cfd8e6;
    padding: 0;
  }
  body.page-home .home-specialists__dot.is-active{ background: #2F6FAD; }

  /* Таблица услуг превращается в карточки */
  body.page-home .service-table{
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  body.page-home .service-table thead{ display:none; }
  body.page-home .service-table tbody{ display:block; }
  body.page-home .service-table tr{
    display:block;
    background:#fff;
    border: 1px solid #e2e8f3;
    border-radius: 14px;
    padding: 10px 10px 12px;
    margin-bottom: 12px;
    box-shadow: 0 8px 18px rgba(16,24,40,.06);
  }
  body.page-home .service-table td{
    display:block;
    width: 100%;
    padding: 8px 0;
    border: none;
    text-align: left !important;
  }
  body.page-home .service-table td:last-child{ padding-top: 10px; }
  body.page-home .service-table td::before{
    content: attr(data-label);
    display:block;
    font-size: 12px;
    color: #6b7a90;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
  }
  body.page-home .service-table td:last-child::before{ content: ""; display:none; }
  body.page-home .service-table .service-action.button{ width: 100%; }
}

/* ===== Услуги (services.php) ===== */
/* На некоторых устройствах (крупные телефоны/планшеты) ширина >640px,
   поэтому перестраиваем карточку в колонку уже с 860px — так ничего не обрезается. */
@media (max-width: 860px){
  body.services-page .service-card__summary{ flex-direction: column !important; }
  body.services-page .service-card__summary-right{
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }
  body.services-page .service-card__price{ text-align: left !important; min-width: 0 !important; }
}

@media (max-width: 640px){
  body.services-page .services-hero{ margin: 14px 0 6px; }
  body.services-page .services-title{ font-size: 22px; }
  body.services-page .services-subtitle{ font-size: 13px; }

  body.services-page .services-grid{ gap: 12px; }

  body.services-page .service-card{ padding: 12px; border-radius: 14px; min-height: auto; }
  body.services-page .service-card__title{ font-size: 16px; }
  body.services-page .service-card__info{ font-size: 13px; }

  body.services-page .service-card__price-label{ font-size: 12px; }
  body.services-page .service-card__price-value{ font-size: 18px; white-space: normal; }

  body.services-page .service-card__actions--stack{ gap: 8px; }
  body.services-page .service-card__details{ margin-top: 10px; padding-top: 10px; }

  /* Деталка: компактнее отступы */
  body.services-page .svc-details{ padding: 12px; border-radius: 14px; }
  body.services-page .svc-details__title{ font-size: 15px; }
  body.services-page .svc-k{ font-size: 13px; }
  body.services-page .svc-v{ font-size: 13px; }
}


/* Extra-small */
@media (max-width: 380px){
  body.page-home .index-hero__title{ font-size: 22px; }
  body.services-page .services-title{ font-size: 22px; }
}