/* ==========================================
   FIX: CARDS GAP - Espacement horizontal entre cards
   Ajoute des gaps horizontaux sur toutes les grids
========================================== */

/* Special Offers Grid */
#specialOffersGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px; /* vertical horizontal */
}

#specialOffersGrid > .col-lg-4,
#specialOffersGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Recommended Restaurants Grid */
#recommendedRestaurantsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

#recommendedRestaurantsGrid > .col-lg-4,
#recommendedRestaurantsGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Check These Spots Grid */
#checkSpotsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

#checkSpotsGrid > .col-lg-4,
#checkSpotsGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Most Popular Grid */
#mostPopularGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

#mostPopularGrid > .col-lg-4,
#mostPopularGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Similar Experiences Grid (activity-single.html) */
#similarExperiencesGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

#similarExperiencesGrid > .col-lg-4,
#similarExperiencesGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* City Items Grid (city.html) */
#cityItemsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

#cityItemsGrid > .col-lg-4,
#cityItemsGrid > .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Top Destinations Grid - KEEP ORIGINAL (no changes) */

/* Responsive */
@media (max-width: 768px) {
    #specialOffersGrid,
    #recommendedRestaurantsGrid,
    #checkSpotsGrid,
    #mostPopularGrid,
    #similarExperiencesGrid,
    #cityItemsGrid {
        gap: 20px 15px;
    }
}

@media (max-width: 576px) {
    #specialOffersGrid,
    #recommendedRestaurantsGrid,
    #checkSpotsGrid,
    #mostPopularGrid,
    #similarExperiencesGrid,
    #cityItemsGrid {
        gap: 20px 10px;
    }
}