/* grab-fix.css - обязательные правила лендинга.
   Пишется скиллом /grab. Работает одинаково локально и на боевом домене.
   Ничего не переопределяет агрессивно: только страхует от вылезания за экран. */

/* картинки, видео и врезки никогда не шире контейнера */
img, svg, video, iframe, embed, object, canvas {
  max-width: 100%;
  height: auto;
}
img[width][height] { height: auto; }

/* ЗДЕСЬ БЫЛО `* { min-width: 0 }` - и это оказалось хуже болезни.
   У флекс-элемента `min-width:auto` по умолчанию не даёт ему схлопнуться ниже
   содержимого. Обнулив это глобально, я позволил ячейке с `flex:0 0 0%` уйти в
   НОЛЬ вместе со звёздами рейтинга: замерено 0px против 100.6px. Длинные слова
   лечит `overflow-wrap` ниже, а `min-width:0` теперь ставится точечно из
   grab-fix.js - ровно тем элементам, которые мы и правда зажимаем. */

/* длинные слова и ссылки переносим, а не выпускаем за край */
body, p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, a, span, div {
  overflow-wrap: break-word;
}

/* таблицы на узком экране прокручиваем, а не ломаем страницу */
table { max-width: 100%; }
.grab-table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

/* меню и футер: переносим по строкам, чтобы не уезжали за видимую область */
nav ul, .ui-is-band-4, .ui-pane_ue17c, .ui-l-list-6, footer ul {
  flex-wrap: wrap;
}

/* горизонтальную прокрутку страницы гасим на корне, но НЕ на body:
   overflow на body ломает position:sticky у части тем */
html { overflow-x: hidden; max-width: 100%; }

/* Full-bleed блоки считают ширину как 100vw, а 100vw ВКЛЮЧАЕТ полосу
   прокрутки. Из-за этого весь контент внутри них (абзацы, заголовки, списки,
   картинки) уезжает за правый край ровно на её ширину - замерено на планшете:
   9 абзацев, 6 заголовков, 4 списка и 2 картинки. Точную ширину полосы
   подставляет grab-fix.js в --grab-sb; здесь - страховка для типовых классов. */
.ui-deck-label__group, .align-full, [class*="alignfull"], .full-width, .full-bleed {
  max-width: calc(100vw - var(--grab-sb, 0px));
}

/* заглушки битых картинок: незаметны на любом фоне */
img[data-grab-placeholder] {
  background: transparent;
  object-fit: cover;
}

/* бургер: показывается только когда его добавил grab-fix.js */
.grab-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;
}
.grab-burger svg { width: 24px; height: 24px; display: block; }
.grab-nav-collapsed > .grab-burger { display: inline-flex; }
.grab-nav-collapsed > ul,
.grab-nav-collapsed > .ui-is-band-4,
.grab-nav-collapsed > div:not(.grab-burger) { display: none; }
.grab-nav-collapsed.grab-nav-open { flex-wrap: wrap; }
.grab-nav-collapsed.grab-nav-open > ul,
.grab-nav-collapsed.grab-nav-open > .ui-is-band-4,
.grab-nav-collapsed.grab-nav-open > div:not(.grab-burger) {
  display: block;
  flex-basis: 100%;
  width: 100%;
}
.grab-nav-collapsed.grab-nav-open > ul { display: block; }
.grab-nav-collapsed.grab-nav-open > ul > li { display: block; width: 100%; }