/* ==========================================
   Italcapsule - HOME PAGE CSS
   Ngarkohet vetëm në faqen kryesore (is_front_page)
   "Sistemet Kompatibel" Grid
   Mban ikonën + emërtimin krah për krah edhe në mobile
   (Elementor i vendos njëri mbi tjetrin nën 768px)
   ========================================== */
/* Desktop: rreshtat e krijuar nga JS janë transparentë (grid-i origjinal nuk ndryshon) */
@media (min-width: 768px) {
    .elementor-element-1fded52 > .ic-sys-row {
        display: contents !important;
    }
}

@media (max-width: 767px) {
    /* Grid-i: 2 rreshta që rrëshqasin horizontalisht (carousel me swipe)
       Fallback kur JS nuk ka ekzekutuar (kartat ndajnë gjerësinë e kolonës) */
    .elementor-element-1fded52 {
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, auto) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: max-content !important;
        justify-content: start !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        scroll-padding: 6px; /* snap-i të mos fshehë padding-un e hijes në të majtë */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: -6px !important; /* kompenzon padding-in e hijes, mbetet pozicioni vizual */
    }
    .elementor-element-1fded52::-webkit-scrollbar {
        display: none;
    }
    /* Fallback pa JS: padding që box-shadow të mos pritet në skajet */
    .elementor-element-1fded52:not(:has(> .ic-sys-row)) {
        padding: 6px !important;
    }
    /* Me JS: 2 rreshta të vërtetë - secili e paketon kartat e veta në linjë */
    .elementor-element-1fded52:has(> .ic-sys-row) {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .elementor-element-1fded52 > .ic-sys-row {
        display: flex !important;
        gap: 10px !important;
        width: max-content !important;
        padding: 6px 6px !important; /* hapësirë për box-shadow-in e kartave */
    }
    /* Çdo kartë aq e gjerë sa imazhi + teksti (hiq span 2 të Elementor) */
    .elementor-element-1fded52 .elementor-widget-image-box {
        grid-column: auto !important;
        flex-shrink: 0 !important;
        width: max-content !important;
        scroll-snap-align: start;
    }
    .elementor-element-1fded52 .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        /* Lartësi fikse: karta nuk përshtatet më sipas lartësisë së imazhit -
           të gjitha kartat në të dy rreshtat mbeten të njëjta (gjerësia mbetet
           max-content, përshtatet sipas tekstit) */
        height: 30px !important;
    }
    .elementor-element-1fded52 .elementor-widget-image-box .elementor-image-box-img {
        /* flex: 0 0 30px e fiks DY dimensional: nuk zmadhohet, nuk tkurret -
           kutia e ikonës rezervon gjithmonë 30x30 pavarësisht sa e vogël
           është figura brenda saj */
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-inline: 0 !important;
    }
    /* Link-u brenda kutisë së ikonës mbush të njëjtën hapësirë -
       pa këtë <a> inline tkurret sa figura dhe e zvogëlon vizualisht bllokun */
    .elementor-element-1fded52 .elementor-widget-image-box .elementor-image-box-img a {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        line-height: 0 !important;
    }
    /* Kufizimi vendoset te <img>, jo te div-i container -
       kështu çdo ikonë mbushe të njëjtën kuti 30x30 pa u deformuar */
    .elementor-element-1fded52 .elementor-widget-image-box .elementor-image-box-img img {
        width: 30px !important;
        height: 30px !important;
        object-fit: contain !important;
        display: block !important;
    }
    .elementor-element-1fded52 .elementor-widget-image-box .elementor-image-box-content {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .elementor-element-1fded52 .elementor-widget-image-box .elementor-image-box-title {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        /* Gjithmonë 1 rresht: 2 rreshta (~36px) tejkalon lartësinë fikse 30px
           dhe e bën kartën më të madhe se të tjerat (p.sh. "Bustina ESE 44") */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}