/**
 * Статья блога по макету Figma (шаблон «Статья»).
 * Верх страницы: `.blog-article-page-top` (как у листинга кейсов/блога — градиент + заголовок), без отдельного героя `blog-header`.
 * MuseoSansCyrl — css__home-snapshot__overrides.parity-sync.css
 *
 * --- Контракт разметки для масштабирования (импорт статей, сборка из JSON) ---
 * Не переименовывать опрометчиво: билдер и стили завязаны на эти классы.
 *
 * Верх статьи (сборка `build-blog-article-pages.mjs`):
 *   .blog-article-page-top
 *     .page-container.nuxt.case-all-page + .background-gradient (как case/all)
 *     .case-all-heading-line.blog-article-page-top__heading — .blog-article-page-top__meta / __meta-link / __meta-date,
 *     h1.cases-block__header-title.case-all-heading-title, .blog-article-page-top__lead (опционально)
 *   У `.blog-article-page-top__heading` псевдоэлемент ::after — линия cyan→magenta; зазоры как у прежнего героя.
 *
 * Тело (блоки по секциям):
 *   section.lighttheme.article_section_l
 *     .row
 *       .blog-article-author-banner (опционально, вставляет build-blog-article-pages.mjs)
 *         aside.blog-article-author — .blog-article-author__photo, __name, __title
 *       Мобайл ≤767px: автор над текстом, влево (как шапка: логотип / бургер — см. --blog-article-gutter).
 *       .article-section.text-content
 *         опционально первым: .article-section__info.sa-blog-specialist-lead (лид из .specialist-mention, build-blog-article-pages.mjs)
 *         .article-section__title-wrap — h2.section-info__title.h2
 *         h3.h3.section-title
 *         .article-section__info — основной текст (p, ul, ol, …); под колонкой Nuxt — обёртка `<div>`, поэтому зазор 24px между абзацами: `.article-section__info > div > p + p` (и запасной `> p + p`); сверху у иллюстрации после списка — `ul|ol.sa-blog-body-list` + `div|p.sa-blog-body-media` (как после абзаца, не только `p + …`); после блока иллюстрации (`div.sa-blog-body-media`, в т.ч. `.wp-caption`) до следующего абзаца — `div.sa-blog-body-media + p` (тот же 24px); два блока иллюстрации подряд (`div.wp-caption` с подписью внутри) — `div.sa-blog-body-media + div.sa-blog-body-media`: крупный зазор сверху у второго (`clamp(48px, 7vw, 96px)`), чтобы подпись первого не «слипалась» со следующим скриншотом. Иллюстрации в теле: `sa-blog-body-media` + `--wide` (широкий; легаси `--bleed` — те же отступы) или + `--content` / `--text` (узкий, `blogBodyMediaLayout` в JSON, blog-article-body-media-markup.mjs). Списки тела — `ul.sa-blog-body-list` / `ol.sa-blog-body-list` (класс вшивает build-blog-article-pages.mjs); зазор 10px над списком — `* + ul|ol.sa-blog-body-list`; абзацы-заголовки этапов WP — `p.sa-blog-stage-heading` (blog-article-stage-heading-markup.mjs); опционально в конце колонки — `.article-section__info--sub`
 *           (цитата `p.text-small` + `figure.specialist__main`): тот же визуальный язык, что и `blockquote.blockquote_articles` — подложка, скругление, подпись как `.blockquote_articles__attr`, текст цитаты как `.blockquote_articles__quote`; при наличии `img.specialist__img` — слева круглый аватар в сетке; без картинки — одна колонка, подпись сверху.
 *   Отдельная секция с цитатой: .row.tablet_full_width → blockquote.blockquote.blockquote_articles.text-content
 *     (тёмная карточка — стили в этом файле; не путать с blockquote внутри .article-section / .sa-blog-prose — blog-article-prose.css).
 *     Сборка: «…» — автор в одном span → cite + p (build-blog-article-pages.mjs): без ёлочек в тексте, без финальной точки у подписи.
 *
 * «Читайте ещё»: section.blog-read-more + карточки .case.more-blog-case … (логика — build-blog-article-pages.mjs, правило .cursor/rules/blog-articles-static.mdc).
 * Поле readAlsoHtml в JSON — фрагмент с прода («Читайте также»), для справки; в статическую страницу не подставляется.
 *
 * Импорт «одним куском» HTML: обернуть контент в .sa-blog-prose внутри .article-section__info;
 * расширенная типографика — css/sections/blog-article-prose.css.
 */

/*
 * Единый тёмный фон страницы статьи (#121212 как у тела и «Читайте ещё»).
 * В бандле .case-all-root и .footer-modern — #191a1b; из‑за разницы с #121212
 * внизу оставался визуальный шов — переопределяем цепочку и футер.
 */
/*
 * База на html; акцент — html::before position:fixed (не подвержен overflow у body).
 * Два слоя: linear to left (~правые 28–36% ширины) + radial в правом нижнем углу (центр на краю).
 */
html:has(.blog-article-page-top) {
  min-height: 100%;
  position: relative;
  z-index: 0;
  background-color: #121212;
  /*
   * Горизонталь как у .blog-block-mainstr в parity-sync: 78 → 55 (≤1025) → 36 (≤768).
   */
  --blog-article-gutter: 78px;
  /* Зазор от нижнего края фикс-шапки до блока категории/даты; на ≤767px — 140px (+30 к десктопу) */
  --blog-header-meta-offset: 110px;
  /* Над линией (после лида): margin-top у ::after; под линией — padding-top первой секции (не схлопывается с margin). +20px зазор лида → линия. */
  --blog-article-hero-strip-line-mt: 95px;
  /* От низа H1 до лида; без лида — до линии (105px: +25 к прежним 80) */
  --blog-article-hero-title-mb: 30px;
  --blog-article-hero-heading-to-line: 105px;
  /* От линии до первого блока тела / H2 (100px: +25 к прежним 75) */
  --blog-article-hero-after-line: 100px;
  --blog-article-hero-strip-h: 1px;
  /* Ссылки в теле статьи, лиде героя и вынесенных blockquote */
  --blog-article-link: #80BEEA;
  --blog-article-link-hover: rgb(244, 244, 245);
  /*
   * Межстрочный ритм пунктов списка: между «плотным» абзацем с <br> и прежним ul/ol с margin на li.
   * Реализация — column gap у flex-списка (см. .sa-blog-body-list).
   */
  --blog-article-list-rows-gap: clamp(10px, 0.58em, 14px);
}

@media screen and (max-width: 1025px) {
  html:has(.blog-article-page-top) {
    --blog-article-gutter: 55px;
  }
}

@media screen and (max-width: 768px) {
  html:has(.blog-article-page-top) {
    --blog-article-gutter: 36px;
  }
}

html:has(.blog-article-page-top)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 44vw min(105vh, 920px) at 100% 100%,
      rgba(140, 95, 210, 0.48) 0%,
      rgba(78, 52, 118, 0.32) 34%,
      rgba(28, 24, 36, 0.14) 58%,
      transparent 72%
    ),
    linear-gradient(to left, rgba(72, 48, 108, 0.34) 0%, rgba(22, 20, 30, 0.06) 26%, rgba(18, 18, 22, 0) min(38vw, 40%));
  background-repeat: no-repeat;
}

@media screen and (max-width: 1100px) {
  html:has(.blog-article-page-top)::before {
    background-image:
      radial-gradient(
        ellipse 52vw min(100vh, 880px) at 100% 100%,
        rgba(130, 90, 200, 0.42) 0%,
        rgba(72, 48, 110, 0.28) 36%,
        rgba(28, 24, 36, 0.12) 56%,
        transparent 74%
      ),
      linear-gradient(to left, rgba(68, 46, 102, 0.3) 0%, rgba(22, 20, 30, 0.05) 24%, rgba(18, 18, 22, 0) min(44vw, 46%));
  }
}

@media screen and (max-width: 600px) {
  html:has(.blog-article-page-top)::before {
    background-image:
      radial-gradient(
        ellipse 58vw min(96vh, 820px) at 100% 100%,
        rgba(120, 82, 185, 0.38) 0%,
        rgba(65, 44, 98, 0.26) 38%,
        transparent 76%
      ),
      linear-gradient(to left, rgba(62, 42, 95, 0.28) 0%, rgba(18, 18, 22, 0) min(48vw, 52%));
  }
}

body.case-all-body:has(.blog-article-page-top) {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

body.case-all-body:has(.blog-article-page-top) #__nuxt,
body.case-all-body:has(.blog-article-page-top) #__layout {
  background-color: transparent;
}

body.case-all-body:has(.blog-article-page-top) .case-all-root {
  position: relative;
  background-color: transparent;
}

body.case-all-body:has(.blog-article-page-top) .scroll-container.case-all-scroll-footer {
  background-color: transparent;
}

body.case-all-body:has(.blog-article-page-top) footer.footer-modern,
body.case-all-body:has(.blog-article-page-top) .footer-modern[data-v-ff4f3948] {
  background-color: transparent !important;
}

/*
 * /case/all: нативные img в .background-gradient скрываем — не дублируем узор.
 */
body.case-all-body:has(.blog-article-page-top) .page-container.nuxt.case-all-page[data-v-6f8a040c] {
  background: transparent !important;
}

body.case-all-body:has(.blog-article-page-top) .background-gradient img[data-v-6f8a040c],
body.case-all-body:has(.blog-article-page-top) .background-gradient img {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ——— Верх статьи (как листинг кейсов/блога): градиент в .page-container + заголовок ——— */
.blog-article-page-top {
  position: relative;
  min-height: 0;
  background-color: transparent;
  --blog-hero-ink: rgba(255, 255, 255, 0.6);
  --blog-header-bar-height: 95px;
  padding-top: calc(var(--blog-header-bar-height) + var(--blog-header-meta-offset, 110px) + env(safe-area-inset-top, 0px));
}

@media (max-width: 1024px) {
  .blog-article-page-top {
    --blog-header-bar-height: 90px;
  }
}

/*
 * Листинг /case/all: у .case-all-more-case-wr — padding-top 178px (и 150px ≤991px).
 * У статьи зазор «шапка → мета» уже задаёт .blog-article-page-top padding-top — иначе отступы суммируются.
 */
.blog-article-page-top .case-all-more-case-wr.more-case-wr__main {
  padding-top: 0;
  padding-bottom: 0;
}

.blog-article-page-top .blog-article-page-top__heading.case-all-heading-line {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  column-gap: 0;
  row-gap: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--blog-article-gutter);
  padding-right: var(--blog-article-gutter);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.blog-article-page-top .blog-article-page-top__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 28px;
  /* Полная ширина колонки героя (ряд рубрика + дата не должен сужать flex-колонку с заголовком и линией). */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  align-self: stretch;
}

.blog-article-page-top .blog-article-page-top__meta-link {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 96px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid hsla(0, 0%, 100%, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 100;
  line-height: 1.45;
  color: var(--blog-hero-ink);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.blog-article-page-top .blog-article-page-top__meta-link:hover,
.blog-article-page-top .blog-article-page-top__meta-link:focus-visible {
  color: #fff;
  border-color: #fff;
}

.blog-article-page-top .blog-article-page-top__meta-date {
  margin: 0 0 0 14px;
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 100;
  line-height: 1.45;
  color: var(--blog-hero-ink);
}

.blog-article-page-top .blog-article-page-top__heading.case-all-heading-line .cases-block__header-title.case-all-heading-title {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 70px;
  line-height: 1.1;
  font-weight: 600;
  /* Не calc(100vw − …): при gutter на колонке даёт лишнее сужение и «полку» справа на мобиле. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 15px 0 var(--blog-article-hero-title-mb);
}

.blog-article-page-top .blog-article-page-top__heading.case-all-heading-line:not(:has(.blog-article-page-top__lead))
  .cases-block__header-title.case-all-heading-title {
  margin-bottom: var(--blog-article-hero-heading-to-line);
}

.blog-article-page-top .blog-article-page-top__heading.case-all-heading-line:not(:has(.blog-article-page-top__lead))::after {
  margin-top: 0;
}

.blog-article-page-top .blog-article-page-top__lead {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(1.125rem, 0.75rem + 1.35vw, 2rem);
  line-height: 1.45;
  font-weight: 100;
  color: var(--blog-hero-ink);
  /* На десктопе ограничиваем меру строки; не шире колонки (важно во flex-колонке с align-items: stretch). */
  max-width: min(38em, 100%);
  margin: 0;
  box-sizing: border-box;
  align-self: stretch;
}

.blog-article-page-top .blog-article-page-top__heading.case-all-heading-line::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  height: var(--blog-article-hero-strip-h);
  margin-top: var(--blog-article-hero-strip-line-mt);
  margin-bottom: 0;
  margin-left: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  border-radius: 0;
  background: linear-gradient(90deg, #00f0ff 0%, #c058ff 50%, #ff00b5 100%);
}

/*
 * В snapshot.bundle.css у `.more-case-wr .page__container` на узких экранах задан горизонтальный
 * padding (57px / 35px), а у `.blog-article-page-top__heading` уже есть `var(--blog-article-gutter)` —
 * отступы суммируются, заголовок и линия «сжимаются». У героя статьи оставляем только gutter у заголовка.
 */
@media screen and (max-width: 768px) {
  html:has(.blog-article-page-top)
    .blog-article-page-top
    .case-all-more-case-wr.more-case-wr__main
    .page__container[data-v-27a87df0] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/*
 * В snapshot.bundle.css при max-width: 1024px у всех .row стоит width: 85% — на статье даёт
 * лишние поля слева/справа. Разворачиваем ряд тела на всю ширину.
 */
@media screen and (max-width: 1024px) {
  html:has(.blog-article-page-top) .blog-article-page-top .blog-article-page-top__heading.case-all-heading-line,
  html:has(.blog-article-page-top) .blog-article-page-top ~ section.lighttheme.article_section_l > .row {
    width: 100%;
    max-width: none;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .section-title {
    width: 100%;
    max-width: 100%;
  }
}

/*
 * При ширине >1400px у героя `.more-case-wr .page__container` в snapshot.bundle заданы
 * `max-width: 1574px` и `width: calc(100% - 156px)` + `margin: auto`, а глобальный `.row { width: 90% }`
 * остаёт шире и с другой левой кромкой — текст тела визуально «уезжает» левее заголовка.
 * Повторяем геометрию контейнера героя для рядов тела (в т.ч. `.row.tablet_full_width` с цитатой).
 */
@media screen and (min-width: 1401px) {
  html:has(.blog-article-page-top) .blog-article-page-top ~ section.lighttheme.article_section_l > .row {
    width: calc(100% - 156px);
    max-width: 1574px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ——— Тело статьи ——— */
.blog-article-page-top ~ section.lighttheme.article_section_l {
  /* Абзацы/списки/цитаты: чуть свободнее, чем calc(1.5em + 1pt) */
  --blog-article-body-line-height: calc(1.55em + 2pt);
  /* Основной текст тела — светло-серый, не чисто белый */
  --blog-article-body-color: rgb(208, 208, 210);
  --blog-article-body-color-em: rgb(196, 196, 198);
  --blog-article-body-color-strong: rgb(232, 232, 234);
  background: transparent !important;
  background-color: transparent !important;
  /*
   * padding-top задаётся только первой секцией тела (правило с :not ниже) и цепочкой «+ section»;
   * здесь не clamp — иначе тот же селектор перебивает var(--blog-article-hero-after-line) по порядку/специфичности.
   */
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 72px);
}

/*
 * Зазор под градиентной линией до первого блока тела — var(--blog-article-hero-after-line).
 * Селектор «герой + секция» не подходит: в статике между `</section>` и первой секцией тела часто есть `<!-- -->` (Vue),
 * узел комментария разрывает соседний `+`. Первая секция тела — любая .article_section_l после героя, которая не «вторая и далее».
 */
.blog-article-page-top
  ~ section.lighttheme.article_section_l:not(
    .blog-article-page-top ~ section.lighttheme.article_section_l ~ section.lighttheme.article_section_l
  ) {
  padding-top: var(--blog-article-hero-after-line);
}

.blog-article-page-top ~ section.lighttheme.article_section_l + section.lighttheme.article_section_l {
  padding-top: 0;
}

.blog-article-page-top ~ section.lighttheme.article_section_l ::selection {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .text-content {
  padding-left: var(--blog-article-gutter);
  padding-right: var(--blog-article-gutter);
}

/*
 * Блок автора вне потока: absolute от .row (top:0 = уровень первого блока с заголовком, не верх секции).
 * right: 120px — от правого края ряда (≈ на 20% ближе к краю, чем 150px). Справа у колонок — резерв под карточку.
 * Селекторы без :has(.blog-article-author-banner): если :has недоступен, общие стили баннера (flex, width:100%, margin)
 * оставляли бы блок в потоке — лишний вертикальный зазор до текста, «как будто» автор раздвигает абзацы.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l > .row {
  position: relative;
}

.blog-article-page-top ~ section.lighttheme.article_section_l > .row > .blog-article-author-banner + .article-section {
  margin-top: 0;
  padding-top: 0;
}

.blog-article-page-top ~ section.lighttheme.article_section_l > .row > .blog-article-author-banner + .article-section .article-section__title-wrap {
  margin-top: 0;
  padding-top: 0;
}

@media screen and (min-width: 768px) {
  .blog-article-page-top ~ section.lighttheme.article_section_l > .row > .blog-article-author-banner ~ .article-section.text-content {
    padding-right: calc(120px + 118px + var(--blog-article-gutter));
  }
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author-banner {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  padding-left: var(--blog-article-gutter);
  padding-right: var(--blog-article-gutter);
  margin: 0 0 clamp(20px, 3vw, 32px);
}

@media screen and (min-width: 768px) {
  .blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author-banner {
    justify-content: flex-end;
  }
}

.blog-article-page-top ~ section.lighttheme.article_section_l > .row > .blog-article-author-banner {
  position: absolute;
  top: 15px;
  right: 120px;
  z-index: 4;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author {
  width: 100%;
  max-width: 118px;
  text-align: center;
  box-sizing: border-box;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__photo {
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  max-width: 80px;
  width: 80px;
  height: 80px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__name {
  margin: 10px 0 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__title {
  margin: 6px 0 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

/* Лид из легаси-блока .specialist-mention (снимается при сборке) — в первой колонке перед H2. */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section.text-content > .sa-blog-specialist-lead {
  margin: 0 0 clamp(18px, 2.8vw, 26px);
}

/*
 * Бандл: `.article-section__info + .article-section__info { padding-top: 60px }` — зазор между двумя колонками __info.
 * У лида (`.sa-blog-specialist-lead`) и основного текста — два блока __info; 60px сверху у продолжения лишний.
 * `lead + __info` нестабилен: в статике между div бывает `<!-- -->` (Vue), из‑за чего `+` не матчится.
 */
.blog-article-page-top
  ~ section.lighttheme.article_section_l
  .article-section.text-content:has(> .article-section__info.sa-blog-specialist-lead)
  > .article-section__info.sa-blog-specialist-lead
  ~ .article-section__info {
  padding-top: 0 !important;
  margin-top: 0;
}

/*
 * Узкий вьюпорт: зазоры героя у линии (−30% к базовым px) — до 768px, как --blog-article-gutter.
 * (Отдельно от блока ≤767px: мета/типографика/автор в потоке.)
 */
@media screen and (max-width: 768px) {
  html:has(.blog-article-page-top) {
    --blog-article-hero-strip-line-mt: calc(95px * 0.7);
    --blog-article-hero-heading-to-line: calc(105px * 0.7);
    --blog-article-hero-after-line: calc(100px * 0.7);
  }
}

/*
 * Мобайл ≤767px: типографика тела; автор — в потоке над текстом, влево (без колонки справа).
 */
@media screen and (max-width: 767px) {
  html:has(.blog-article-page-top) {
    /* зазор шапка → мета: на 40% меньше, чем прежние 140px (84px) */
    --blog-header-meta-offset: calc(140px * 0.6);
  }

  .blog-article-page-top .blog-article-page-top__heading.case-all-heading-line {
    padding-bottom: 0;
  }

  .blog-article-page-top .blog-article-page-top__heading.case-all-heading-line::after {
    height: 2px;
    border-radius: 1px;
    width: 100%;
  }

  .blog-article-page-top .blog-article-page-top__heading.case-all-heading-line .cases-block__header-title.case-all-heading-title {
    font-size: clamp(1.75rem, 9vw, 70px);
    max-width: 100%;
  }

  .blog-article-page-top .blog-article-page-top__lead {
    font-size: clamp(0.84375rem, calc((0.75rem + 1.35vw) * 0.75), 1.5rem);
    max-width: none;
    width: 100%;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .section-info__title.h2 {
    font-size: clamp(15.75px, 3.75vw, 21px);
    line-height: 1.22;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l h3.section-title,
  .blog-article-page-top ~ section.lighttheme.article_section_l .h3.section-title {
    font-size: clamp(12.75px, 2.7vw, 16.5px);
    line-height: 1.32;
    padding-top: 4px;
  }

  /*
   * «Читайте ещё»: заголовок секции и карточки — как в листинге / на главном блоке блога,
   * без дополнительного −25% (уменьшение кегля только у тела статьи выше).
   */
  html:has(.blog-article-page-top) .blog-read-more.isNewContent .services__title[data-v-56f85d51],
  html:has(.blog-article-page-top) .blog-read-more.isNewContent .services__title {
    font-family: MuseoSansCyrl, sans-serif !important;
    font-size: clamp(21px, 5vw, 28px) !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin-bottom: clamp(14px, 3.5vw, 22px) !important;
    text-align: left !important;
  }

  /* Заголовок «Читайте ещё» → карточки: на 15px плотнее к основному зазору home-ledge */
  html:has(.blog-article-page-top) .blog-read-more .blog-read-more__intro.services__text.home-ledge {
    padding-bottom: calc(var(--home-ledge) * 0.8 - 15px) !important;
  }

  html:has(.blog-article-page-top)
    .blog-read-more
    .more-blog-case
    .case__description.case__description--static[data-v-c0adc676] {
    font-size: 15px !important;
    line-height: 1.32 !important;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l > .row > .blog-article-author-banner {
    position: static;
    right: auto;
    top: auto;
    z-index: auto;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(16px, 4vw, 24px) !important;
    padding-left: var(--blog-article-gutter) !important;
    padding-right: var(--blog-article-gutter) !important;
    display: flex !important;
    justify-content: flex-start;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author {
    max-width: none;
    width: auto;
    text-align: left;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__photo {
    width: 72px;
    height: 72px;
    max-width: 72px;
    margin: 0;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__name {
    font-size: 14px;
    margin-top: 8px;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .blog-article-author__title {
    font-size: 12px;
    margin-top: 4px;
  }
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__title-wrap {
  width: 100%;
  max-width: 733px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .section-info__title.h2 {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 0;
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info {
  max-width: 733px;
  width: 100%;
  padding-right: 0 !important;
}

/* Широкие иллюстрации `--bleed` (раньше `--wide`) выходят за 733px — не обрезаем по горизонтали ряд и колонку. */
.blog-article-page-top ~ section.lighttheme.article_section_l > .row:has(.sa-blog-body-media--bleed),
.blog-article-page-top ~ section.lighttheme.article_section_l > .row:has(.sa-blog-body-media--wide),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section.text-content:has(.sa-blog-body-media--bleed),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section.text-content:has(.sa-blog-body-media--wide),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:has(.sa-blog-body-media--bleed),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:has(.sa-blog-body-media--wide),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:has(.sa-blog-body-media--bleed) > div,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:has(.sa-blog-body-media--wide) > div {
  overflow-x: visible;
}

/*
 * Цитата + специалист (`.article-section__info--sub`): в snapshot.bundle — колонка справа (`position:absolute`, width 35%)
 * при `padding-right: 35%` у `.article-section__info`. У тёмной статьи padding-right сброшен — блок наезжал на абзацы.
 * В потоке под основным текстом: та же карточка, что у `.blockquote.blockquote_articles` (см. ниже); при аватаре — сетка слева круг, справа подпись и цитата.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub {
  position: static !important;
  right: auto !important;
  top: auto !important;
  width: 100%;
  max-width: 733px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(28px, 4.5vw, 48px) clamp(22px, 3.5vw, 40px);
  box-sizing: border-box;
  background-color: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(17px, 1.75vw, 21px);
  line-height: 1.5;
  font-weight: 300;
  color: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 2.2vw, 22px);
  row-gap: 0;
}

/* Без фото — как blockquote_articles: одна колонка, подпись над цитатой (DOM: сначала p, потом figure). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub:not(:has(img.specialist__img)) {
  display: flex;
  flex-direction: column;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub:not(:has(img.specialist__img)) .specialist__img-wrap {
  display: none !important;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub:not(:has(img.specialist__img)) .specialist__attributes {
  order: -1;
  margin: 0 0 0.85em;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub:not(:has(img.specialist__img)) p.text-small {
  margin-top: 0;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__main {
  display: contents;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__img-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: clamp(52px, 10vw, 64px);
  height: clamp(52px, 10vw, 64px);
  flex: unset;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 50%;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__attributes {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 0.85em;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  justify-content: flex-start;
  font-style: normal;
}

/* Как `.blockquote_articles__attr`: одна строка подписи, имя и роль через запятую */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__name {
  margin: 0;
  padding: 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(12px, 2.35vw, 16px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__name::after {
  content: ",\00a0";
  font-weight: inherit;
  color: inherit;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__position {
  margin: 0;
  padding: 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(12px, 2.35vw, 16px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub p.text-small {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 1em;
  line-height: inherit;
  font-weight: 300;
  font-style: normal;
  text-align: left;
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub p.text-small em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub p.text-small i {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info li {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: 19px;
  line-height: var(--blog-article-body-line-height);
  font-weight: 100;
  color: var(--blog-article-body-color);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section p {
  font-size: 19px;
  line-height: var(--blog-article-body-line-height);
  font-weight: 100;
  color: var(--blog-article-body-color);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section strong {
  color: var(--blog-article-body-color-strong);
  font-weight: 500;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section em {
  color: var(--blog-article-body-color-em);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > p + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > p + p {
  margin-top: 24px;
}

/* Текст → абзац только с картинкой: без лишнего «двойного» зазора (24px + strut line-height). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > p + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > p + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > p + p.sa-blog-body-media:not(:has(> *:not(img))) {
  margin-top: 14px;
}

/* Широкая иллюстрация после текста — компактный зазор до картинки (перебивает 14px у «только img»). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > p + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > p + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > p + p.sa-blog-body-media.sa-blog-body-media--wide {
  margin-top: 10px;
}

/*
 * После абзаца сразу идёт `div.sa-blog-body-media` (WP `.wp-caption`, `.wp-video`) — не срабатывает `p + p`;
 * в prose у `div.sa-blog-body-media` задан margin-top: 0 — нужна большая специфичность, чем у того правила.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > p + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > p + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > p + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > p + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > p + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > p + div.wp-video.sa-blog-body-media {
  margin-top: 24px;
}

/*
 * После `ul|ol.sa-blog-body-list` сразу иллюстрация — иначе нет соседа `p` сверху (как воронка после списка в статье про VK).
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ul.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ul.sa-blog-body-list + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ol.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ol.sa-blog-body-list + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + div.wp-video.sa-blog-body-media {
  margin-top: 24px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + div.sa-blog-body-media.sa-blog-body-media--bleed {
  margin-top: 10px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > ul.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > ol.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + p.sa-blog-body-media:not(:has(> *:not(img))) {
  margin-top: 14px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > ul.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ul.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ul.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info > div > ol.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > ol.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > ol.sa-blog-body-list + p.sa-blog-body-media.sa-blog-body-media--wide {
  margin-top: 10px;
}

/*
 * Блок `.wp-caption`/`.sa-blog-body-media` (div) + следующий абзац: тот же 24px, что у `p + p` в колонке.
 * Без отдельного «спейсера» в HTML селектор `p + p` не срабатывает — подпись внутри div, сосед снизу — `p`.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > div.sa-blog-body-media + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > div.sa-blog-body-media + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > div.sa-blog-body-media + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > div.wp-video.sa-blog-body-media + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > div.wp-video.sa-blog-body-media + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > div.wp-video.sa-blog-body-media + p {
  margin-top: 24px;
}

/*
 * Два блока иллюстрации подряд (`div.wp-caption` / `div.wp-video`) — подпись первого внутри первого div,
 * без `<p>` между блоками; 24px визуально «слипало» подпись со следующим скриншотом — отступ сверху у второго блока крупнее.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > div.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > div.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > div.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > div.wp-video.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > div.wp-video.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > div.wp-video.sa-blog-body-media + div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info > div > div.sa-blog-body-media + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose > div > div.sa-blog-body-media + div.wp-video.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose > div > div.sa-blog-body-media + div.wp-video.sa-blog-body-media {
  margin-top: clamp(48px, 7vw, 96px);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section + .article-section {
  padding-top: 40px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .h3.section-title {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 500;
  margin-top: 0;
  padding-top: 8px;
  color: #fff;
  width: 100%;
  max-width: 733px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list {
  font-size: 19px;
  line-height: var(--blog-article-body-line-height);
  font-weight: 100;
  display: flex;
  flex-direction: column;
  gap: var(--blog-article-list-rows-gap);
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Над списком тела — 10px после любого предыдущего элемента в той же колонке (абзац, h4, другой список и т.д.).
 * Вложенный список без элемент-соседа слева не получает отступ (первый ul/ol внутри li).
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info * + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info * + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose * + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose * + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose * + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose * + ol.sa-blog-body-list {
  margin-top: 10px;
}

/*
 * После иллюстрации тела (`.sa-blog-body-media` / `figure.sa-blog-media`) до списка или заголовка секции —
 * больше, чем у `p + p` (24px): +15px к зазору после картинки.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure.sa-blog-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure.sa-blog-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose figure.sa-blog-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose figure.sa-blog-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure.sa-blog-media + ul.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure.sa-blog-media + ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure.sa-blog-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure.sa-blog-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose figure.sa-blog-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose figure.sa-blog-media + h3.section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure.sa-blog-media + h2.section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure.sa-blog-media + h3.section-title {
  margin-top: 39px;
}

/*
 * Один пункт-«подзаголовок»: <ul class="sa-blog-body-list"><li><strong>…</strong></li></ul>.
 * Больше воздуха сверху; снизу до абзаца — см. узкий margin у `… + p` ниже.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info * + ul.sa-blog-body-list:has(> li:only-child > strong),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info * + ol.sa-blog-body-list:has(> li:only-child > strong),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose * + ul.sa-blog-body-list:has(> li:only-child > strong),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose * + ol.sa-blog-body-list:has(> li:only-child > strong),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose * + ul.sa-blog-body-list:has(> li:only-child > strong),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose * + ol.sa-blog-body-list:has(> li:only-child > strong) {
  margin-top: 26px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list {
  counter-reset: section;
  /*
   * Бандл: padding-left на ol + ::before у li с left:0 без padding на li — цифра наезжает на текст.
   * Колонка маркера — на li (как у ul в .article-section ul li).
   */
  padding-left: 0;
}

/*
 * Бандл: .article-section ol li { position: static } — якорь ::before уезжает к предку;
 * плюс у ol li нет padding-left (в отличие от ul li), поэтому при left:0 маркер перекрывает текст.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list > li {
  position: relative;
  padding-left: 34px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list > li {
  margin-bottom: 0 !important;
}

/* Маркер «—» у ul: якорь — li (бандл не задаёт position на ul li). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list > li,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list > li {
  position: relative;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list > li::before,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list > li::before,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list > li::before {
  color: rgb(175, 175, 177);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list > li::before,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list > li::before,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list > li::before {
  color: rgb(175, 175, 177);
  font-weight: 500;
}

/*
 * После списка — чуть больше воздуха до следующего блока.
 */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list + h2,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list + h2,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list + h3,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list + h3,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list + .section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list + .section-title {
  margin-top: 36px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list:has(> li:only-child > strong) + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list:has(> li:only-child > strong) + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list:has(> li:only-child > strong) + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list:has(> li:only-child > strong) + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list:has(> li:only-child > strong) + p,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list:has(> li:only-child > strong) + p {
  margin-top: 14px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info ul.sa-blog-body-list:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info ol.sa-blog-body-list:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list:last-child {
  margin-bottom: 28px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section a {
  font-weight: 100;
  color: var(--blog-article-link);
  text-underline-offset: 3px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .article-section a:hover {
  color: var(--blog-article-link-hover);
}

.blog-article-page-top .blog-article-page-top__lead a {
  font-weight: 100;
  color: var(--blog-article-link);
  text-underline-offset: 3px;
}

.blog-article-page-top .blog-article-page-top__lead a:hover {
  color: var(--blog-article-link-hover);
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles a {
  font-weight: 100;
  color: var(--blog-article-link);
  text-underline-offset: 3px;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles a:hover {
  color: var(--blog-article-link-hover);
}

/* lighttheme в бандле красит заголовки в #000 — переопределяем */
.blog-article-page-top ~ section.lighttheme.article_section_l.lighttheme .section-info__title,
.blog-article-page-top ~ section.lighttheme.article_section_l.lighttheme .section-title,
.blog-article-page-top ~ section.lighttheme.article_section_l.lighttheme .title {
  color: #fff;
}

/*
 * Цитаты `.blockquote_articles` в теле (секция только с blockquote): макет Figma «Вариации цитат» —
 * тёмная подложка, скругление; левый край карточки = колонка текста (gutter + до 733px, как .article-section__info).
 */
.blog-article-page-top ~ section.lighttheme.article_section_l > .row.tablet_full_width > .blockquote.blockquote_articles.text-content {
  box-sizing: border-box;
  width: min(733px, calc(100% - 2 * var(--blog-article-gutter)));
  margin-left: var(--blog-article-gutter);
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: clamp(28px, 4.5vw, 48px) clamp(22px, 3.5vw, 40px);
  background-color: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(17px, 1.75vw, 21px);
  line-height: 1.5;
  font-weight: 300;
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles ::selection {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles .row_tablet {
  margin: 0;
  padding: 0;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles .blockquote_articles__attr {
  display: block;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(12px, 2.35vw, 16px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.85em;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles .blockquote_articles__quote {
  margin: 0;
  font-size: 1em;
  font-weight: 300;
  line-height: inherit;
  color: #fff;
}

.blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles span {
  width: 100%;
  max-width: none;
  display: block;
  color: #fff;
  font-weight: 300;
}

@media screen and (max-width: 767px) {
  .blog-article-page-top ~ section.lighttheme.article_section_l > .row.tablet_full_width > .blockquote.blockquote_articles.text-content {
    border-radius: 22px;
    font-size: clamp(11.25px, 2.7vw, 13.5px);
    padding: clamp(22px, 5vw, 32px) clamp(18px, 4vw, 26px);
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .blockquote.blockquote_articles .blockquote_articles__attr {
    font-size: clamp(9px, 2.4vw, 10.5px);
    margin-bottom: 0.75em;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub {
    border-radius: 22px;
    font-size: clamp(11.25px, 2.7vw, 13.5px);
    padding: clamp(22px, 5vw, 32px) clamp(18px, 4vw, 26px);
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__name,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__position {
    font-size: clamp(9px, 2.4vw, 10.5px);
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info--sub .specialist__attributes {
    margin-bottom: 0.75em;
  }
}

/* ——— «Читайте также» (legacy) / «Читайте ещё» (каталог) ——— */
.blog-article-page-top ~ section.blog-articles .blog-articles__title {
  font-family: MuseoSansCyrl, sans-serif;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
}

.blog-article-page-top ~ section.blog-articles .blog-articles__caption {
  font-family: MuseoSansCyrl, sans-serif;
  color: #fff;
}

.blog-article-page-top ~ section.blog-articles .main-cases__wording {
  color: rgba(255, 255, 255, 0.55);
}

/* «Читайте ещё»: те же карточки, что в листинге /blog; слайдер как blog-block на главной */
.blog-article-page-top ~ section.blog-read-more {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: clamp(2rem, 5vw, 4rem);
  /* Внешний margin до футера не нужен — вертикальные отступы футера как у /blog и главной (css__home-snapshot__snapshot.bundle.css). */
  margin-bottom: 0;
}

/*
 * Нативный горизонтальный ряд (css__home-snapshot__native-row-scroll.css): у .blog-block__swiper-container[data-native-row="1"]
 * стоит margin-bottom: -40px (чтобы padding-bottom под glow не раздувал макет). На странице статьи это схлопывается
 * с margin-bottom секции выше — визуально почти исчезал зазор между карточками и футером. Отменяем только здесь.
 */
.blog-article-page-top ~ section.blog-read-more .blog-block__swiper-container.swiper-container[data-native-row="1"] {
  margin-bottom: 0;
}

/*
 * «Читайте ещё»: секция уже .blog-block-mainstr с горизонтальным padding в parity-sync.
 * На странице статьи подменяем на тот же --blog-article-gutter, что у героя/тела (без второго padding у .services__text).
 */
html:has(.blog-article-page-top) .blog-article-page-top ~ section.blog-read-more.blog-block-mainstr {
  padding-left: var(--blog-article-gutter) !important;
  padding-right: var(--blog-article-gutter) !important;
  box-sizing: border-box;
}

.blog-article-page-top ~ section.blog-articles {
  background: transparent !important;
  background-color: transparent !important;
}

.blog-article-page-top ~ section.blog-read-more .services__title {
  color: #fff;
}

/* Страница статьи: «Читайте ещё» — вес как у H2 в теле, не «лёгкий» из .services__text */
html:has(.blog-article-page-top) .blog-read-more.isNewContent .services__title[data-v-56f85d51],
html:has(.blog-article-page-top) .blog-read-more.isNewContent .services__title {
  font-family: MuseoSansCyrl, sans-serif;
  font-weight: 500;
}

/* «Читайте ещё»: заголовок компактнее главного «Блог»; зазор под заголовком до ряда карточек −20%. */
.blog-read-more .blog-read-more__intro.services__text.home-ledge {
  padding-bottom: calc(var(--home-ledge) * 0.8) !important;
}

.blog-read-more .blog-block__swiper-container.swiper-container {
  padding-top: calc(var(--home-ledge) / 2 * 0.8) !important;
}

.blog-read-more.isNewContent .services__title[data-v-56f85d51],
.blog-read-more.isNewContent .services__title {
  font-size: 37px !important;
  line-height: 1.26 !important;
  letter-spacing: 0.02em;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 1440px) {
  .blog-read-more.isNewContent .services__title[data-v-56f85d51],
  .blog-read-more.isNewContent .services__title {
    font-size: 42px !important;
  }
}

@media screen and (max-width: 930px) {
  .blog-read-more.isNewContent .services__title[data-v-56f85d51],
  .blog-read-more.isNewContent .services__title {
    font-size: 39px !important;
    margin-bottom: 42px !important;
  }
}

@media screen and (max-width: 550px) {
  .blog-read-more.isNewContent .services__title[data-v-56f85d51],
  .blog-read-more.isNewContent .services__title {
    font-size: 21px !important;
    margin-bottom: 16px !important;
  }
}

.blog-read-more .blog-read-more__intro {
  margin-bottom: 0;
}

.blog-read-more .blog-block__content-box-slide {
  width: 374px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.blog-read-more .blog-block__content-box-slide .case {
  width: 100%;
  max-width: 100%;
}


/* Карточки #blog-grid / «Читайте ещё»: перенесены в css/css__home-snapshot__overrides.parity-sync.css (листинг не подключает этот файл). */


@media screen and (max-width: 930px) {
  .blog-read-more .blog-block__content-box-slide {
    width: 310px;
    max-width: 310px;
  }
}

@media screen and (max-width: 550px) {
  .blog-read-more .blog-block__content-box-slide {
    width: 250px;
    max-width: 250px;
  }
}

/*
 * Мобайл: основной текст тела — от базовых 19px: сначала ×0.7 (−30%), затем +15% к этому мобильному кеглю (= ×0.805).
 * Блок после глобальных правил 19px — иначе каскад не применится.
 */
@media screen and (max-width: 767px) {
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:not(.article-section__info--sub),
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:not(.article-section__info--sub) p,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section__info:not(.article-section__info--sub) li,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose li,
  .blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p,
  .blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose li {
    font-size: calc(19px * 0.7 * 1.15);
    font-weight: 100;
  }

  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section ul.sa-blog-body-list,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section ol.sa-blog-body-list,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ul.sa-blog-body-list,
  .blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose ol.sa-blog-body-list,
  .blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ul.sa-blog-body-list,
  .blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose ol.sa-blog-body-list {
    font-size: calc(19px * 0.7 * 1.15);
    font-weight: 100;
  }
}