/* Сетка баннеров выбранной категории. Модалка баннера — в banner-modal.css. */

/* Сетка баннеров. Макеты: mobile 5197:58724 (390) — 2 колонки, карточка 179.6, зазор 10.3, радиус 20;
   tablet 5192:51478 (834) — 3 колонки, 224, зазор 21.4, радиус 21;
   desktop 5192:51473 (2560) — 7 колонок, 305, зазор 36, радиус 16.
   Ширина/боковые отступы как у .divider-wrapper (--divider-wrapper-px из divider.css).
   Брейкпоинты те же, что в divider.css: 0 / 600 / 1280. */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(var(--banner-cols), minmax(0, 1fr));
    gap: var(--banner-gap);
    width: 100%;
    max-width: calc(var(--content-max-width) + 2 * var(--divider-wrapper-px));
    margin: 0 auto;
    padding: 0 var(--banner-grid-px, var(--divider-wrapper-px));
}

.banner-grid[hidden] {
    display: none;
}

/* Загрузка: при смене фильтров прежний список приглушается, пока идёт запрос */
.banner-grid {
    transition: opacity 0.15s ease;
}

.banner-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Скелетон первой загрузки: серые квадраты той же формы, что и карточки */
.banner-card--skeleton {
    aspect-ratio: 1 / 1;
    background: #d8d7cf;
    pointer-events: none;
    animation: banner-skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes banner-skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-card--skeleton {
        animation: none;
    }
}

/* Ошибка загрузки: текст (.banner-grid__empty) и кнопка «Повторить» (.show-more) на всю ширину сетки */
.banner-grid__error,
.banner-grid__actions {
    grid-column: 1 / -1;
}

/* пустая выдача с кнопкой «Сбросить фильтры»: текст ближе к кнопке */
.banner-grid__actions .banner-grid__empty {
    padding-bottom: clamp(16px, 3vw, 32px);
}

.banner-grid__empty {
    grid-column: 1 / -1;
    color: #6b6b66;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 600;
    text-align: center;
    padding: clamp(40px, 8vw, 96px) 0;
}

/* Карточка — просто картинка со скруглением; заголовок остаётся в alt картинки */
.banner-card {
    display: block;
    padding: 0;
    border: none;
    border-radius: var(--banner-radius);
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s ease;
}

.banner-card:hover {
    transform: translateY(-2px);
}

.banner-card__image {
    display: block;
    width: 100%;
    height: auto; /* перебивает атрибут height="1080" у <img>, иначе он ломает aspect-ratio и карточка вытягивается */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--banner-radius);
    background: #111;
}

.banner-card__title {
    display: none;
}

@media (min-width: 0px) {
    :root {
        --banner-cols: 2;
        --banner-gap: clamp(6px, 2.63vw, 20px);
        --banner-radius: clamp(12px, 5.13vw, 30px);
    }

    .banner-grid {
        --banner-grid-px: 12px;
    }
}

@media (min-width: 600px) {
    :root {
        --banner-cols: 3;
        --banner-gap: clamp(12px, 2.57vw, 30px);
        --banner-radius: clamp(14px, 2.52vw, 30px);
    }

    .banner-grid {
        --banner-grid-px: var(--divider-wrapper-px);
    }
}

@media (min-width: 1280px) {
    :root {
        --banner-cols: 7;
        --banner-gap: clamp(16px, 1.41vw, 36px);
        --banner-radius: clamp(12px, 0.63vw, 16px);
    }
}