/* Предполагаем, что body и .container уже стилизованы */

.articles-list-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* Светло-серый фон секции, как на скриншоте */
}

.section-title-articles { /* Изменили селектор для заголовка */
    font-size: 2.4em;
    font-weight: bold;
    color: #212529;
    text-align: left;
    margin-top: 0;
    margin-bottom: 40px;
}

.simple-articles-grid { /* Новый класс для сетки */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.simple-article-card { /* Новый класс для карточки */
    background-color: #fff; /* Белый фон карточки */
    border-radius: 8px;
    /* padding: 25px; Убрали общий padding, будем добавлять в .simple-article-card-link */
    display: flex; /* Чтобы ссылка .simple-article-card-link заняла всю высоту */
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* Легкая тень для карточек */
}
.simple-article-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.simple-article-card-link { /* Новый класс для ссылки */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 25px; /* Добавили padding сюда */
}

.simple-article-card-date { /* Новый класс */
    display: block;
    font-size: 0.8em;
    color: #6c757d;
    margin-bottom: 10px; /* Немного увеличили отступ */
}

.simple-article-card-title { /* Новый класс */
    font-size: 1.2em; /* Чуть крупнее заголовок, т.к. нет картинки */
    font-weight: bold;
    color: #212529;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Ограничение до 3х строк для заголовка */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.2em * 1.45 * 3); /* Минимальная высота для 3х строк заголовка */
}

.simple-article-card-excerpt { /* Новый класс */
    font-size: 0.9em;
    color: #495057;
    line-height: 1.6; /* Немного увеличили межстрочный интервал */
    margin-bottom: 20px; /* Увеличили отступ до кнопки */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Ограничение до 4х строк для описания */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-height: calc(0.9em * 1.6 * 4); /* Минимальная высота для 4х строк описания */
}

.simple-article-card-details { /* Новый класс */
    font-size: 0.9em;
    color: #f0a078;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid #f0a078;
    padding: 7px 15px; /* Чуть больше padding */
    border-radius: 20px;
    align-self: flex-start;
    margin-top: auto;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.simple-article-card:hover .simple-article-card-details { /* Новый класс */
    background-color: #f0a078;
    color: #fff;
}

.load-more-simple-articles-wrapper { /* Новый класс */
    text-align: center;
}

/* Кнопка "Загрузить еще" остается такой же, как в предыдущих блоках */
/* .btn-load-more { ... } */


/* Адаптивность (аналогично предыдущим блокам статей/новостей) */
@media (max-width: 992px) {
    .simple-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .section-title-articles {
        font-size: 2em;
    }
}

@media (max-width: 600px) {
    .simple-articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .section-title-articles {
        font-size: 1.8em;
        text-align: center;
    }
}