/* Слой «компьютер и планшет»: подключается ко всем страницам последним (integrations/planshet-sloj.mjs).
 * Здесь только поправки, общие для шаблонов, которые собираются из разных источников (макеты услуг,
 * статьи, кейсы, хабы): править исходные снимки макетов нельзя – их возвращает синхронизация. */

/* ---------- Якоря: заголовок раздела встаёт на 16–24 px ниже липкой шапки ----------
 * Шапку учитывает только отступ прокрутки документа (шапка + 24 px). Собственные scroll-margin-top
 * разделов (108, 110, 140, 92 px – «высота шапки + запас») добавлялись к нему второй раз, и заголовок
 * приезжал на 200–470 px ниже шапки. Узлы-обёртки, у которых заголовок стоит ниже их верхнего края
 * (глава услуги, глава статьи, разделы кейса), получают отрицательный отступ на это расстояние. */
html { scroll-padding-top: calc(var(--header-h, 60px) + 24px) !important; }
body [id] { scroll-margin-top: 0 !important; }

/* глава услуги и хаба: линия и название главы ниже края обёртки на внутренний отступ блока */
body .r35-act[id] { scroll-margin-top: calc(-1 * clamp(52px, 4.6vw, 68px)) !important; }
body .su-act[id] { scroll-margin-top: -72px !important; }

/* статья: глава (у первой отступа нет), раздел с H2 после отбивки */
body .bl-ch[id]:not(:first-child) { scroll-margin-top: calc(-1 * clamp(88px, 8vw, 120px)) !important; }
body .bl-sec[id] { scroll-margin-top: -44px !important; }
@media (max-width: 767px) {
  body .bl-ch[id]:not(:first-child) { scroll-margin-top: -32px !important; }
}
/* до 1180 px под шапкой статьи едет полоса главы (60 px): её высота добавляется к отступу */
@media (max-width: 1180px) {
  body .blg-st [id], body .bl-art [id] { scroll-margin-top: 60px !important; }
  /* у первой главы полоса ещё не выехала: заголовок на 40 px ниже шапки, и полоса, если появится, его не закроет */
  body .bl-art .bl-ch[id]:first-child { scroll-margin-top: 40px !important; }
  body .bl-art .bl-ch[id]:not(:first-child) { scroll-margin-top: calc(60px - clamp(88px, 8vw, 120px)) !important; }
  body .bl-art .bl-sec[id] { scroll-margin-top: 16px !important; }
}
@media (max-width: 767px) {
  body .bl-art .bl-ch[id]:not(:first-child) { scroll-margin-top: 28px !important; }
  body .bl-art .bl-ch[id]:first-child { scroll-margin-top: 24px !important; }
}

/* кейс: «Что сделали» – подпись над заголовком; хаб: таблица – вводная над заголовком */
body .s3g-z[id] { scroll-margin-top: -8vw !important; }
body .uz-nd[id] { scroll-margin-top: calc(-1 * clamp(56px, 9.7vw, 134px)) !important; }

/* ---------- Сетки 768–1279 px ---------- */

/* Статья 768–1180 (оглавления слева ещё нет, правый рейл появится с 1280): колонка текста по центру,
 * а не прижатой к левому краю с пустой полосой справа; длина строки та же (~70–75 знаков). */
@media (min-width: 768px) and (max-width: 1180px) {
  #top .blg-st .bl-grid > .bl-flow { width: 100%; max-width: 760px; margin-inline: auto; }
}
/* Правый рейл подсказок показывается с 1280 px, а место под него (--bl-rail 220–264 px) резервировалось и на 1100–1279:
 * текст и таблицы сжимались до ~500 px (колонки таблиц по 60 px), справа пустая полоса ~300 px. */
@media (min-width: 768px) and (max-width: 1279px) {
  #top .blg-st .bl-art { --bl-rail: 0px; }
}

/* Услуги SEO, «Состав, цена, сроки»: на 768–1279 карточка «Сверху пакета» во всю ширину, а внутри один
 * столбец строк – правая половина пустовала. Если столбец строк один, он занимает обе колонки: строки в три ряда. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ur1-tc__p--c > .ur1-tc__led:only-of-type { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .ur1-tc__p--c > .ur1-tc__led:only-of-type > p:not(.ur1-tc__lt) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
  .ur1-tc__p--c > .ur1-tc__led:only-of-type > p b { text-align: left; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .ur1-tc__p--c > .ur1-tc__led:only-of-type { grid-template-columns: minmax(0, 1fr); }
  .ur1-tc__p--c > .ur1-tc__led:only-of-type > p:not(.ur1-tc__lt) { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .ur1-tc__p--c > .ur1-tc__led:only-of-type > p b { text-align: right; }
}

/* FAQ (главная, услуги, статьи): «Нет вашего вопроса? Напишите: почта» в овале рядом с кнопкой.
 * Когда рядом с кнопкой меньше ~300 px, овал уходит строкой выше кнопки, а не сжимается в три строки. */
.hq3t-comp.hq3t-comp { flex-wrap: wrap; }
.hq3t-comp.hq3t-comp > .hq3t-field { flex: 1 1 300px; }
#top #blg-main .bt2-isl--faq.bt2-isl--faq.bt2-isl--faq.bt2-isl--faq .hq3t-comp.hq3t-comp { flex-wrap: wrap; }
#top #blg-main .bt2-isl--faq.bt2-isl--faq.bt2-isl--faq.bt2-isl--faq .hq3t-comp.hq3t-comp > .hq3t-field { flex: 1 1 300px; }

/* Кейсы: линии-рельеф под «Историей» до 1100 px ограничены шириной колонки (max-width: 100%),
 * хотя слой рассчитан от края до края окна – справа на x≈912 (1024) виден шов. */
.kva-story > .kva-story__rel { max-width: none; }

/* Статья, «Главное» (список глав) от 1180 px – три в ряд одним правилом в article-accepted.css (жюри блоков 10.11, Д2). */

/* ---------- Шапка 1200–1279 px ----------
 * Телефон с подписью «Написать в Telegram» в шапке был только с 1280 px, на 1100–1279 – значки Telegram и MAX.
 * С 1200 px места хватает (между меню и блоком справа ≥ 30 px): показываем тот же блок, что на 1280.
 * 1100–1199 – как было: значки Telegram и MAX, номер в подвале и меню телефона. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .sh1b .sh1-ms .sh1-ic:not(.sh1-icm) { display: none; }
  .sh1b .sh1-ct { display: grid; gap: 3px; padding: 0 8px; white-space: nowrap; }
  .sh1b .sh1-ctp { font: 600 15px/1.1 var(--o); color: var(--sh-ink); }
  .sh1b .sh1-ctm { font: 400 13px/1.2 var(--o); color: var(--sh-muted); }
  .sh1b .sh1-ctm a { color: var(--sh-ink); text-decoration: underline rgba(33, 31, 44, .25); text-underline-offset: 3px; transition: color .16s, text-decoration-color .16s; }
  .sh1b .sh1-ctm a:hover, .sh1b .sh1-ctp:hover { color: #D42A6C; text-decoration-color: #D42A6C; }
}