/* /vzyskanie/ — правки поверх /zalog/assets/styles.css.
   Задача: ни при какой ширине экрана страница не должна быть шире вьюпорта. */

/* 1. Общая страховка от горизонтального выезда.
      clip, а не hidden: не ломает position:sticky и якорную прокрутку. */
html, body { max-width: 100%; overflow-x: clip; }
main, section, .container, .content { max-width: 100%; }

/* 2. Гриды и флексы: по умолчанию их элементы не сжимаются уже своего
      контента (min-width:auto) — это классическая причина выезда. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .types-grid > *, .steps > *,
.hero__cta > *, .header__inner > *, .nav > * { min-width: 0; }

/* 3. Длинные слова, ссылки и номера дел не должны распирать колонку. */
.card p, .content p, .content li, .faq__a, .footer__about { overflow-wrap: anywhere; }

/* 4. Шапка. В базовой теме .nav и .header__inner стоят nowrap — при
      восьми пунктах меню это распирало страницу на 180–200px.
      Разрешаем перенос и включаем бургер раньше. */
.header__inner { flex-wrap: wrap; }
.nav { flex-wrap: wrap; min-width: 0; }
.logo { min-width: 0; }
.logo span { min-width: 0; }

@media (max-width: 1150px) {
  .header__inner > a.btn { display: none !important; }
}

@media (max-width: 420px) {
  .header__inner { padding: 12px 14px; gap: 10px; }
  .logo span small { display: none; }
  .logo { font-size: 15px; }
}

/* 5. Таблицы: скроллятся внутри своей обёртки, а не растягивают страницу. */
.tbl { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
       margin: 0 auto; border-radius: var(--radius); }
.tbl table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; padding: 11px 12px; border-bottom: 2px solid var(--accent);
          font-weight: 600; white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }

/* 6. Медиа и врезки не вылезают. */
img, svg, video, iframe { max-width: 100%; height: auto; }
.cta-block, .keyfacts { max-width: 100%; }

/* 7. Плавающая кнопка Telegram фиксирована внизу — не даём ей закрыть текст. */
@media (max-width: 900px) { body { padding-bottom: 76px; } }

/* 8. Кнопки в первом экране на узких экранах — во всю ширину и с переносом. */
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; white-space: normal; }
}