/* Мобильные правки ЭСС Капитал.
   Кастомные блоки собраны без адаптива: сетки остаются многоколоночными
   на телефоне, из-за чего карточки шире экрана и часть текста не видна. */

@media (max-width: 768px) {

  /* Сетки услуг, зон и авторского блока — в одну колонку */
  .services-grid,
  .services-grid-wide,
  .zones-grid,
  .author-layout {
    grid-template-columns: 1fr !important;
  }

  /* Карточка с grid-column:span 2 достраивала вторую колонку даже в сетке 1fr,
     а min-width:auto не давал содержимому сжаться до ширины экрана */
  .services-grid > *,
  .services-grid-wide > *,
  .zones-grid > *,
  .author-layout > * {
    grid-column: span 1 !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Пошаговый маршрут не помещался в строку и обрезался справа */
  .route-steps {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* Активный шаг считал ширину без учёта внутренних отступов */
  .route-step {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Три цифры в ряд с отступом 40px не помещались в 335px */
  .author-stats {
    flex-wrap: wrap;
    gap: 20px 28px;
  }

  /* iOS Safari увеличивает всю страницу, когда фокус попадает в поле
     с размером шрифта меньше 16px. Для формы заявки это критично. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Кнопки и поля — комфортная высота для пальца */
  .ess-mform-submit,
  .form-submit {
    min-height: 48px;
  }
}

/* Узкие экраны (iPhone SE и подобные, 320px):
   логотип и кнопка в шапке вместе не помещались в строку */
@media (max-width: 360px) {

  .ess-nav-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 12px !important;
  }

  /* в блоке эти значения заданы через !important, поэтому перебиваем так же */
  .ess-nav-cta {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  .ess-logo {
    font-size: 14px !important;
    min-width: 0;
  }

  .ess-nav-cta {
    white-space: normal !important;
    line-height: 1.2;
    text-align: center;
  }

  /* фото автора задано фиксированными 300px и не влезало в 320 */
  .author-photo,
  .author-photo > * {
    width: auto !important;
    max-width: 100% !important;
  }

  h1 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {

  /* На узких экранах карточкам нужны меньшие внутренние отступы,
     иначе на контент остаётся слишком мало ширины */
  .service-card {
    padding: 20px;
  }
}

/* Скрытое меню оставалось flex-элементом нулевой ширины и всё равно
   добавляло промежуток в 12px — на 320px этого хватало для переполнения */
@media (max-width: 360px) {
  .ess-nav-links {
    display: none !important;
  }

  /* кнопке запрещено сжиматься (flex-shrink:0 в блоке), из-за чего
     она вместе с логотипом не влезала в 320px */
  .ess-nav-cta {
    flex-shrink: 1 !important;
    min-width: 0;
  }
}

/* Список «что вы получите» на странице скоринга собран из flex-строк,
   которым не давали сжиматься — на 320px он вылезал за экран */
@media (max-width: 360px) {
  .get-list,
  .get-item {
    max-width: 100%;
    min-width: 0;
  }

  .get-item {
    flex-wrap: wrap;
  }

  .get-text {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Общая страховка для узких экранов: блоки со своими отступами
   считались без box-sizing и вылезали на несколько пикселей */
@media (max-width: 360px) {
  .example-card,
  .get-list,
  .get-item,
  .get-text {
    box-sizing: border-box;
    max-width: 100%;
  }
}