/* ==========================================
   FORCE OBJECT-FIT SUR TOUTES LES IMAGES
   Solution ultra-robuste pour toutes cards
========================================== */

/* ==========================================
   HOMEPAGE - Activity Cards
========================================== */

/* Container avec aspect-ratio forcé */
.activityCard .cardImage.ratio {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Ratio 1:1 */
    overflow: hidden;
}

.activityCard .cardImage.ratio img,
.activityCard .cardImage.ratio .card-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ==========================================
   ACTIVITY LIST - Cards horizontales
   ⚠️ OVERRIDE: Hauteur fixe au lieu de padding-bottom
========================================== */

/* GÉNÉRAL: Padding-bottom pour ratio */
#activitiesGrid .cardImage {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Ratio 1:1 */
    overflow: hidden;
}

#activitiesGrid .cardImage img,
#activitiesGrid .cardImage .card-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* OVERRIDE SPÉCIFIQUE: Cards avec .w-250 utilisent hauteur fixe */
#activitiesGrid .cardImage.w-250 {
    padding-bottom: 0 !important; /* Annule padding-bottom */
    width: 250px !important;
    height: 250px !important; /* Hauteur FIXE */
    position: relative !important;
    overflow: hidden !important;
}

#activitiesGrid .cardImage.w-250 img,
#activitiesGrid .cardImage.w-250 .card-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ==========================================
   ACTIVITY MAP - Cards horizontales
========================================== */

.activityGrid .cardImage.w-250 {
    position: relative;
    width: 250px;
    height: 250px !important;
    overflow: hidden;
}

.activityGrid .cardImage.w-250 img,
.activityGrid .cardImage.w-250 .card-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ==========================================
   TOP DESTINATIONS - City Cards
========================================== */

.citiesCard .citiesCard__image.ratio {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Ratio 1:1 */
    overflow: hidden;
}

.citiesCard .citiesCard__image img,
.citiesCard .citiesCard__image .card-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ==========================================
   RESPONSIVE - Mobile
========================================== */

@media (max-width: 768px) {
    /* Activity List mobile - Cards sans .w-250 */
    #activitiesGrid .cardImage:not(.w-250) {
        width: 100%;
        padding-bottom: 75%; /* Ratio 4:3 sur mobile */
    }

    /* Activity List mobile - Cards avec .w-250 */
    #activitiesGrid .cardImage.w-250 {
        padding-bottom: 0 !important; /* Annule padding */
        width: 100% !important;
        height: 250px !important; /* Garde hauteur fixe */
    }

    /* Activity Map mobile */
    .activityGrid .cardImage.w-250 {
        width: 100%;
        height: 250px !important;
    }
}

/* ==========================================
   FALLBACK UNIVERSEL
   Pour TOUTE image dans les cards
========================================== */

/* Cible toutes images dans cardImage */
.cardImage img,
.cardImage .card-media,
.activityCard img,
.activityCard .card-media {
    object-fit: cover !important;
    object-position: center !important;
}

/* Fallback par chemin */
img[src*="restaurant"],
img[src*="activity"],
img[src*="lists"],
img[src*=".jpg"],
img[src*=".png"],
img[src*=".jpeg"] {
    object-fit: cover !important;
    object-position: center !important;
}