/* Device-specific image fit rules with maximum specificity */
/* Mobile portrait - ensure mobile image fit classes work */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-contain {
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-cover {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-fill {
    height: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-none {
    height: 100% !important;
    max-height: none !important;
    object-fit: none !important;
  }
}

/* Mobile landscape - force desktop image for better quality and apply landscape settings */
@media screen and (max-width: 768px) and (orientation: landscape), 
       screen and (max-height: 500px) and (orientation: landscape) {
  .crs-slider-wrapper .crs-slide .crs-mobile-image {
    display: none !important;
  }
  
  .crs-slider-wrapper .crs-slide .crs-desktop-image {
    display: block !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-contain {
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-cover {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-fill {
    height: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-none {
    height: 100% !important;
    max-height: none !important;
    object-fit: none !important;
  }
}

/* Tablet portrait - ensure mobile image fit classes work */
@media screen and (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-contain {
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-cover {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-fill {
    height: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-mobile-image.crs-image-fit-none {
    height: 100% !important;
    max-height: none !important;
    object-fit: none !important;
  }
}

/* Tablet landscape - ensure desktop image fit classes work */
@media screen and (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-contain {
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-cover {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-fill {
    height: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-none {
    height: 100% !important;
    max-height: none !important;
    object-fit: none !important;
  }
}

/* Desktop - ensure desktop image fit classes work */
@media screen and (min-width: 1367px) {
  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-contain {
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-cover {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-fill {
    height: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
  }

  .crs-slider-wrapper .crs-slide img.crs-desktop-image.crs-image-fit-none {
    height: 100% !important;
    max-height: none !important;
    object-fit: none !important;
  }
}