/* Adaptat după design real (`D:\Evia assets\homepage\homepage Crăciunul începe aici\`,
   desktop+tabletă+mobil). Reutilizează chrome-ul generic din `item-slider.css` (cap,
   săgeți, fade) + `.product-item` din `product-slider.css` (lățime/border cardurilor)
   + PromoBanner (variant on-dark) pentru „Găsește cadoul perfect...".

   Structură pe 2 blocuri (cerută explicit): `.category-picture` (imaginea/bannerul,
   STATIC, nu derulează) + `.category-products` (carusel — e chiar rail-ul generic
   `.item-slider-rail`, cu DOAR ProductCard-uri; săgețile din cap controlează acest rail).

   Desktop (lg+): picture + products unul lângă altul (`flex-lg-row`), picture în stânga,
   lat cât 2 carduri+1 gap, înălțime aliniată cu rândul de produse prin `align-items:stretch`
   implicit (`height:100%` + `object-fit:cover` SCOPATE doar aici — comportamentul implicit
   al PromoBanner, folosit în altă parte pe Homepage, NU se schimbă).
   Tabletă/Mobil: stivuite (`flex-column-reverse` — produsele, al doilea element din DOM,
   apar SUS; imaginea, primul element din DOM, apare JOS, full-width, aspect natural). */
.category-picture {
    width: calc(2 * ((100% - 4rem) / 5) + 1rem);
}

.category-products {
    flex: 1 1 0%;
    min-width: 0;
}

@media (min-width: 992px) {
    .category-picture .promo-banner {
        height: 100%;
    }

    .category-picture .promo-banner__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 991.98px) {
    .category-picture {
        width: 100%;
    }
}