/* ===== Стили для категории статей (ArticleCategory) =====
   Карточки вложенных статей, выводимые тегом [articles] через
   _article_block.html. Переиспользует .product-card (паддинги,
   название, ховеры) из category_detail.css, но раскладка и
   квадратное фото статьи — здесь. */

:root {
    /* Отступ блока фото статей сверху/снизу (снизу чуть больше) */
    --article-grid-gap-top: 1rem;
    --article-grid-gap-bottom: 1.5rem;

    /* Боковой паддинг full-bleed-обёртки — меньше на мобильном,
       больше на 600px+ (см. секцию FULL-BLEED ниже) */
    --article-grid-side-padding: 16px;
}

@media (min-width: 600px) {
    :root {
        --article-grid-side-padding: 20px;
    }
}

/* ===== КАРТОЧКА СТАТЬИ =====
   Фото статьи квадратное (350×350), а не 2:3, как у товара —
   переопределяем только aspect-ratio, товар не трогаем. */
.article-card .product-card__image {
    aspect-ratio: 1 / 1;
}

/* ===== СЕТКА КАРТОЧЕК СТАТЕЙ =====
   Элемент несёт классы "category-page__grid article-block__grid".
   .category-page__grid даёт display:grid на всю ширину — для статей
   это превращает 2-3 фото в гигантские плитки, поэтому переопределяем
   на flex с фиксированным размером карточки (карточки не тянутся,
   просто их помещается в ряд сколько влезло). Специфичность та же,
   что у .category-page__grid — category_artical.css должен идти
   ПОСЛЕ category_detail.css в <link>. */
.article-block__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: var(--article-grid-gap-top) 0 var(--article-grid-gap-bottom) 0;
}

.article-block__grid {
    --mobile-cols: 3; /* дефолт, если inline-стиль из шаблона не пришёл */
}

/* Ширина карточки — не в px, а формулой (100% минус gap'ы) / колонки.
   На мобильном число колонок берётся из --mobile-cols (задаётся
   inline-стилем в _article_block.html по факту total карточек в блоке).
   box-sizing: border-box обязателен — без него паддинг .article-card
   ломает расчёт calc(), карточки не помещаются в ряд. */
.article-block__grid .article-card {
    box-sizing: border-box;
    flex-basis: calc((100% - (var(--mobile-cols) - 1) * 12px) / var(--mobile-cols));
    max-width: min(350px, calc((100% - (var(--mobile-cols) - 1) * 12px) / var(--mobile-cols)));
}

/* На 600px+ — фиксированные 25% (до 4 колонок), не зависит от total */
@media (min-width: 600px) {
    .article-block__grid {
        gap: 15px;
    }

    .article-block__grid .article-card {
        flex-basis: calc(25% - 12px);
        max-width: min(350px, calc(25% - 12px));
    }
}

/* ===== FULL-BLEED ВНУТРИ УЗКОЙ КОЛОНКИ СТАТЬИ =====
   100vw + отрицательный margin-left растягивает блок на весь экран
   независимо от узкой 68ch-колонки-родителя (тот же приём, что у
   .product-block__grid в article.css). Специфичность (2 класса) выше,
   чем у общего ".article-content > *" — побеждает независимо от
   порядка подключения файлов.

   ВАЖНО: в article.css есть медиа-запрос на 640px с такой же
   специфичностью — .article-block__grid там обязательно исключён
   через :not(), иначе блок съезжает влево (см. комментарий в article.css). */
.article-content > .article-block__grid {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--article-grid-side-padding);
    box-sizing: border-box;
}