/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (только мобильные / планшеты)
   Десктоп (>=1200px) НЕ изменяется и полностью совпадает
   с эталонным дизайном (class2). Все правила ниже активны
   только на экранах <=1199px: они убирают горизонтальную
   прокрутку и переводят колонки в один столбец.
   ============================================================ */

/* ---------- Планшеты и телефоны: <=1199px ---------- */
@media (max-width: 1199px) {
  /* Нет горизонтальной прокрутки и ничего не шире экрана. */
  html,
  body.u-body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Медиа и таблицы не задают ширину больше экрана. */
  img,
  svg,
  video,
  iframe,
  object,
  embed,
  table {
    max-width: 100%;
  }

  /* Широкие фикс-контейнеры Nicepage ограничиваем шириной экрана. */
  .u-sheet,
  .u-layout,
  .u-layout-wrap,
  .u-layout-row,
  .u-group,
  .u-container-layout,
  .pricing-table,
  .table-one {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .u-sheet,
  .u-layout,
  .u-layout-wrap {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Отрицательные «гаттеры», которые выпирают за контейнер. */
  .u-gutter-40,
  .u-gutter-20,
  .u-gutter-10,
  .u-gutter-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Кастомная таблица цен — в одну колонку, без распорок min-width. */
  .table-one__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .table-one,
  .table-one__cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pricing-column {
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
  }

  .table-one__cell-price,
  .table-one__cell-price > * {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ---------- Телефоны: <=767px ---------- */
@media (max-width: 767px) {
  /* Многоколоночные ряды — в один столбец. */
  .u-layout-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px;
  }

  .u-layout-cell {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Медиа внутри секций — строго по ширине контейнера. */
  section img:not(.u-logo-image),
  section video,
  section iframe,
  section object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Кнопки сжимаются под экран, длинный текст переносится. */
  .u-btn,
  .u-btn-1,
  .u-btn-round,
  .u-btn-submit,
  .table-one__cell-button {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .table-one__cell-button {
    display: block;
    width: 100%;
    margin: 14px auto 0;
  }

  /* Текстовые блоки с жёсткой шириной в px — делаем текучими. */
  .u-text,
  [class*="u-text-"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Секция формы заявки — форма на всю ширину. */
  .u-section-8 .u-form-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- Узкие телефоны: <=575px ---------- */
@media (max-width: 575px) {
  .u-sheet {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .table-one__cell-list-item,
  .table-one__cell-list-item--green {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ---------- Очень узкие экраны: <=360px ---------- */
@media (max-width: 360px) {
  .u-text,
  [class*="u-text-"] {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}