/* =========================================================
   content.css — типографика контента внутри .content-blocks
   (single, фолбэк страниц) + шапка записи блога
   (.post-head/.post-title/.post-image).
   .content-blocks — обычный блок (без flex): сырой контент идёт
   простыми тегами, блочная сборка кейса — div-блоками.
   ========================================================= */

.content-blocks > * {
    margin-top: 0;
    margin-bottom: 0;
}

.content-blocks > * + * {
    margin-top: 20px;
}

/* Заголовки */
.content-blocks > h2 {
    margin-top: 48px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(26px, 2.1vw, 40px);
    line-height: 1.1;
    color: var(--color-text-dark);
}

.content-blocks > h3 {
    margin-top: 40px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(20px, 1.5vw, 28px);
    line-height: 1.15;
    color: var(--color-text-dark);
}

.content-blocks > h4 {
    margin-top: 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.2;
    color: var(--color-text-dark);
}

.content-blocks > h2:first-child,
.content-blocks > h3:first-child,
.content-blocks > h4:first-child {
    margin-top: 0;
}

/* Текст и ссылки */
.content-blocks > p {
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.5;
    color: var(--color-text-dark);
}

.content-blocks a {
    color: var(--color-accent-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content-blocks a:hover {
    text-decoration: none;
}

.content-blocks strong {
    color: var(--color-bg-dark);
}

/* Списки */
.content-blocks > ul,
.content-blocks > ol {
    padding-left: 24px;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.5;
    color: var(--color-text-dark);
}

.content-blocks > ul {
    list-style: disc;
}

.content-blocks > ol {
    list-style: decimal;
}

.content-blocks li + li {
    margin-top: 12px;
}

.content-blocks li::marker {
    color: #cccccc;
}

/* Изображения и видео (в т.ч. внутри <a>/<figure> — из плейсхолдеров) */
.content-blocks img,
.content-blocks video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card-lg);
}

.content-blocks figure {
    margin-left: 0;
    margin-right: 0;
}

.content-blocks figcaption {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
}

/* Ритм внутри текстовых обёрток блоков (Вызов / Решение / result-text) */
.content-blocks .content-block--card > * + *,
.content-blocks .content-block-text > * + *,
.content-blocks .result-text > * + * {
    margin-top: 20px;
}

/* Контент внутри блочной сборки кейса (Вызов / Решение): дефолты для сырых p/ul/li */
.content-blocks .content-block p,
.content-blocks .content-block li {
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.5;
    color: var(--color-text-dark);
}

.content-blocks .content-block p {
    margin: 0;
}

.content-blocks .content-block p + p {
    margin-top: 20px;
}

.content-blocks .content-block ul,
.content-blocks .content-block ol {
    margin-top: 20px;
    padding-left: 24px;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.5;
    color: var(--color-text-dark);
}

.content-blocks .content-block li + li {
    margin-top: 12px;
}

/* Цитата — как в кейсе: серая карточка с кавычкой (`.quote--card`) */
.content-blocks > blockquote {
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 40px 48px 44px;
    background-color: var(--color-bg-gray);
    border-radius: var(--radius-card-lg);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.45;
    color: var(--color-bg-dark);
}

/* Кавычка-маркер — та же SVG, что у `.quote-mark` (viewBox 59×45) */
.content-blocks > blockquote::before {
    content: '';
    display: block;
    width: 40px;
    height: 31px;
    margin-bottom: 24px;
    background-color: var(--color-accent-orange);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2059%2045'%3E%3Cpath%20fill='%23000'%20d='M5.16454%2040.7747C1.80416%2037.2055%200%2033.2025%200%2026.7134C0%2015.2946%208.01596%205.06014%2019.6729%200L22.5863%204.49573C11.7059%2010.3813%209.5787%2018.0188%208.73045%2022.8342C10.4824%2021.9273%2012.776%2021.6108%2015.0238%2021.8196C20.9094%2022.3644%2025.5486%2027.1962%2025.5486%2033.2025C25.5486%2036.2309%2024.3456%2039.1353%2022.2042%2041.2767C20.0627%2043.4182%2017.1583%2044.6212%2014.1299%2044.6212C12.4551%2044.6068%2010.7999%2044.2592%209.2607%2043.5989C7.72151%2042.9385%206.32909%2041.9785%205.16454%2040.7747ZM37.7895%2040.7747C34.4292%2037.2055%2032.625%2033.2025%2032.625%2026.7134C32.625%2015.2946%2040.641%205.06014%2052.2979%200L55.2113%204.49573C44.3309%2010.3813%2042.2037%2018.0188%2041.3554%2022.8342C43.1074%2021.9273%2045.4009%2021.6108%2047.6488%2021.8196C53.5344%2022.3644%2058.1736%2027.1962%2058.1736%2033.2025C58.1736%2036.2309%2056.9706%2039.1353%2054.8292%2041.2767C52.6877%2043.4182%2049.7833%2044.6212%2046.7549%2044.6212C45.0801%2044.6068%2043.4249%2044.2592%2041.8857%2043.5989C40.3465%2042.9385%2038.9541%2041.9785%2037.7895%2040.7747Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2059%2045'%3E%3Cpath%20fill='%23000'%20d='M5.16454%2040.7747C1.80416%2037.2055%200%2033.2025%200%2026.7134C0%2015.2946%208.01596%205.06014%2019.6729%200L22.5863%204.49573C11.7059%2010.3813%209.5787%2018.0188%208.73045%2022.8342C10.4824%2021.9273%2012.776%2021.6108%2015.0238%2021.8196C20.9094%2022.3644%2025.5486%2027.1962%2025.5486%2033.2025C25.5486%2036.2309%2024.3456%2039.1353%2022.2042%2041.2767C20.0627%2043.4182%2017.1583%2044.6212%2014.1299%2044.6212C12.4551%2044.6068%2010.7999%2044.2592%209.2607%2043.5989C7.72151%2042.9385%206.32909%2041.9785%205.16454%2040.7747ZM37.7895%2040.7747C34.4292%2037.2055%2032.625%2033.2025%2032.625%2026.7134C32.625%2015.2946%2040.641%205.06014%2052.2979%200L55.2113%204.49573C44.3309%2010.3813%2042.2037%2018.0188%2041.3554%2022.8342C43.1074%2021.9273%2045.4009%2021.6108%2047.6488%2021.8196C53.5344%2022.3644%2058.1736%2027.1962%2058.1736%2033.2025C58.1736%2036.2309%2056.9706%2039.1353%2054.8292%2041.2767C52.6877%2043.4182%2049.7833%2044.6212%2046.7549%2044.6212C45.0801%2044.6068%2043.4249%2044.2592%2041.8857%2043.5989C40.3465%2042.9385%2038.9541%2041.9785%2037.7895%2040.7747Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.content-blocks > blockquote p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.content-blocks > blockquote cite {
    display: block;
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 18px;
    font-style: normal;
    color: var(--color-text-muted);
}

/* Разделитель */
.content-blocks > hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 40px 0;
}

/* Таблицы */
.content-blocks table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(14px, 0.83vw, 16px);
    color: var(--color-text-dark);
}

.content-blocks th,
.content-blocks td {
    padding: 12px 16px;
    border: 1px solid var(--color-border-light);
    text-align: left;
}

.content-blocks th {
    background-color: var(--color-bg-gray);
    color: var(--color-bg-dark);
    font-weight: 700;
}

/* Код */
.content-blocks code {
    padding: 2px 6px;
    background-color: var(--color-bg-gray);
    border-radius: 6px;
    font-size: 0.95em;
}

.content-blocks pre {
    padding: 20px;
    background-color: var(--color-bg-gray);
    border-radius: var(--radius-card-lg);
    overflow: auto;
}

/* Разделитель-плейсхолдер (%break%) */
.content-blocks .ecvi-clear {
    clear: both;
}

/* ---- Шапка записи блога (страница «Типовая страница блога») ---- */

.post-section {
    padding: 24px 0 0;
}

.post-content {
    max-width: 810px;
}

.post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    font-size: 16px;
    color: var(--color-text-muted);
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-title {
    margin-bottom: 32px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(30px, 2.5vw, 48px);
    line-height: 1.05;
    color: var(--color-text-dark);
}

.post-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 32px;
    border-radius: var(--radius-card-lg);
}

@media (max-width: 640px) {
    .content-blocks blockquote {
        padding: 28px 24px 32px;
    }

    .post-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* =========================================================
   SINGLE: единый каркас записей (блог / кейс / интеграция).
   Один контейнер: `.post-content` (810) слева — заголовок,
   мета (только блог) и контент; справа `.single-head-side` —
   картинка (кейс — круг, интеграция — квадрат; у блога нет).
   Низ записей — секция как у «Новостей» главной (.news-section).
   ========================================================= */

.post-section > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 80px;
}

/* Кейс: картинка прижата к контенту (60px от колонки), а не к правому краю */
.post-section--case > .container {
    grid-template-columns: minmax(0, 810px) auto;
    justify-content: start;
    gap: 60px;
}

/* Если после записи нет «Новостей» (related) — отступ снизу во всю секцию */
.post-section:not(:has(+ .news-section)) {
    padding-bottom: var(--section-pad);
}

/* Интеграция: описание и кнопка под заголовком */
.single-desc {
    max-width: 580px;
    font-size: var(--fs-body);
    line-height: 1.3;
    color: var(--color-text-muted);
}

.single-actions {
    margin-top: 60px;
}

/* Related в записях: заголовок меньше, чем у «Новостей» главной (модификатор только для single) */
.news-section--single .news-title {
    font-size: clamp(24px, 2.5vw, 48px);
}

/* Кейс: блочная сборка — свой ритм между блоками (текст — дефолт 20) */
.post-section--case .content-blocks > * + * {
    margin-top: clamp(28px, 3vw, 58px);
}

/* Правая ячейка: картинка + подпись */
.single-head-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Кейс: картинка в круге (по макету) */
.single-logo--circle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 292.5px;
    height: 292.5px;
    border: 0.9px solid #E7E7E7;
    border-radius: 720px;
}

.single-logo--circle img {
    max-width: 75%;
    max-height: 50%;
    object-fit: contain;
}

/* Интеграция: картинка в квадрате */
.single-logo--square {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 417px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    padding: 48px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card-lg);
}

.single-logo--square img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.single-logo-caption {
    font-family: 'Inter Tight', var(--font-body);
    font-weight: 400;
    font-size: 14.4px;
    line-height: 1.3;
    color: #121212;
    text-align: center;
}

@media (max-width: 1024px) {
    .post-section > .container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Картинка записи — над заголовком */
    .single-head-side {
        order: -1;
    }
}