/* 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, .menu, .nav, .navbar-nav, 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; здесь - страховка для типовых классов. */
.alignfull, .align-full, [class*="alignfull"], .full-width, .full-bleed {
  max-width: calc(100vw - var(--grab-sb, 0px));
}

/* СТРАХОВКА И2 (ссылки контента) и И3 (картинки) - ПО ТЕГАМ, без сид-имён.
   Снимок делается ДО скилла /landing: сид-классы фигуры и контента появятся
   позже, и правило, прописанное на них, на этом снимке не найдёт ничего.
   Настоящий блок с палитрой сайта врезает landing и перекрывает эти строки
   своей специфичностью; здесь - минимум, закрывающий link-in-text-block и
   апскейл, если landing до папки так и не дошёл. */
article a {
  color: var(--grab-link, #0b57d0);
  text-decoration: underline;
  text-underline-offset: .15em;
}
/* `:visited` - ОБЫЧНОЕ состояние: значение то же самое, что у ссылки. Разный
   цвет посещённой ссылки выдаёт историю пользователя и ломает контраст,
   посчитанный по одному лишь состоянию `a`. */
article a:visited {
  color: var(--grab-link, #0b57d0);
}
/* потолок 960 px и никакого апскейла: `width:auto`, а не `100%`. С `100%`
   картинка уже 960 px тянется ВВЕРХ - §1 спеки это запрещает прямым текстом. */
figure {
  margin: 1.4rem auto;
  max-width: min(100%,960px);
}
figure img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* заглушки битых картинок: незаметны на любом фоне */
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 > .menu,
.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 > .menu,
.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%; }