/* ==========================================================================
   news-list.css — стили карточек списка новостей/блога/компетенций
   (hcode_page template, компонент bitrix:news.list)

   Подключается из bitrix/templates/hcode_page/header.php.
   Хранится отдельно от /html/css/ (H-Code stock) чтобы обновления темы
   не затирали правки.

   В H-Code stock стилей для .bx-newslist-container нет — карточки рендерятся
   прозрачными блоками на фоне секции. Здесь добавляем визуальное разделение:
   рамка + фон + тень, которые работают в обеих темах.
   В тёмной теме цвета перекрашиваются через dark-theme.css (каскад ниже).
   ========================================================================== */

/* Контейнер карточки — рамка, фон, тень, скругление.
   background-color и border-color БЕЗ !important — в тёмной теме
   dark-theme.css перекрашивает их через каскад (см. секцию 13b). */
.bx-newslist-container {
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Внутренний отступ сверху/снизу 22px, слева/справа 22px — даёт
       воздух между контентом и рамкой карточки. */
    padding: 22px;
    margin: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Row-обёртка карточек: на десктопе используем Flexbox с явным расчётом
   ширины через calc и margin-right для воздуха между карточками.
   Это надёжнее CSS Grid, потому что в Grid первая ячейка может быть
   занята псевдоэлементом .row::before из Bootstrap, что смещает карточки. */
@media (min-width: 992px) {
    .bx-newslist > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ширина = (100% − 2 gap × 10px) / 3 = 33.33% − 6.67px.
       margin-right: 10px у всех, кроме каждой 3-й — даёт горизонтальный gap 10px.
       float: none !important — без этого Bootstrap float: left ломает flex. */
    .bx-newslist > .row > .bx-newslist-container {
        width: calc((100% - 20px) / 3) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 10px !important;
        margin-bottom: 30px !important;
        float: none !important;
        flex: none !important;
    }
    .bx-newslist > .row > .bx-newslist-container:nth-child(3n) {
        margin-right: 0 !important;
    }
}

/* На мобильных/планшетах (<992px) — стандартный Bootstrap col-sm-6 / col-xs-12,
   gap для воздуха. */
@media (max-width: 991px) {
    .bx-newslist > .row {
        gap: 20px 10px;
    }
}

.bx-newslist-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

/* Внутренний блок flex уже задан в dark-theme.css, здесь дополняем отступы. */
.bx-newslist-block {
    padding: 0;
}

/* Заголовок карточки — единый стиль ссылок в обеих темах. */
.bx-newslist-title {
    margin: 0 0 12px;
    padding: 0;
    font-family: 'Oswald', 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.bx-newslist-title a {
    color: #222;
    text-decoration: none;
}

.bx-newslist-title a:hover {
    color: #fed136;
}

/* Изображение карточки — отступ от заголовка.
   Фиксированная высота + object-fit: cover даёт единый размер
   картинок в ленте (с обрезкой по бокам/сверху-снизу), без искажения.
   !important — потому что dark-theme.css содержит общее правило
   .bx-newslist-img img { height: auto } (без data-theme-обёртки),
   которое подключено ПОЗЖЕ и перебивает наш height: 100%. */
.bx-newslist-img {
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 3px;
    height: 200px !important;
}

.bx-newslist-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Краткий текст (PREVIEW_TEXT) — единая читаемая типографика.
   margin-top: 18px — отступ сверху от заголовка/картинки. */
.bx-newslist-content {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 18px;
}

.bx-newslist-content p {
    margin: 0 0 10px;
}

/* Дата / счётчик / автор — мелкий серый текст. */
.bx-newslist-date,
.bx-newslist-view,
.bx-newslist-author,
.bx-newslist-tags {
    color: #888;
    font-size: 12px;
    margin-top: 6px;
}