/* =========================================================
   SEO blog/articles: intro, toc, notes, CTA, FAQ
   ========================================================= */

/* Описание раздела блога под H1 */
.blog-intro {
    margin: 0 0 32px;
    padding: 24px 28px;
    background: #EDF3F5;
    border-radius: 8px;
    color: #5B6F77;
    font-size: 18px;
    line-height: 1.6;
}

.blog-intro p {
    margin: 0;
}

/* Оглавление статьи */
.article-toc {
    margin: 28px 0 36px;
    padding: 22px 24px;
    background: #EDF3F5;
    border-radius: 8px;
    border: 1px solid rgba(0, 60, 85, .08);
}

.article-toc__title {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: #003C55;
}

.article-toc ol,
.article-toc ul {
    margin: 0;
    padding-left: 22px;
}

.article-toc li {
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.45;
    color: #5B6F77;
}

.article-toc a {
    color: #003C55;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 60, 85, .25);
}

.article-toc a:hover {
    color: #E84E1B;
    border-bottom-color: #E84E1B;
    text-decoration: none;
}

/* Убираем пунктирное подчеркивание ссылок в оглавлении статьи */
.typo .article-toc a,
.typo .article-toc a:not(.btn),
.article-toc a,
.article-toc a:not(.btn) {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 60, 85, .25);
}

.typo .article-toc a:hover,
.typo .article-toc a:not(.btn):hover,
.article-toc a:hover,
.article-toc a:not(.btn):hover {
    text-decoration: none;
    border-bottom-color: #E84E1B;
}

/* Выделенный информационный блок внутри статьи */
.article-note {
    margin: 28px 0;
    padding: 22px 24px;
    background: #f9fafb;
    border-left: 4px solid #E84E1B;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.6;
    color: #354251;
}

.article-note p {
    margin: 0 0 14px;
}

.article-note p:last-child {
    margin-bottom: 0;
}

/* Финальный CTA-блок в статьях */
.article-cta {
    margin: 36px 0;
    padding: 28px 32px;
    background: #003C55;
    border-radius: 8px;
    color: #ffffff;
}

.article-cta__title {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: #ffffff;
}

.article-cta__text {
    max-width: 900px;
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
}

.article-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.article-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    background: #C34D0A;
    border: 1px solid #C34D0A;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none;
}

.article-cta__button:hover {
    background: #E84E1B;
    border-color: #E84E1B;
    color: #ffffff;
    text-decoration: none;
}

.article-cta__button_secondary {
    background: transparent;
    border-color: rgba(255,255,255,.55);
}

.article-cta__button_secondary:hover {
    background: rgba(255,255,255,.08);
    border-color: #ffffff;
    color: #ffffff;
}

/* FAQ в статьях */
.article-faq {
    margin: 36px 0;
}

.article-faq h3 {
    margin: 24px 0 10px;
    color: #003C55;
}

/* Плавный переход по якорям */
html {
    scroll-behavior: smooth;
}

/* Отступ при переходе по якорю, чтобы заголовок не прятался под шапкой */
h2[id],
h3[id] {
    scroll-margin-top: 120px;
}

/* Таблицы в статьях.
   Если уже используются .table-container и .custom-table,
   этот блок просто усиливает отображение внутри статей. */
.table-container {
    width: 100%;
    overflow-x: auto;
}

table.custom-table {
    width: 100%;
    margin: 24px 0 34px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.45;
}

table.custom-table th {
    font-weight: 600;
    background-color: #354251;
    color: #ffffff;
    text-align: left;
    padding: 10px;
}

table.custom-table td {
    padding: 10px;
    border: 1px solid rgba(0,0,0,.12);
    vertical-align: top;
}

/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 767px) {
    .blog-intro {
        margin: 0 0 24px;
        padding: 20px;
        font-size: 16px;
        line-height: 1.55;
    }

    .article-toc {
        margin: 22px 0 30px;
        padding: 18px;
    }

    .article-toc__title {
        font-size: 19px;
    }

    .article-toc li {
        font-size: 15px;
        margin: 7px 0;
    }

    .article-note {
        padding: 18px;
        font-size: 16px;
    }

    .article-cta {
        margin: 30px 0;
        padding: 22px 18px;
    }

    .article-cta__title {
        font-size: 20px;
    }

    .article-cta__text {
        font-size: 16px;
    }

    .article-cta__buttons {
        flex-direction: column;
    }

    .article-cta__button {
        width: 100%;
    }

    table.custom-table {
        font-size: 15px;
        white-space: nowrap;
    }
}