/* Сетки, которые не пережили телефон.

   ☠️ Макеты собирались под широкий экран, и колонки в них заданы жёстко:
   `1fr 1fr`, `repeat(4, 1fr)`, `minmax(0,1fr) minmax(320px,400px)`.
   Медиазапросов к ним нет ни одного — ни в странице, ни в исходном макете.
   На экране 375 px правая колонка не помещается и обрезается: заголовок
   переносится по одному слову, карточка «Бесплатный разбор» превращается
   в столбик из отдельных букв, цифры кейса уезжают за край.

   ⚠️ Коварство в том, что горизонтальной прокрутки при этом НЕ появляется:
   родитель обрезает лишнее по `overflow`. Поэтому проверка «шире ли страница
   экрана» такие блоки не ловит — надо смотреть правый край каждого элемента
   отдельно (`rect.right > ширина экрана`).

   Замер по сайту: фиксированные сетки есть на всех 165 страницах.

   ⚠️ Трогаем НЕ ВСЕ сетки. Нельзя ломать:
     · `repeat(auto-fit, minmax(...))` — они и так подстраиваются;
     · `min(100%, ...)` — тоже адаптивные;
     · маленькая колонка под иконку или галочку (`26px …`, `66px …`,
       `… 20px`) — это строка «значок + текст», в одну колонку она развалится;
     · `288px 1fr` — сетка мега-меню, на телефоне оно и так скрыто.

   Поэтому перечисляем ровно те записи, которые ломаются. Список собран
   не на глаз, а подсчётом всех значений `grid-template-columns` по сайту. */

/* ── планшет и уже: четыре и три колонки → две ─────────────────────────── */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="220px 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── телефон: всё перечисленное — в одну колонку ───────────────────────── */
@media (max-width: 640px) {
  /* две равные и почти равные колонки: контент + иллюстрация, текст + форма */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.08fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.55fr 1fr"],
  /* ☠️ Порядок дробей бывает любой: `1.05fr 1fr` и `1fr 1.05fr` — это одна
     и та же двухколоночная сетка. Первый раз я перечислил только один порядок,
     и три страницы остались сломанными. Ловим оба разом по куску записи:
     `1fr 1.` — все варианты «единица и дробь», `fr 1fr` — все «дробь и единица»
     (заодно `1fr 1fr` и трёхколоночные `1fr 1fr 1fr`).
     ⚠️ Проверено, что под `fr 1fr` не попадают строки «значок + текст»:
     у них первая дорожка в пикселях (`66px minmax(0,1fr)`). */
  [style*="grid-template-columns: 1fr 1."],
  [style*="grid-template-columns:1fr 1."],
  [style*="fr 1fr"],
  /* три и больше */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="220px 1fr 1fr 1fr"],
  /* контент + боковая колонка заданной ширины */
  [style*="minmax(0,1fr) minmax(320px,400px)"],
  [style*="minmax(0, 1fr) minmax(320px, 400px)"],
  [style*="minmax(0,1fr) 300px"],
  [style*="minmax(0, 1fr) 300px"],
  [style*="minmax(0,320px) minmax(0,1fr)"],
  [style*="minmax(0, 320px) minmax(0, 1fr)"],
  [style*="260px minmax(0px, 1fr)"],
  [style*="260px minmax(0,1fr)"],
  [style*="grid-template-columns: 320px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns: 280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ⚠️ Дочерние элементы такой сетки часто несут `min-width` под широкую
     колонку — в одной колонке он снова растянет блок за край. Снимаем,
     но только внутри тех сеток, которые сами что-то ломали. */
  [style*="grid-template-columns: 1fr 1fr"] > *,
  [style*="grid-template-columns:1fr 1fr"] > *,
  [style*="minmax(0,1fr) minmax(320px,400px)"] > *,
  [style*="minmax(0, 1fr) minmax(320px, 400px)"] > * {
    min-width: 0 !important;
  }
}

/* ── таблицы в статьях блога ───────────────────────────────────────────────
   ☠️ Таблицы вёрстаны под ширину статьи и на телефоне торчат за край:
   замер дал 370–468 px при экране 375. Прокрутки страницы при этом нет —
   правый столбец просто обрезается, и читатель о нём не догадывается.
   Поймано на 11 статьях (SMM и «Тренды»).

   Делаем таблицу собственным прокручиваемым блоком: содержимое остаётся
   таблицей, но уезжает не за экран, а внутри своей рамки. Это стандартный
   приём для широких таблиц — переносить их в столбик нельзя, смысл
   строки-сравнения потеряется. */
@media (max-width: 760px) {
  .tb-art__table,
  article table,
  .tb-art table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ⚠️ Длинные адреса и куски кода не переносятся по умолчанию и растягивают
     страницу. Поймано в статье про структуру сайта: путь раздела в теге code
     уходил за край на 57 px. */
  pre, code, kbd, samp {
    overflow-x: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ── блоки, которые отказываются сжиматься ─────────────────────────────────
   ☠️ Последний случай на `/smm/audit`: сетка шириной 303 px, а колонка внутри
   неё — 347 px. Колонка ШИРЕ своего контейнера, и содержимое торчит за экран
   на 8 px.

   Причина в умолчании: у элементов сетки и флекса `min-width` равен `auto`,
   то есть «не уже своего содержимого». Длинная строка с иконкой задаёт этот
   минимум, и колонка перестаёт сжиматься, сколько бы места ни осталось.

   `min-width: 0` снимает запрет — это канонический приём для такой ситуации.
   Без `!important`: если ширина задана в разметке осознанно, она победит. */
@media (max-width: 640px) {
  /* ☠️ Только элементы СЕТКИ. Сначала я распространил это и на флекс —
     и сплющил короткие подписи: «Кому:» в карточке тарифа получила ширину
     11 px вместо 38 и рассыпалась в столбик по одной букве. Во флексе
     `min-width: auto` обычно и нужен: он не даёт подписи схлопнуться. */
  [style*="display: grid"] > *,
  [style*="display:grid"] > * {
    min-width: 0;
  }
}

/* ── белая полоса под подвалом ─────────────────────────────────────────────
   ☠️ В странице есть правило `@media (max-width:767px){body{padding-bottom:84px}}`
   с комментарием «липкая панель на телефоне не должна закрывать оговорку».
   Панели на странице НЕТ — как и другой интерактив, она не пережила запекание
   (проверено: фиксированных блоков на странице ноль).
   Отступ остался сиротой, а фон `body` белый при тёмном подвале — отсюда
   белая полоса под футером, из-за которой страница выглядит «ушедшей за край».

   ⚠️ Если липкую панель когда-нибудь вернут, это правило надо снять —
   иначе она закроет низ последнего блока. */
@media (max-width: 767px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* ── страница «уезжает» за подвал на айфоне ────────────────────────────────
   ☠️ На iOS Safari прокрутка за конец страницы включает упругий отскок:
   браузер оттягивает содержимое и показывает под ним фон `body`. Фон у нас
   белый, подвал тёмный — получается белое поле под подвалом, будто страница
   не кончается и «едет дальше».

   ⚠️ Обычным замером это НЕ ловится: щель между низом подвала и низом
   документа равна нулю, ширина 375/375, никаких лишних блоков внизу нет.
   Отскок рисует сам браузер, и только на устройстве — поэтому проверка
   в настольном браузере показывает, что всё хорошо.

   `overscroll-behavior-y: none` отменяет отскок у корневой прокрутки:
   страница останавливается там, где кончается. Внутренние прокручиваемые
   блоки (широкие таблицы статей) правило не задевает — оно про корень.

   ⚠️ Побочно отключается «потянуть вниз для обновления» на телефоне.
   Если это окажется важнее белой полосы — правило снять. */
html,
body {
  overscroll-behavior-y: none;
}

/* Название канала внутри ячейки матрицы нужно только на телефоне: на широком
   экране канал понятен по шапке столбца. Скрипт дописывает подпись всегда,
   показываем её только в узком окне. */
.tb-chan {
  display: none;
}

/* ── матрица «ниша × канал» на телефоне ────────────────────────────────────
   ☠️ Первая попытка была неудачной. Я сохранил табличную раскладку и просто
   ужал колонки: 84 px под нишу и по 63 px под канал. Влезть-то влезло,
   но в такой ширине слова рвутся ПО БУКВАМ — «Не окупаетс / я»,
   «Основно / й». Читать это невозможно.

   🔑 Правильнее отказаться от таблицы. На телефоне разворачиваем её
   в список: название ниши на всю ширину, под ним четыре ячейки в две
   колонки. Ячейка получает ~170 px — этого хватает любому слову.

   ⚠️ Шапка столбцов при этом теряет смысл (столбцов больше нет), поэтому
   прячем её. Чтобы ячейка не осталась без канала, название канала
   дописывает в неё `anim-layers-matrix.js` — он же и владеет этим блоком.

   Раскладка сетки: первые пять детей — пустой угол и четыре заголовка;
   дальше повторяется «ниша + четыре ячейки», то есть ниши стоят на местах
   6, 11, 16, 21 — это и есть `5n+1`. */
/* ☠️☠️ ПОЙМАНО 25.08: селектор `[style*="min-width: 640px"]` без уточнения
   цеплял ещё и таблицы сравнения — у них ровно та же подпись в стиле.
   Правило прятало первые пять детей, то есть `thead` и `tbody` целиком:
   на `/smm/max`, `/advertising` и двух страницах лидогенерации таблица
   исчезала с экрана насовсем. Матрица — единственная сетка среди них,
   поэтому требуем ещё и `display: grid`. */
@media (max-width: 760px) {
  [style*="min-width: 640px"][style*="display: grid"] {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Пустой угол и шапка столбцов. */
  [style*="min-width: 640px"][style*="display: grid"] > *:nth-child(-n+5) {
    display: none !important;
  }

  /* Название ниши — отдельной строкой на всю ширину. */
  [style*="min-width: 640px"][style*="display: grid"] > *:nth-child(5n+1) {
    grid-column: 1 / -1 !important;
    padding-top: 10px !important;
  }

  /* Название канала, которое дописывает скрипт. */
  [style*="min-width: 640px"][style*="display: grid"] .tb-chan {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: .75;
    margin-bottom: 4px;
  }
}

/* ── текст поверх картинки плохо читался на телефоне ───────────────────────
   ☠️ Затемнение под текстом рассчитано на широкий экран: там подпись —
   одна-две строки поверх спокойной части кадра. На телефоне та же подпись
   разворачивается в шесть строк и ложится на всю картинку целиком, где есть
   и светлые пятна. Прозрачности 45–55% для этого мало.

   Усиливаем только на телефоне: на десктопе всё читается и трогать незачем.
   Верх темнее низа — текст обычно прижат к нижнему краю. */
@media (max-width: 760px) {
  .tba-shade {
    background: linear-gradient(rgba(14, 46, 49, 0.72),
                                rgba(14, 46, 49, 0.82)) !important;
  }
}

/* ── «Реклама медицинских услуг и закон»: текст сплющивался ────────────────
   ☠️ Сетка `0.8fr 1.6fr` на экране 390 px превращается в колонки 110 и 220 px:
   слева картинка, справа текст шириной в два-три слова. Читать невозможно —
   каждое слово на своей строке.

   Такой записи не было в перечне выше: там ловились «единица и дробь»
   (`1fr 1.6fr`), а здесь ОБЕ доли дробные. */
@media (max-width: 640px) {
  [style*="grid-template-columns: 0.8fr 1.6fr"],
  [style*="grid-template-columns:0.8fr 1.6fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── карточка слоя: значение сплющивалось в столбик ────────────────────────
   ☠️ Строки карточки заданы сеткой `190px 1fr`. На экране 390 px под подпись
   уходит 190, и значению остаётся около 110 — слова начинают рваться
   по буквам: «живым модераторо / м», «соответстви / е услуг».

   На телефоне ставим подпись НАД значением: обе получают полную ширину. */
@media (max-width: 640px) {
  [style*="grid-template-columns: 190px 1fr"],
  [style*="grid-template-columns:190px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }
}

/* ── строки услуг в дереве: название сжималось до буквы в строке ───────────
   ☠️ Строка устроена как флекс «название — слева, характеристика — справа»
   с `justify-content: space-between`. Характеристика длинная («растущий
   спрос · 150–350 тыс. ₽ · недели»), и на экране 390 px названию остаётся
   52 px при нужных 61 — слово «Элайнеры» рвётся, «ы» уезжает на вторую
   строку.

   На телефоне ставим характеристику ПОД названием: обе получают полную
   ширину строки. */
@media (max-width: 760px) {
  [style*="align-items: baseline"][style*="justify-content: space-between"][style*="border-top: 1px solid var(--line)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
}

/* ── плитки карты «где лежат деньги»: заголовок сжимался в столбик ─────────
   ☠️ В шапке плитки название и число визитов стоят в одной строке через
   `space-between`. На телефоне «Главная» и «2 170 визитов» не помещаются
   рядом, и название рассыпается по буквам: «Г л а в н а я».

   Ставим их друг под другом. */
@media (max-width: 760px) {
  [style*="min-height: 104px"] [style*="justify-content: space-between"],
  [style*="min-height: 124px"] [style*="justify-content: space-between"],
  [style*="min-height: 52px"] [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
}

/* Строки веток на `/seo/for-medical/surgery`.
   ☠️ Значение стоит `flex:none` и сжиматься не умеет: на 375px «федеральные
   клиники и агрегаторы» уезжали на 56 пикселей за карточку. Разрешаем строке
   переноситься, а значению — занимать остаток ширины и переноситься по словам.
   Пометки `data-tb-branch-*` расставляет `anim-branch-stage.js`. */
@media (max-width: 640px) {
  [data-tb-branch-row] {
    flex-wrap: wrap;
  }
  [data-tb-branch-val] {
    flex: 1 1 auto !important;
    min-width: 0;
  }
}

/* Календарь работ на `/seo/support` и `/smm/for-medical/medical-center`.
   ☠️☠️ Его разложило моё же общее правило: сетка подписана `repeat(5,1fr)`,
   попала под раскладку широких таблиц и превратилась в ОДИН столбец из
   двадцати квадратных ячеек — экраны пустого календаря вместо месяца.
   Неделя из пяти дней должна читаться поперёк при любой ширине: на 375px
   ячейка выходит около 55 пикселей, этого хватает и глазу, и пальцу.
   Селектор с меткой `data-cal` перебивает общее правило по весу. */
@media (max-width: 900px) {
  [data-cal] [style*="repeat(5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  /* Лента клиники в мокапе Instagram — та же беда: девять квадратов в столбик
     вместо сетки 3×3. Лента, вытянутая в колонку, перестаёт быть лентой. */
  [data-feed] [style*="repeat(3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── ряды переключателей на телефоне ───────────────────────────────────────
   ☠️ На широком экране это ряд кнопок: где-то в овальной плашке, где-то
   просто чипами. На 375px подписи не влезают, кнопки переносятся на две-три
   строки — и получается либо пустой овал высотой 154 пикселя с зиянием
   до 133 пикселей справа, либо рваный правый край у чипов.

   🔑 Никита выбрал вид, который ему нравится: рамка как у карточки, кнопки
   растянуты на всю ширину. Приводим к нему ВСЕ ряды — и в блоках тарифов,
   и в ВАУ-блоках. Проверено: из 58 рядов на сайте ни один не стоит
   на тёмном фоне, так что светлая рамка уместна везде.

   ⚠️ `flex` у кнопок помечаем важным: в разметке у части из них стоит
   `flex:none` прямо в атрибуте, а инлайн-стиль сильнее обычного правила. */
@media (max-width: 640px) {
  div:has(> button[aria-pressed] + button[aria-pressed]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100%;
    box-sizing: border-box;
    padding: 5px !important;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    overflow-x: visible !important;
  }

  div:has(> button[aria-pressed] + button[aria-pressed]) > button {
    flex: 1 1 auto !important;
  }
}

/* ── таблица сравнения тарифов под ценами ──────────────────────────────────
   ☠️ Свёрстана как `role="table"` из строк-сеток внутри обёртки шириной
   780 пикселей с горизонтальной прокруткой. Общее правило раскладки
   схлопнуло каждую строку в одну колонку — и вместо таблицы получился
   столбик ячеек в блоке, который всё равно надо листать вбок.
   Возвращаем четыре колонки и вписываем их в экран: подпись уже, шрифт
   мельче, длинные значения переносятся по словам. Листать больше не нужно. */
@media (max-width: 640px) {
  [role="table"] {
    overflow-x: visible !important;
  }

  [role="table"] > div {
    min-width: 0 !important;
  }

  [role="table"] [role="row"] {
    grid-template-columns: 96px repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  [role="table"] [role="row"] > * {
    padding: 9px 7px !important;
    font-size: 11.5px !important;
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

/* ── мокап переписки с ботом на `/smm/telegram` ────────────────────────────
   ☠️ Высота коробки задана числом — 212 пикселей — и от ширины экрана
   не зависит. На телефоне реплики занимают 281 пиксель и последняя
   вываливается за карточку прямо на текст под ней. На телефоне высоту
   отпускаем: пусть коробка растёт под содержимое. */
@media (max-width: 640px) {
  [style*="height: 212px"] {
    height: auto !important;
  }
}

/* ── значение в плитке расчёта ─────────────────────────────────────────────
   ☠️ «Присутствие» в плитке «Рекомендуемый тариф» рвалось по буквам:
   при ширине экрана 390 плитки встают в две колонки по 151 пикселю,
   слову при 19 пикселях шрифта нужно 122 — не хватает трёх пикселей,
   и последняя буква «е» уезжает на вторую строку. Даём шрифту сжиматься
   вместе с экраном и запрещаем разрыв внутри слова. */
@media (max-width: 480px) {
  [style*="tabular-nums"][style*="clamp(19px"] {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    overflow-wrap: normal;
  }
}

/* ── широкие таблицы сравнения ─────────────────────────────────────────────
   ☠️ У них в разметке `min-width:640px` — на телефоне это значит, что
   правый столбец уезжает за рамку и читатель о нём не догадывается.
   Именно так пропадало сравнение MAX с Telegram: видно первый столбец,
   а второй, ради которого таблица и нужна, за кадром.
   Вписываем в экран: отпускаем минимальную ширину, мельчим шрифт
   и отступы, длинные значения переносим по словам. */
@media (max-width: 640px) {
  table[style*="min-width: 640px"] {
    min-width: 0 !important;
    font-size: 11.5px !important;
    /* ⚠️ Без этого таблица упирается в «желаемую» ширину содержимого
       и всё равно торчит на три десятка пикселей. Равные колонки
       заставляют её сесть точно по рамке. */
    table-layout: fixed;
  }

  table[style*="min-width: 640px"] th,
  table[style*="min-width: 640px"] td {
    padding: 9px 7px !important;
    overflow-wrap: anywhere;
  }
}

/* ── шапка карточки кейса ──────────────────────────────────────────────────
   ☠️ Логотип помечен «не сжимать» (`flex: 0 0 auto`), а его максимальная
   ширина — 206 пикселей. У ОМЦИП логотип как раз самый широкий, и плашка
   ниши выдавливалась за границу карточки: на скриншоте «Стоматология»
   торчит наружу. Отдаём логотипу остаток ширины с правом ужаться —
   плашка встаёт на место, а картинка просто масштабируется.
   Пометку `data-tb-case-head` расставляет `anim-cases-filter.js`. */
[data-tb-case-head] > span:first-child {
  flex: 0 1 auto !important;
  min-width: 0;
  overflow: hidden;
}

[data-tb-case-head] > span:first-child img {
  max-width: 100% !important;
}

[data-tb-case-head] > span:last-child {
  flex: 0 0 auto;
}