/* Event Country image fit fix: stop stretched event/card images */

/*
  Rule:
  - cover = no stretching, fills the card nicely, may crop edges slightly
  - contain = shows full image but leaves empty spaces
  For a modern booking website card, cover is the correct professional choice.
*/

.ecx-event-grid img,
.ecx-destination-grid img,
.ecx-category-grid img,
.ecx-card img,
.ecx-event-card img,
.ecx-card-event img,
.ecx-experience-card img,
.ecx-tour-card img,
.ecx-event-media img,
.ecx-event-image img,
.ecx-card-media img,
.ecx-card-image img,
.ecx-tour-image img,
.ecx-experience-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
}

/* Fix cards that use background-image instead of <img> */
.ecx-event-grid [style*="background-image"],
.ecx-destination-grid [style*="background-image"],
.ecx-card[style*="background-image"],
.ecx-event-card[style*="background-image"],
.ecx-card-event[style*="background-image"],
.ecx-experience-card[style*="background-image"],
.ecx-tour-card[style*="background-image"],
.ecx-event-media[style*="background-image"],
.ecx-event-image[style*="background-image"],
.ecx-card-media[style*="background-image"],
.ecx-card-image[style*="background-image"],
.ecx-tour-image[style*="background-image"],
.ecx-experience-image[style*="background-image"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Keep every image area consistent and prevent distortion from odd image sizes */
.ecx-event-media,
.ecx-event-image,
.ecx-card-media,
.ecx-card-image,
.ecx-tour-image,
.ecx-experience-image,
.ecx-event-grid [class*="media"],
.ecx-event-grid [class*="image"] {
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* If any card has a direct image as the first child, treat it like a clean cover image */
.ecx-event-grid > article > img:first-child,
.ecx-event-grid > a > img:first-child,
.ecx-event-grid > div:not(.ecx-loader) > img:first-child {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Do not stretch store/download logos or small icons */
.ecx-download-logo img,
.ecx-store-row img,
.ecx-social-header img,
.ecx-brand img,
.ecx-feature-icon img,
img[src*="AppStore"],
img[src*="app-store"],
img[src*="GooglePlay"],
img[src*="google-play"],
img[src*="logo.png"],
img[src*="icons8"] {
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Better focus for portrait images: slightly top-center usually looks nicer for people/tour photos */
.ecx-event-grid img,
.ecx-event-grid [style*="background-image"] {
  object-position: center center !important;
  background-position: center center !important;
}