/* ETL-BUILD: 20260908c — если в браузере по адресу этого файла видно другую дату, на сервере лежит старая версия. */
/* ============================================================================
   ETL_MOBILE_OVERFLOW_0908 — то, что не помещалось и не прокручивалось.

   Что было. На html и body стоит `overflow-x: clip` — он не даёт странице
   ездить вбок целиком, и это правильно. Но у него есть цена: всё, что шире
   своего контейнера, просто отрезается. Без полосы прокрутки, без тени, без
   единого признака, что там что-то есть.

   Проверка 95 страниц на ширине 360 px: у 51 страницы часть содержимого
   оказалась за краем и недоступна. Главные виновники — таблицы: они свёрстаны
   с min-width 640 px и лежат в контейнерах шириной 300 px. Половина каждой
   таблицы не читалась на телефоне вообще.

   Что делаем. Даём таким блокам собственную горизонтальную прокрутку. Не
   ломаем таблицы в карточки: в них сравнивают колонки, а карточки сравнение
   убивают. Прокрутка внутри блока безопасна — страница вбок по-прежнему
   не едет.
   ============================================================================ */

@media (max-width: 1099px) {

  /* ── 1. Готовые обёртки таблиц. Часть из них уже имела overflow:auto,
        часть — нет; выравниваем все. ─────────────────────────────────────── */
  html body#top :is(
    .multi-table-wrap,
    .route-table-shell,
    .price-table-wrap,
    .etl-xscroll
  ) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Лента листается вбок — запрещать горизонтальные жесты нельзя,
       иначе палец вправо-влево не двигает её вообще. */
    touch-action: pan-x pan-y;
    max-width: 100%;
    /* Тонкая полоса вместо толстой системной: она здесь и указатель того,
       что содержимое продолжается. */
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.45) transparent;
  }

  html body#top :is(.multi-table-wrap, .route-table-shell, .price-table-wrap, .etl-xscroll)::-webkit-scrollbar {
    height: 4px;
  }
  html body#top :is(.multi-table-wrap, .route-table-shell, .price-table-wrap, .etl-xscroll)::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,.45);
    border-radius: 4px;
  }

  /* ── 2. Родители таблиц не должны сами растягиваться под их ширину:
        иначе прокрутка появится не у таблицы, а у всей секции. ──────────── */
  html body#top :is(
    .svc-section,
    .multi-overview,
    .blog-article,
    main#main-content
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /* ── 3. Хлебные крошки. Длинная цепочка уезжала за край и обрывалась на
        полуслове — переносим строкой, это читается лучше прокрутки. ─────── */
  html body#top nav.etl-breadcrumb {
    flex-wrap: wrap !important;
    row-gap: 4px;
    min-width: 0;
    max-width: 100%;
  }
  html body#top nav.etl-breadcrumb > * { min-width: 0; }

  /* ── 4. Кнопки, чья подпись длиннее самой кнопки. Раньше хвост слова
        просто исчезал за краем. ────────────────────────────────────────── */
  html body#top :is(.svc-actions, .hero-actions) {
    flex-wrap: wrap;
    min-width: 0;
  }
  html body#top :is(.svc-actions, .hero-actions) > :is(a, button) {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* ── 5. Общая страховка для колонок flex и grid.

        По умолчанию элемент flex-раскладки не сжимается уже своего
        содержимого (min-width: auto). Из-за этого длинное слово, номер или
        адрес распирают колонку и выталкивают текст за край — на десктопе
        места хватает, на телефоне нет. `min-width: 0` разрешает сжатие,
        перенос делает остальное. ──────────────────────────────────────── */
  html body#top :is(.row, .a-kv, .a-box, .svc-hero-inner, .container, .p-container) {
    min-width: 0;
  }
  html body#top :is(p, li, td, th, dd, dt, .a-kv > *, .row > *) {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* ── 6. Длинные почты, номера и адреса — переносим по символам, только
        они и переполняют строку. ──────────────────────────────────────── */
  html body#top :is(a[href^="mailto:"], a[href^="tel:"], code, .a-kv__val) {
    overflow-wrap: anywhere;
  }

  /* ── 7. Хлебные крошки, часть вторая. Перенос строкой сам по себе не
        помог: название текущей страницы стоит одной неразрывной строкой
        («Единая Транспортная Логистика» — 314 px на экране 334 px) и
        переноситься ему нечем. Разрешаем перенос именно ему. ──────────── */
  html body#top :is(.etl-breadcrumb-current, .etl-breadcrumb-link) {
    white-space: normal !important;
    overflow-wrap: break-word;
    min-width: 0;
  }

  /* ── 8. Шапки страниц услуг и отраслевых решений: внутренний блок
        вылезал за правый край на 10–44 px. Видимого текста терялось
        немного, но обрывался он на каждой из двенадцати страниц. ──────── */
  html body#top :is(.svc-hero, .svc-hero-inner, .etl-breadcrumb-wrap) {
    min-width: 0;
    max-width: 100%;
  }
  html body#top .svc-hero-inner { box-sizing: border-box; }

  /* ── 9. Блок цифр на странице «О компании»: большая цифра и подпись
        стояли в строку и вместе не помещались. ─────────────────────────── */
  html body#top :is(.numberWrap, .coverWrap, .about2-card, .about2-links) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  html body#top .numberWrap > * { min-width: 0; max-width: 100%; }

  /* Две кнопки в строку под текстом: вместе 453 px при 302 доступных.
     Разрешаем им переноситься и сжиматься — иначе вторая уезжает за край. */
  html body#top .about2-links > * {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    /* Подпись «Запросить презентацию и тарифы» не помещалась в кнопку и
       обрывалась: кнопка 302 px, строка 453 px. Переносим по словам. */
    white-space: normal;
    text-align: center;
    height: auto;
  }
}