/* =========================================================
   СТАТЬИ БЛОГА NOVA

   Единственный обязательный класс:
   .nova-blog-article

   Дополнительные классы у section, table, blockquote,
   ссылок и FAQ не требуются.
   ========================================================= */


/* =========================================================
   1. ОСНОВНОЙ КОНТЕЙНЕР
   ========================================================= */

.nova-blog-article {
    --nova-blog-accent: #55b8e8;
    --nova-blog-accent-dark: #168dcc;
    --nova-blog-accent-deep: #0f6f9f;

    --nova-blog-text: #1f2d35;
    --nova-blog-muted: #5f707a;

    --nova-blog-bg: #ffffff;
    --nova-blog-bg-soft: #f3fafd;
    --nova-blog-bg-blue: #e7f6fd;

    --nova-blog-border: #d5eaf4;
    --nova-blog-border-strong: #b9dfee;

    --nova-blog-radius: 18px;

    --nova-blog-shadow:
        0 12px 32px rgba(30, 77, 100, 0.08);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    color: var(--nova-blog-text);

    counter-reset: nova-blog-section;

    /*
     * Адаптация зависит от ширины колонки статьи.
     * Это важно на ПК, где справа расположен сайдбар.
     */
    container-name: nova-blog-content;
    container-type: inline-size;
}

.nova-blog-article,
.nova-blog-article *,
.nova-blog-article *::before,
.nova-blog-article *::after {
    box-sizing: border-box;
}


/* Не даём медиафайлам расширять колонку статьи */

.nova-blog-article img,
.nova-blog-article video,
.nova-blog-article iframe {
    max-width: 100%;
}


/* Основной текст */

.nova-blog-article > p,
.nova-blog-article > section > p {
    line-height: 1.72;
}


/* =========================================================
   2. СЕКЦИИ СТАТЬИ
   ========================================================= */

.nova-blog-article > section {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 36px 0;
    padding: 31px 30px 35px;

    background:
        linear-gradient(
            145deg,
            var(--nova-blog-bg) 0%,
            #f9fcfe 100%
        );

    border: 1px solid var(--nova-blog-border);
    border-radius: var(--nova-blog-radius);

    box-shadow: var(--nova-blog-shadow);

    counter-increment: nova-blog-section;
}


/*
 * Чередование фонов помогает визуально разделить
 * длинную статью на самостоятельные смысловые блоки.
 */

.nova-blog-article > section:nth-of-type(even) {
    background:
        linear-gradient(
            145deg,
            rgba(239, 249, 253, 0.82) 0%,
            var(--nova-blog-bg) 76%
        );
}


/* Акцентная линия сверху */

.nova-blog-article > section::before {
    position: absolute;
    top: -1px;
    left: 29px;

    width: 94px;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--nova-blog-accent-dark),
            var(--nova-blog-accent)
        );

    border-radius: 0 0 8px 8px;

    content: "";
}


/* Первый и последний разделы */

.nova-blog-article > section:first-of-type {
    margin-top: 40px;
}

.nova-blog-article > section:last-of-type {
    margin-bottom: 15px;
}


/* Убираем лишний нижний отступ у последнего элемента */

.nova-blog-article > section > p:last-child,
.nova-blog-article > section > ul:last-child,
.nova-blog-article > section > ol:last-child,
.nova-blog-article > section > table:last-child,
.nova-blog-article > section > blockquote:last-child {
    margin-bottom: 0;
}


/* =========================================================
   3. ЗАГОЛОВКИ H2 ВНУТРИ СЕКЦИЙ
   ========================================================= */

.nova-blog-article > section > h2 {
    position: relative;

    margin: -31px -30px 27px;
    padding: 23px 27px 23px 84px;

    color: var(--nova-blog-text);

    font-size: clamp(23px, 2vw, 31px);
    font-weight: 700;
    line-height: 1.25;

    background:
        linear-gradient(
            135deg,
            var(--nova-blog-bg-blue) 0%,
            rgba(248, 252, 254, 0.96) 76%
        );

    border-bottom: 1px solid var(--nova-blog-border);
    border-radius:
        var(--nova-blog-radius)
        var(--nova-blog-radius)
        0 0;
}


/* Номер секции */

.nova-blog-article > section > h2::before {
    position: absolute;
    top: 50%;
    left: 27px;

    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;

    background:
        linear-gradient(
            135deg,
            var(--nova-blog-accent-dark),
            var(--nova-blog-accent)
        );

    border-radius: 13px;

    box-shadow:
        0 7px 18px rgba(22, 141, 204, 0.24);

    content:
        counter(nova-blog-section, decimal-leading-zero);

    transform: translateY(-50%);
}


/* Небольшой декоративный штрих */

.nova-blog-article > section > h2::after {
    position: absolute;
    right: 26px;
    bottom: -1px;

    width: 50px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--nova-blog-accent)
        );

    border-radius: 10px;

    content: "";
}


/* =========================================================
   4. ПОДЗАГОЛОВКИ H3
   ========================================================= */

.nova-blog-article > section > h3 {
    position: relative;

    margin: 31px 0 15px;
    padding-left: 19px;

    color: var(--nova-blog-text);

    font-size: clamp(19px, 1.5vw, 23px);
    font-weight: 700;
    line-height: 1.38;
}


/* Вертикальная линия возле H3 */

.nova-blog-article > section > h3::before {
    position: absolute;
    top: 0.16em;
    bottom: 0.14em;
    left: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            var(--nova-blog-accent),
            var(--nova-blog-accent-dark)
        );

    border-radius: 8px;

    content: "";
}


/* Если H3 идёт сразу после H2 */

.nova-blog-article > section > h2 + h3 {
    margin-top: 4px;
}


/* =========================================================
   5. СПИСКИ
   ========================================================= */

.nova-blog-article > section > ul,
.nova-blog-article > section > ol {
    margin-top: 16px;
    margin-bottom: 25px;
    padding-left: 25px;
}

.nova-blog-article li {
    margin-bottom: 8px;
    line-height: 1.62;
}

.nova-blog-article li:last-child {
    margin-bottom: 0;
}

.nova-blog-article ul li::marker {
    color: var(--nova-blog-accent-dark);
}

.nova-blog-article ol li::marker {
    color: var(--nova-blog-accent-dark);
    font-weight: 700;
}


/* =========================================================
   6. ССЫЛКИ ВНУТРИ СТАТЬИ
   ========================================================= */

/*
 * Стили применяются только к текстовым ссылкам.
 * Ссылки с собственными классами, кнопки и элементы форм
 * не затрагиваются.
 */

.nova-blog-article
    :where(p, li, blockquote, td, th)
    a:not([class]) {

    color: var(--nova-blog-accent-deep);
    font-weight: 700;

    text-decoration: none;

    border-radius: 3px;

    box-shadow:
        inset 0 -0.2em 0 rgba(85, 184, 232, 0.36);

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    transition:
        color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.nova-blog-article
    :where(p, li, blockquote, td, th)
    a:not([class]):hover {

    color: #07577f;

    box-shadow:
        inset 0 -1.12em 0 rgba(85, 184, 232, 0.22);
}

.nova-blog-article
    :where(p, li, blockquote, td, th)
    a:not([class]):focus-visible {

    outline: 3px solid rgba(85, 184, 232, 0.38);
    outline-offset: 3px;
}


/* =========================================================
   7. ЦИТАТЫ
   ========================================================= */

.nova-blog-article blockquote {
    position: relative;

    margin: 30px 0 36px;
    padding: 26px 30px 26px 79px;

    overflow: hidden;

    color: var(--nova-blog-text);

    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.68;

    background:
        linear-gradient(
            135deg,
            #eaf8fe 0%,
            #ffffff 72%
        );

    border: 1px solid var(--nova-blog-border);
    border-left: 0;
    border-radius: var(--nova-blog-radius);

    box-shadow: var(--nova-blog-shadow);
}


/* Большая кавычка */

.nova-blog-article blockquote::before {
    position: absolute;
    top: 16px;
    left: 22px;

    color: var(--nova-blog-accent-dark);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1;

    content: "“";
}


/* Цветная линия слева */

.nova-blog-article blockquote::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 7px;

    background:
        linear-gradient(
            180deg,
            var(--nova-blog-accent),
            var(--nova-blog-accent-dark)
        );

    content: "";
}

.nova-blog-article blockquote p {
    position: relative;
    z-index: 1;

    margin-top: 0;
}

.nova-blog-article blockquote p:last-child {
    margin-bottom: 0;
}

.nova-blog-article blockquote p + p {
    margin-top: 13px;
    padding-top: 13px;

    border-top:
        1px solid rgba(22, 141, 204, 0.16);
}

.nova-blog-article blockquote strong {
    color: var(--nova-blog-accent-deep);
}


/* =========================================================
   8. ТАБЛИЦЫ — ПК
   ========================================================= */

.nova-blog-article table {
    width: 100%;
    max-width: 100%;

    margin: 29px 0 38px;

    color: var(--nova-blog-text);

    font-size: 14px;
    line-height: 1.5;

    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;

    background: var(--nova-blog-bg);

    border: 1px solid var(--nova-blog-border);
    border-radius: var(--nova-blog-radius);

    box-shadow: var(--nova-blog-shadow);
}

.nova-blog-article table caption {
    padding: 0 0 13px;

    color: var(--nova-blog-text);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.nova-blog-article table th,
.nova-blog-article table td {
    padding: 15px 16px;

    text-align: left;
    vertical-align: top;

    border-right: 1px solid var(--nova-blog-border);
    border-bottom: 1px solid var(--nova-blog-border);

    overflow-wrap: anywhere;
    word-break: normal;
}


/* Заголовочная строка */

.nova-blog-article table thead th {
    color: #123f54;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #dff3fd 0%,
            #eff9fe 100%
        );

    border-bottom:
        2px solid var(--nova-blog-border-strong);
}


/*
 * Если в таблице нет thead, но используются th,
 * оформление всё равно сохранится.
 */

.nova-blog-article table th {
    color: #123f54;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #dff3fd 0%,
            #eff9fe 100%
        );
}


/* Чередование строк */

.nova-blog-article table tbody tr:nth-child(even) td {
    background: #f7fbfd;
}


/* Подсветка строки при наведении */

.nova-blog-article table tbody tr td {
    transition: background-color 0.18s ease;
}

.nova-blog-article table tbody tr:hover td {
    background: #edf8fd;
}


/* Первый столбец */

.nova-blog-article table tbody td:first-child {
    color: #294653;
    font-weight: 700;
}


/* Убираем лишние границы */

.nova-blog-article table tr > *:last-child {
    border-right: 0;
}

.nova-blog-article table tbody tr:last-child > td {
    border-bottom: 0;
}


/* Закругление верхних углов */

.nova-blog-article table thead tr:first-child th:first-child {
    border-top-left-radius:
        calc(var(--nova-blog-radius) - 1px);
}

.nova-blog-article table thead tr:first-child th:last-child {
    border-top-right-radius:
        calc(var(--nova-blog-radius) - 1px);
}


/* Закругление нижних углов */

.nova-blog-article table tbody tr:last-child td:first-child {
    border-bottom-left-radius:
        calc(var(--nova-blog-radius) - 1px);
}

.nova-blog-article table tbody tr:last-child td:last-child {
    border-bottom-right-radius:
        calc(var(--nova-blog-radius) - 1px);
}


/* =========================================================
   9. FAQ БЕЗ ДОПОЛНИТЕЛЬНОГО КЛАССА
   ========================================================= */

.nova-blog-article > section[data-nova-faq] {

    padding-bottom: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(235, 248, 254, 0.98) 0%,
            #ffffff 72%
        );

    border-color: rgba(85, 184, 232, 0.42);

    box-shadow:
        0 16px 40px rgba(22, 141, 204, 0.12);
}


/* Убираем обычную верхнюю линию секции */

.nova-blog-article > section[data-nova-faq]::before {

    display: none;
}


/* Заголовок блока FAQ */

.nova-blog-article > section[data-nova-faq]
    > h2 {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--nova-blog-accent-dark) 0%,
            var(--nova-blog-accent) 100%
        );

    border-bottom: 0;
}


/* Вместо порядкового номера показываем FAQ */

.nova-blog-article > section[data-nova-faq]
    > h2::before {

    color: var(--nova-blog-accent-deep);

    font-size: 11px;
    letter-spacing: 0.07em;

    background: #ffffff;

    box-shadow: none;

    content: "FAQ";
}


.nova-blog-article > section[data-nova-faq]
    > h2::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.76)
        );
}


/* Каждый вопрос */

.nova-blog-article > section[data-nova-faq]
    > h3 {

    position: relative;

    margin: 16px 0 0;
    padding: 20px 58px 17px 24px;

    color: var(--nova-blog-text);

    font-size: 19px;
    font-weight: 700;
    line-height: 1.42;

    background: #ffffff;

    border: 1px solid var(--nova-blog-border);
    border-bottom: 0;
    border-radius: 15px 15px 0 0;

    box-shadow:
        0 9px 25px rgba(31, 77, 99, 0.075);
}


/* Цветная полоса слева от вопроса */

.nova-blog-article > section[data-nova-faq]
    > h3::before {

    top: 0;
    bottom: -1px;
    left: 0;

    width: 5px;

    border-radius: 15px 0 0 0;
}


/* Значок вопроса */

.nova-blog-article > section[data-nova-faq]
    > h3::after {

    position: absolute;
    top: 16px;
    right: 17px;

    display: grid;

    width: 32px;
    height: 32px;

    place-items: center;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    background:
        linear-gradient(
            135deg,
            var(--nova-blog-accent-dark),
            var(--nova-blog-accent)
        );

    border-radius: 50%;

    box-shadow:
        0 6px 15px rgba(22, 141, 204, 0.22);

    content: "?";
}


/* Ответ на вопрос */

.nova-blog-article > section[data-nova-faq]
    > h3
    + p {

    margin: 0 0 16px;
    padding: 3px 24px 22px;

    color: var(--nova-blog-muted);
    line-height: 1.72;

    background: #ffffff;

    border: 1px solid var(--nova-blog-border);
    border-top: 0;
    border-radius: 0 0 15px 15px;

    box-shadow:
        0 12px 25px rgba(31, 77, 99, 0.075);
}


/* Последний ответ FAQ */

.nova-blog-article > section[data-nova-faq]
    > h3
    + p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   10. АДАПТАЦИЯ ПОД КОЛОНКУ С САЙДБАРОМ
   ========================================================= */

/*
 * Эти правила срабатывают по ширине самой статьи,
 * а не по ширине всего окна браузера.
 */

@container nova-blog-content (max-width: 860px) {

    /* Секции */

    .nova-blog-article > section {
        margin: 29px 0;
        padding: 27px 24px 31px;
    }

    .nova-blog-article > section > h2 {
        margin: -27px -24px 24px;
        padding: 21px 21px 21px 76px;

        font-size: clamp(22px, 3.2vw, 27px);
    }

    .nova-blog-article > section > h2::before {
        left: 21px;

        width: 40px;
        height: 40px;

        border-radius: 12px;
    }


    /* Таблицы без дополнительных обёрток */

    .nova-blog-article table {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        table-layout: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        scrollbar-width: thin;
        scrollbar-color:
            var(--nova-blog-accent)
            var(--nova-blog-bg-soft);
    }

    .nova-blog-article table::-webkit-scrollbar {
        height: 9px;
    }

    .nova-blog-article table::-webkit-scrollbar-track {
        background: var(--nova-blog-bg-soft);
    }

    .nova-blog-article table::-webkit-scrollbar-thumb {
        background: var(--nova-blog-accent);

        border: 2px solid var(--nova-blog-bg-soft);
        border-radius: 20px;
    }

    /*
     * Минимальная ширина ячеек создаёт прокрутку
     * внутри таблицы, а не у всей страницы.
     */

    .nova-blog-article table th,
    .nova-blog-article table td {
        min-width: 155px;
    }

    .nova-blog-article table th:first-child,
    .nova-blog-article table td:first-child {
        min-width: 145px;
    }
}


/* =========================================================
   11. МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@container nova-blog-content (max-width: 600px) {

    /* Секции */

    .nova-blog-article > section {
        margin: 24px 0;
        padding: 24px 18px 27px;

        border-radius: 15px;
    }

    .nova-blog-article > section::before {
        left: 19px;

        width: 70px;
    }


    /* H2 */

    .nova-blog-article > section > h2 {
        margin: -24px -18px 21px;
        padding: 19px 15px 19px 66px;

        font-size: 22px;
        line-height: 1.28;

        border-radius: 15px 15px 0 0;
    }

    .nova-blog-article > section > h2::before {
        left: 15px;

        width: 38px;
        height: 38px;

        font-size: 12px;

        border-radius: 11px;
    }

    .nova-blog-article > section > h2::after {
        right: 16px;
    }


    /* H3 */

    .nova-blog-article > section > h3 {
        margin-top: 26px;
        padding-left: 16px;

        font-size: 19px;
    }


    /* Цитаты */

    .nova-blog-article blockquote {
        margin: 23px 0 29px;
        padding: 21px 17px 21px 55px;

        font-size: 16px;
        line-height: 1.64;

        border-radius: 15px;
    }

    .nova-blog-article blockquote::before {
        top: 15px;
        left: 16px;

        font-size: 44px;
    }

    .nova-blog-article blockquote::after {
        width: 6px;
    }


    /* Таблицы */

    .nova-blog-article table {
        margin: 23px 0 31px;

        font-size: 13px;

        border-radius: 14px;
    }

    .nova-blog-article table th,
    .nova-blog-article table td {
        min-width: 165px;
        padding: 13px 14px;
    }

    .nova-blog-article table th:first-child,
    .nova-blog-article table td:first-child {
        min-width: 145px;
    }



}

/* =========================================================
   FAQ — МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@container nova-blog-content (max-width: 600px) {

    .nova-blog-article
        > section:has(> h2 + h3 + p + h3) {

        padding-bottom: 22px;
    }


    /* Вопрос */

    .nova-blog-article
        > section:has(> h2 + h3 + p + h3)
        > h3 {

        padding: 17px 51px 15px 18px;

        font-size: 17px;

        border-radius: 13px 13px 0 0;
    }


    .nova-blog-article
        > section:has(> h2 + h3 + p + h3)
        > h3::before {

        border-radius: 13px 0 0 0;
    }


    .nova-blog-article
        > section:has(> h2 + h3 + p + h3)
        > h3::after {

        top: 13px;
        right: 13px;

        width: 29px;
        height: 29px;

        font-size: 16px;
    }


    /* Ответ */

    .nova-blog-article
        > section:has(> h2 + h3 + p + h3)
        > h3
        + p {

        padding: 2px 18px 18px;

        font-size: 15px;

        border-radius: 0 0 13px 13px;
    }
}

/* =========================================================
   12. РЕЗЕРВ ДЛЯ БРАУЗЕРОВ БЕЗ CONTAINER QUERIES
   ========================================================= */

@media (max-width: 767px) {

    @supports not (container-type: inline-size) {

        .nova-blog-article > section {
            margin: 24px 0;
            padding: 24px 18px 27px;

            border-radius: 15px;
        }

        .nova-blog-article > section > h2 {
            margin: -24px -18px 21px;
            padding: 19px 15px 19px 66px;

            font-size: 22px;

            border-radius: 15px 15px 0 0;
        }

        .nova-blog-article > section > h2::before {
            left: 15px;

            width: 38px;
            height: 38px;
        }

        .nova-blog-article table {
            display: block;

            width: 100%;
            max-width: 100%;

            overflow-x: auto;
            overflow-y: hidden;

            table-layout: auto;

            -webkit-overflow-scrolling: touch;
        }

        .nova-blog-article table th,
        .nova-blog-article table td {
            min-width: 165px;
        }
    }
}


/* =========================================================
   13. ДОСТУПНОСТЬ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nova-blog-article a,
    .nova-blog-article table tbody tr td {
        transition: none;
    }
}