` + `img` + `figcaption.sa-blog-media__caption`, либо WP `.wp-caption > p.sa-blog-media__caption` — те же отступы, что у `figure` ниже; у `.sa-blog-media__caption` начертание как у текста статьи (`font-weight: 100`).
*
* Медиа в колонке: обёртка `div.sa-blog-body-media`; картинки — `p.sa-blog-body-media`, при необходимости — `figure` с теми же классами. Второй класс ширины: `--wide` (широкий блок; в старых HTML ещё встречается `--bleed`, те же правила) или `--content` / `--text` (см. blog-article-body-media-markup.mjs).
*/
/* Легаси WP: span с color внутри заголовка секции — иначе блок ниже с [style*="#000"] красит подпись в цвет тела. */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section h3.section-title [style],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .h3.section-title [style] {
color: inherit !important;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section h4,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .h4 {
font-family: MuseoSansCyrl, sans-serif;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.35;
font-weight: 500;
margin: 1.25em 0 0.5em;
color: #fff;
max-width: 733px;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section h5,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .h5,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section h6,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .h6 {
font-family: MuseoSansCyrl, sans-serif;
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.4;
font-weight: 500;
margin: 1.1em 0 0.4em;
color: rgb(220, 220, 222);
max-width: 733px;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section blockquote,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose blockquote {
margin: 1.25em 0;
padding: 0.35em 0 0.35em 1.15em;
border-left: 3px solid rgba(255, 255, 255, 0.35);
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-em);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section blockquote p,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose blockquote p {
margin: 0.5em 0;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section blockquote p:first-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose blockquote p:first-child {
margin-top: 0;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section blockquote p:last-child,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose blockquote p:last-child {
margin-bottom: 0;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section hr,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose hr {
margin: 2em 0;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section pre,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose pre {
margin: 1.25em 0;
padding: 1rem 1.1rem;
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 15px;
line-height: 1.55;
font-weight: 400;
color: var(--blog-article-body-color);
background: rgba(0, 0, 0, 0.45);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section pre code,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose pre code {
font-size: inherit;
background: none;
border: none;
padding: 0;
color: inherit;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section :not(pre) > code,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose :not(pre) > code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9em;
padding: 0.12em 0.4em;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: var(--blog-article-body-color);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info table,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose table,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose table {
margin: 1.25em 0;
width: 100%;
max-width: 733px;
border-collapse: collapse;
font-family: MuseoSansCyrl, sans-serif;
font-size: 18px;
line-height: 1.45;
font-weight: 100;
color: var(--blog-article-body-color);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info th,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info td,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose th,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose td,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose th,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose td {
padding: 0.55em 0.75em;
border: 1px solid rgba(255, 255, 255, 0.18);
text-align: left;
vertical-align: top;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info th,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose th,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose th {
font-weight: 500;
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
/* Горизонтальный скролл для широких таблиц в теле статьи (узкий viewport). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .blog-article-table-scroll,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .blog-article-table-scroll,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .blog-article-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.25em 0;
max-width: 100%;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .blog-article-table-scroll table,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .blog-article-table-scroll table,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .blog-article-table-scroll table {
margin: 0;
min-width: 560px;
}
/*
* Таблица внутри div.sa-blog-body-media: внешний блок без вертикали — отступ даёт скролл
* (как у одиночного .blog-article-table-scroll). Раньше margin: 0 «убирал дубль», но после абзаца
* шёл div, а не второй p — верхний зазор пропадал.
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media > .blog-article-table-scroll,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media > .blog-article-table-scroll,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media > .blog-article-table-scroll {
margin: 1.25em 0;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media table,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media table,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media table {
margin: 0;
max-width: none;
width: 100%;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-table-dashed th,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-table-dashed td,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-table-dashed th,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-table-dashed td,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-table-dashed th,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-table-dashed td {
border-style: dashed;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.42);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media .blog-article-table-scroll .sa-blog-table-dashed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media .blog-article-table-scroll .sa-blog-table-dashed,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media .blog-article-table-scroll .sa-blog-table-dashed {
min-width: 720px;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figure,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figure.sa-blog-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure.sa-blog-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-block-image,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-block-image {
margin: 1.5em 0;
max-width: 733px;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figure img,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure img,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-block-image img,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-block-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* WP: подпись сразу под ![]()
в .wp-caption — зазор между низом картинки и текстом подписи. */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption > .wp-caption-text,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption > .wp-caption-text,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption > .sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption > .sa-blog-media__caption {
margin-top: 16px;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figcaption:not(.specialist__attributes),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figcaption:not(.specialist__attributes),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption-text,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption-text,
/* Подпись отдельным после абзаца только с картинкой (без div.wp-caption) */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption > .sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption > .sa-blog-media__caption {
/*
* Зазор под картинкой до подписи: фиксированные px, не --home-ledge (он только у «Читайте ещё» / главной).
* 16px — как у .wp-caption-text выше; 0.5em давало ~8px и «липло» к img.
*/
margin-top: 16px;
font-family: MuseoSansCyrl, sans-serif;
font-size: 15px;
line-height: 1.45;
font-weight: 300;
font-style: normal;
color: rgba(255, 255, 255, 0.55);
text-align: left;
}
/* Канонический класс подписи — Museo 100, как основной текст статьи (не 300 у .wp-caption-text). */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figcaption.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figcaption.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption > .sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption > .sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-media__caption {
font-weight: 100;
}
/*
* Подпись по классу: перебивает общие правила `p` из blog-article-figma.css (19px / --blog-article-body-line-height),
* сборка вешает `sa-blog-media__caption` в scripts/blog-article-body-caption-markup.mjs.
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-media__caption {
font-family: MuseoSansCyrl, sans-serif;
font-size: 15px;
line-height: 1.45;
font-style: normal;
color: rgba(255, 255, 255, 0.55);
text-align: left;
}
/*
* Подпись сразу после широкого `p.sa-blog-body-media--wide` / `--bleed`: та же горизонталь, что у широкого блока
* (иначе абзац подписи остаётся в колонке 733px и «сужается» относительно картинки).
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--bleed + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--bleed + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--wide + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--wide + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--bleed + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--bleed + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--wide + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--wide + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--bleed + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--bleed + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--wide + p:has(> em:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--wide + p:has(> small:only-child),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--bleed + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media--wide + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--bleed + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media--wide + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--bleed + p.sa-blog-media__caption,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media--wide + p.sa-blog-media__caption {
max-width: min(calc(100vw - 2 * var(--blog-article-gutter, 78px)), 1040px);
width: 100%;
box-sizing: border-box;
}
/* WP часто оборачивает подпись в — без сброса курсив и ~80% кегля */
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figcaption:not(.specialist__attributes) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figcaption:not(.specialist__attributes) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figcaption:not(.specialist__attributes) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figcaption:not(.specialist__attributes) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption-text em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption-text i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption-text em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption-text i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> em:only-child) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> em:only-child) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> em:only-child) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> em:only-child) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> em:only-child) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> em:only-child) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> em:only-child) em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> em:only-child) i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption .sa-blog-media__caption em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption .sa-blog-media__caption i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption .sa-blog-media__caption em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption .sa-blog-media__caption i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-media__caption em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-media__caption i,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-media__caption em,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-media__caption i,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-media__caption em,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-media__caption i {
font-style: normal;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section figcaption:not(.specialist__attributes) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figcaption:not(.specialist__attributes) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption-text small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption-text small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> em:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> em:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> em:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> em:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p:has(img) + p:has(> small:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info figure:has(img) + p:has(> small:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p:has(img) + p:has(> small:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose figure:has(img) + p:has(> small:only-child) small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .wp-caption .sa-blog-media__caption small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .wp-caption .sa-blog-media__caption small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-media__caption small,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-media__caption small,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-media__caption small {
font-size: inherit;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info img,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose img,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose img {
max-width: 100%;
height: auto;
}
/*
* Медиа в теле: `.sa-blog-body-media` (вшивает build-blog-article-pages.mjs).
* Ширина: `.sa-blog-body-media--wide` (и легаси `.sa-blog-body-media--bleed`) — `width: 100%` колонки тела, `max-width: min(100vw − 2×gutter, 1040px)`; `.sa-blog-body-media--text` / `--content` — колонка текста (733px).
* Только div-обёртка с margin 0 — у `p.sa-blog-body-media` вертикаль ритмит `p + p` в blog-article-figma.css.
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose div.sa-blog-body-media,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose div.sa-blog-body-media {
margin-top: 0;
margin-bottom: 0;
display: block;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: auto !important;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .wp-video.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .wp-video.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .wp-video.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .wp-video.sa-blog-body-media--wide {
--sa-blog-body-bleed-w: min(calc(100vw - 2 * var(--blog-article-gutter, 78px)), 1040px);
/* 100% колонки тела (до 733px), верх — max 1040px: иначе фикс. ширина ~1040px в узком родителе даёт «узкую» картинку при width:100% у img с неявной базой для процентов. */
--sa-blog-wp-video-width: 100%;
width: 100% !important;
max-width: var(--sa-blog-body-bleed-w) !important;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--content,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--content,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--content {
width: 100% !important;
max-width: 733px !important;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media img,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media img,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/*
* Абзац только с ![]()
(без других элементов-наследников): у родителя line-height тела даёт «пустую» строку над/под блоком картинки.
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose p.sa-blog-body-media:not(:has(> *:not(img))),
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose p.sa-blog-body-media:not(:has(> *:not(img))) {
line-height: 0;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .wp-video video,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .wp-video video {
width: 100% !important;
height: auto !important;
max-width: 100%;
vertical-align: bottom;
}
@media screen and (max-width: 767px) {
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .wp-video.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .wp-video.sa-blog-body-media--bleed,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .wp-video.sa-blog-body-media--wide,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .wp-video.sa-blog-body-media--wide {
--sa-blog-body-bleed-w: 100%;
--sa-blog-wp-video-width: 100%;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--text,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info .sa-blog-body-media.sa-blog-body-media--content,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--content,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .sa-blog-body-media.sa-blog-body-media--content {
max-width: 100% !important;
}
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .aligncenter,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .alignleft,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .alignleft {
float: left;
margin: 0.25em 1.25em 0.75em 0;
max-width: min(100%, 360px);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .alignright,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .alignright {
float: right;
margin: 0.25em 0 0.75em 1.25em;
max-width: min(100%, 360px);
}
@media screen and (max-width: 767px) {
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .alignleft,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .alignright,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .alignleft,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose .alignright {
float: none;
display: block;
margin: 1em auto;
max-width: 100%;
}
}
/*
* WordPress часто оставляет inline color:#000000 под «светлую» тему редактора.
* На статических статьях фон тёмный — без !important инлайн перебивает наследование.
* Селекторы по подстроке style= — только явный чёрный, без «color: #000» (ложные совпадения с #0000ff).
*/
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info [style*="#000000"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose [style*="#000000"],
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose [style*="#000000"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info [style*="rgb(0, 0, 0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose [style*="rgb(0, 0, 0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose [style*="rgb(0, 0, 0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info [style*="rgb(0,0,0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose [style*="rgb(0,0,0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose [style*="rgb(0,0,0)"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info [style*="color: black"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose [style*="color: black"],
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose [style*="color: black"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info [style*="color:black"],
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose [style*="color:black"],
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose [style*="color:black"] {
color: var(--blog-article-body-color) !important;
}
/* Мобайл: цитаты и таблицы в масштабе тела (как у figma: ×0.7 затем +15% = ×0.805 от 19px / 18px). */
@media screen and (max-width: 767px) {
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section blockquote,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose blockquote {
font-size: calc(19px * 0.7 * 1.15);
}
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .article-section__info table,
.blog-article-page-top ~ section.lighttheme.article_section_l .article-section .sa-blog-prose table,
.blog-article-page-top ~ section.lighttheme.article_section_l .sa-blog-prose table {
font-size: calc(18px * 0.7 * 1.15);
}
}