/* ===== СТАТЬЯ: тело материала ===== */

.blog-article {
    max-width: 760px;
    margin: 0 auto;
}

.blog-article-cover {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 32px;
    border: 1px solid var(--card-border);
}

.blog-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-laser);
}

.blog-article h1 {
    text-align: left;
    font-size: clamp(28px, 4vw, 42px);
    margin-bottom: 24px;
}

.blog-article-body {
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1.8;
}

.blog-article-body p {
    margin-bottom: 20px;
}

.blog-article-body h2 {
    font-size: 24px;
    color: var(--text-light);
    margin: 36px 0 16px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 20px 24px;
}

.blog-article-body li {
    margin-bottom: 8px;
}

.blog-article-cta {
    margin-top: 40px;
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: rgba(0, 229, 255, 0.04);
    text-align: center;
}

.blog-article-cta p {
    margin-bottom: 16px;
    color: var(--text-light);
    font-size: 16px;
}

.blog-article-body h3 {
    font-size: 19px;
    color: var(--text-light);
    margin: 28px 0 12px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

/* Только ссылки внутри текста. Кнопка в блоке с призывом лежит не в
   абзаце и не в списке, поэтому сюда не попадает — иначе она получала бы
   цвет текста ссылки поверх своей заливки и надпись на ней пропадала. */
.blog-article-body p a,
.blog-article-body li a {
    color: var(--accent-laser);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.35);
}

.blog-article-body p a:hover,
.blog-article-body li a:hover {
    border-bottom-color: var(--accent-laser);
}

/* ===== СТАТЬЯ: блок «Читайте также» ===== */

/* Селектор с .blog-article-body — чтобы перебить общее правило для
   списков статьи: оно сдвигает список на 24 px вправо под маркеры,
   и карточки «Читайте также» переставали совпадать по ширине с блоком
   призыва над ними. */
.blog-article-body .blog-related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.blog-article-body .blog-related li {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: rgba(42, 46, 56, 0.2);
}

.blog-article-body .blog-related a {
    display: block;
    margin-bottom: 6px;
    font-family: 'Exo 2', sans-serif;
    font-size: 17px;
    color: var(--text-light);
    border-bottom: none;
}

.blog-article-body .blog-related li:hover {
    border-color: var(--accent-laser);
}

.blog-article-body .blog-related li:hover a {
    color: var(--accent-laser);
}

.blog-article-body .blog-related span {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}