/* ==========================================================================
   Тема: раскладка страниц, которых не было в макете (раздел, каталог, сравнения, инструменты, словарь, карта сайта, 404).
   Только расположение готовых компонентов; цвета, рамки и отступы — токены макета. Медиазапросы — min-width 768 и 1200.
   ========================================================================== */

/* Вкладки типа над таблицей: раздел (подтипы), каталог (разделы) */
.mk-sec-kinds { margin-bottom: var(--mk-space-16); min-width: 0; }

/* Заголовок группы ссылок внутри секции (в макете — только на странице статьи) */
.mk-art-picks-title { margin: var(--mk-space-32) 0 var(--mk-space-16); }

/* Инструмент под шапкой страницы */
.mk-toolwrap { margin-top: var(--mk-space-24); }
@media (min-width: 768px) { .mk-toolwrap { margin-top: var(--mk-space-32); } }
.mk-tool .mk-seg { flex-wrap: wrap; }
.mk-tool .mk-filters__group { display: grid; gap: var(--mk-space-8); min-width: 0; }

/* Подбор: список результата */
.mk-podbor__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-12); }
.mk-podbor__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-8); padding: var(--mk-space-12); border: var(--mk-border); background: var(--mk-surface); min-width: 0; }
.mk-podbor__head { display: flex; align-items: center; gap: var(--mk-space-8); flex-wrap: wrap; }
.mk-podbor__name { font-weight: 700; }
.mk-podbor__why { margin: 0; font-size: var(--mk-text-small, 14px); }
.mk-podbor__group { margin: var(--mk-space-8) 0 0; }
.mk-podbor__actions { display: flex; gap: var(--mk-space-8); flex-wrap: wrap; }

/* Свой выбор для сравнения */
.mk-picker { padding: var(--mk-space-16); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-16); }
.mk-picker__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-12); align-items: end; }
.mk-picker__form > * { min-width: 0; }
.mk-picker .mk-select { width: 100%; }
@media (min-width: 768px) { .mk-picker { padding: var(--mk-space-24); } .mk-picker__form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }

/* Готовые сравнения: пара и строка под ней */
.mk-cmp-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-8); min-width: 0; align-content: start; }
.mk-cmp-item p { margin: 0; }

/* Указатель по названию */
.mk-az { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-16); }
.mk-az__group { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--mk-space-12); align-items: start; padding-bottom: var(--mk-space-12); border-bottom: 1px solid var(--mk-line); }
.mk-az__group .mk-sticker { justify-self: start; }
.mk-az__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--mk-space-16); }
@media (min-width: 768px) { .mk-az { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mk-space-40); } }
@media (min-width: 1200px) { .mk-az { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Карта сайта: списки в две и три колонки */
.mk-prose ul.mk-map { columns: 1; }
@media (min-width: 768px) { .mk-prose ul.mk-map { columns: 2; column-gap: var(--mk-space-40); } }
.mk-prose ul.mk-map li { break-inside: avoid; }

/* 404 */
.mk-nf h1 { margin-bottom: var(--mk-space-12); }
.mk-nf .mk-search__form { margin-top: var(--mk-space-20); }
.mk-nf__actions { display: flex; flex-wrap: wrap; gap: var(--mk-space-8); margin-top: var(--mk-space-16); }

/* ==========================================================================
   Приёмка (09.10.2026): телефон 320–430 px. В макете шапка сервиса проверялась на коротких значениях;
   на живых данных длинные пояснения, названия и таблицы из текста выталкивали страницу вбок.
   ========================================================================== */
/* Шапка сервиса: первая наклейка с длинным пояснением ужимается до ширины карточки, пояснение переносится */
.mk-cp-top .mk-company-head__stickers > div { max-width: 100%; }
.mk-cp-top .mk-company-head__stickers > div:first-child { flex: 0 1 auto; }
/* Длинная наклейка («вознаграждение за результат») переносится на вторую строку, а не уходит за экран */
.mk-cp-top .mk-company-head__stickers .mk-sticker--l { max-width: 100%; height: auto; min-height: var(--mk-sticker-h-l); padding-top: 5px; padding-bottom: 5px; line-height: 1.15; white-space: normal; }
/* Кнопки с названием сервиса («На сайт Яндекс Директа», «Тарифы на сайте TargetHunter») переносят подпись */
.mk-company-head__side .mk-btn--block, .mk-cp-after .mk-btn, .mk-cp-side-actions .mk-btn { max-width: 100%; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
.mk-cp-after .mk-btn { max-width: calc(100% - 4px); }

/* ==========================================================================
   Вёрстка ПК и телефон (14.10.2026): аудит живых страниц на ширинах 360–1920.
   ========================================================================== */
/* Шапка, телефон: у названия «Консалт Маркетинг» с подписью «Меню» шапке нужно 405 px — на 372–404 px страница
   уезжала вбок. Подпись у бургера появляется с 410 px, имя кнопки для скринридера остаётся. */
.mk-header__burger > span { max-width: calc((100vw - 409px) * 999); }
/* Шапка, ПК 1200–1339 px: меню + «Поиск» + «Подобрать сервис» шире контейнера на 14–25 px, кнопка обрезалась краем.
   На этих ширинах у поиска остаётся только значок (с запасом на полосу прокрутки), с 1340 px — снова со словом. */
@media (min-width: 1200px) {
  .mk-header__search > span { max-width: calc((100vw - 1339px) * 999); }
  .mk-header__in { min-width: 0; }
}
/* Пара «А или Б»: длинные имена (TargetHunter, WowBlogger, SMMplanner) не помещались рядом с плиткой 44 px
   и наезжали на «или» (360–768 px). Когда в паре меньше 360 px под содержимое, плитка встаёт над именем, а имя получает
   всю ширину половины; на широкой паре — строка, как в макете. */
.mk-pair { container-type: inline-size; }
.mk-pair__side > span:not(.mk-tile) { min-width: 0; overflow-wrap: break-word; }
@container (max-width: 360px) {
  .mk-pair__side { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mk-pair__side:last-child { flex-direction: column-reverse; align-items: flex-end; }
  .mk-pair__side .mk-tile { width: 32px; height: 32px; font-size: 16px; }
  .mk-pair__side .mk-tile .mk-tile__img { padding: 4px; }
}
/* Сортируемая таблица в тексте подборки (прокрутка вбок внутри обёртки): на телефоне и планшете кнопки сортировки
   в заголовке были 28 px в высоту — мало для пальца. До 1200 px — 40 px. */
.mk-prose__table th[aria-sort] .mk-th { min-height: 40px; }
@media (min-width: 1200px) { .mk-prose__table th[aria-sort] .mk-th { min-height: 28px; } }
/* Шапка на самых узких телефонах (320–359 px): логотип с названием и две кнопки не помещались (356 px при 320). */
@media (max-width: 359px) {
  .mk-header__in { gap: 8px; }
  .mk-header__tools { gap: 6px; }
  .mk-logo { gap: 8px; }
  .mk-logo__name { font-size: 15px; }
}
/* Подбор на 320 px: «Telegram-реклама» в сегменте двух колонок была на 3 px шире кнопки — подпись переносится. */
.mk-seg__btn { min-width: 0; }
@media (max-width: 359px) { .mk-seg__btn { padding-left: 6px; padding-right: 6px; white-space: normal; } }

/* 17.10: обложка статьи и картинки в тексте — картинки Codex (JPEG 16:9) вместо SVG-сюжета */
.mk-post__cover--img { object-fit: cover; }
.mk-art-cover .mk-post__cover--img { aspect-ratio: 16 / 9; }
.mk-art-fig { margin: var(--mk-space-8) 0; max-width: var(--mk-prose); }
.mk-art-fig__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--mk-border-heavy); box-shadow: var(--mk-shadow); background: var(--mk-surface-2); }
.mk-art-fig .mk-figcap { margin-top: var(--mk-space-12); }

/* 17.10: длинные подписи кнопок перехода в конце статьи («Сравнить Яндекс Директ и Яндекс Бизнес») на 320–360 px переносятся, а не вылезают за экран */
.mk-cta__actions .mk-btn, .mk-sidebox__actions .mk-btn { white-space: normal; min-width: 0; padding-top: var(--mk-space-8); padding-bottom: var(--mk-space-8); }