/* بنرهای تبلیغاتی میانی صفحه اول — A 4:3 | B/C 2.5:1 | D 5:1 (مستقل از SM Slider) */

.homepage-promo-banners {
    padding-block: 1rem;
}

.homepage-promo-banners__grid {
    display: grid;
    gap: 8px;
    width: 100%;
}

.homepage-promo-banners__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
    text-decoration: none;
    /* جایگاه خالی تا لود تصویر — جلوگیری از حس «باگ چیدمان» */
    background-color: #e5e7eb;
}

.homepage-promo-banners__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: middle;
    background-color: transparent;
}

/* قالب A — گرید ۴ / موبایل ۲×۲ — نسبت 4:3 */
.promo-banners--grid4 .homepage-promo-banners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-banners--grid4 .homepage-promo-banners__item {
    aspect-ratio: 4 / 3;
}

.promo-banners--grid4 .homepage-promo-banners__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* قالب B — جفت نیمه‌عریض؛ موبایل: تمام‌عرض */
.promo-banners--pair .homepage-promo-banners__grid {
    grid-template-columns: 1fr;
}

.promo-banners--pair .homepage-promo-banners__item,
.promo-banners--mid .homepage-promo-banners__item {
    aspect-ratio: 5 / 2; /* 2.5:1 — قالب B و C */
}

.promo-banners--pair .homepage-promo-banners__img,
.promo-banners--mid .homepage-promo-banners__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-banners--mid .homepage-promo-banners__grid,
.promo-banners--strip .homepage-promo-banners__grid {
    grid-template-columns: 1fr;
}

/* قالب C — Mid تمام‌عرض (همان نسبت 2.5:1 مثل B؛ برچسب جدا) */

/* قالب D — نوار باریک؛ نصف ارتفاع Mid (820×164 ≈ 5:1) */
.promo-banners--strip .homepage-promo-banners__item {
    aspect-ratio: 5 / 1;
}

.promo-banners--strip .homepage-promo-banners__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .homepage-promo-banners {
        padding-block: 1.25rem;
    }

    .homepage-promo-banners__grid {
        gap: 16px;
    }

    .promo-banners--grid4 .homepage-promo-banners__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .promo-banners--pair .homepage-promo-banners__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}