/* --- Стили для блога --- */

/* Hero Section для статьи */
.blog-hero {
    height: 50vh; /* Меньше, чем на главной */
    background-attachment: scroll; /* Отключаем параллакс для статей */
}

.blog-hero .hero-background::before { /* Затемнение */
    background: linear-gradient(to bottom, rgba(10, 61, 98, 0.99), rgba(10, 61, 98, 0.6));
}

.blog-hero h1 {
    font-size: 3.2rem; /* Крупный заголовок */
}

.blog-hero .post-meta {
    font-size: 0.95rem;
    color: #D1D5DB;
}

.blog-hero .post-meta i {
    color: #1DD1A1; /* Акцентный цвет */
}

/* Основное содержание статьи */
.blog-article-content {
    background-color: #fff;
}

.blog-post {
    font-family: 'Open Sans', sans-serif; /* Шрифт для основного текста */
    color: #333;
    line-height: 1.8;
}

.blog-post h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    color: #0A3D62; /* Основной синий */
    margin-top: 40px;
    margin-bottom: 25px;
}

.blog-post h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    color: #0A3D62;
    margin-top: 30px;
    margin-bottom: 20px;
}

.blog-post h4 { /* На случай, если пользователь захочет использовать h4 */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    color: #0A3D62;
    margin-top: 25px;
    margin-bottom: 15px;
}

.blog-post p {
    margin-bottom: 25px;
    font-size: 1.05rem;
    color: #333;
}

.blog-post ul {
    list-style: disc; /* Точки для списков */
    padding-left: 30px;
    margin-bottom: 25px;
}

.blog-post ul li {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #333;
}

.blog-post ul li strong {
    color: #0A3D62; /* Цвет для выделения */
}

.blog-post a {
    color: #1DD1A1; /* Акцентный цвет для ссылок */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-post a:hover {
    color: #0A3D62;
}

/* Sidebar */
.blog-sidebar {
    border-left: 1px solid #e0e0e0; /* Разделитель */
    padding-left: 40px;
}

.sidebar-widget {
    margin-bottom: 50px;
}

.sidebar-widget .widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    color: #0A3D62;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1DD1A1; /* Акцентная линия */
    display: inline-block; /* Чтобы линия растягивалась по тексту */
}

.popular-posts-list, .categories-list {
    list-style: none;
    padding: 0;
}

.popular-posts-list li, .categories-list li {
    margin-bottom: 12px;
}

.popular-posts-list a, .categories-list a {
    font-size: 1.05rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease, margin-left 0.3s ease;
}

.popular-posts-list a:hover, .categories-list a:hover {
    color: #1DD1A1;
    margin-left: 5px; /* Легкое смещение */
}

.call-to-action-widget {
    background-color: #0A3D62; /* Основной синий фон */
    color: #fff;
    padding: 35px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(10, 61, 98, 0.2);
}

.call-to-action-widget .widget-title {
    color: #fff;
    border-bottom-color: #1DD1A1;
}

.call-to-action-widget p {
    font-size: 1rem;
    color: #D1D5DB;
    margin-bottom: 30px;
}

.call-to-action-widget .btn-primary {
    background-color: #1DD1A1;
    border-color: #1DD1A1;
    color: #0A3D62; /* Темный текст на яркой кнопке */
}

.call-to-action-widget .btn-primary:hover {
    background-color: #fff;
    border-color: #fff;
    color: #0A3D62;
}

/* Медиа-запросы для блога */
@media (max-width: 992px) {
    .blog-hero { height: 45vh; }
    .blog-hero h1 { font-size: 2.8rem; }
    .blog-sidebar {
        border-left: none;
        padding-left: 0;
        margin-top: 40px;
        border-top: 1px solid #e0e0e0;
        padding-top: 30px;
    }
    .call-to-action-widget { margin-top: 30px; }
}

@media (max-width: 768px) {
    .blog-hero { height: 40vh; }
    .blog-hero h1 { font-size: 2.4rem; }
    .blog-post h2 { font-size: 2rem; }
    .blog-post h3 { font-size: 1.6rem; }
    .sidebar-widget .widget-title { font-size: 1.2rem; }
    .call-to-action-widget p { font-size: 0.95rem; }
}

@media (max-width: 576px) {
    .blog-hero h1 { font-size: 2rem; }
    .blog-post p, .blog-post li { font-size: 1rem; }
    .blog-post h2 { font-size: 1.8rem; }
    .blog-post h3 { font-size: 1.4rem; }
    .sidebar-widget .widget-title { font-size: 1.1rem; }
}