/**
 * Image Aspect Ratio Fix
 * Fixes incorrect aspect ratio display for images with cover-image class
 * Ensures images maintain their natural aspect ratio while filling containers
 */

/* Fix for cover-image class when used on img tags - Remove problematic styles */
img.cover-image {
  /* Remove min-height that causes distortion */
  min-height: unset !important;
  /* Ensure proper object-fit */
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: 100%;
}

/* Fix for item-card7-imgs container to maintain 16:9 aspect ratio */
.item-card7-imgs {
  position: relative;
  overflow: hidden;
  z-index: 0;
  /* Use padding-top trick for aspect ratio (16:9 = 56.25%) */
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

/* Position images absolutely within the aspect-ratio container */
.item-card7-imgs img.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Specific fix for common aspect ratios using CSS aspect-ratio property */
img.cover-image[width="400"][height="225"] {
  aspect-ratio: 400 / 225; /* 16:9 ratio = 1.777... */
  width: 100%;
  height: auto;
}

img.cover-image[width="400"][height="200"] {
  aspect-ratio: 400 / 200; /* 2:1 ratio */
  width: 100%;
  height: auto;
}

/* For images without explicit dimensions, use object-fit to maintain natural aspect ratio */
img.cover-image:not([width]):not([height]) {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Override the problematic width: 100% from style.css for images in cards */
.item-card7-img img.cover-image,
.item-card8-img img.cover-image,
.item-card9-img img.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ensure images in item-card7-imgs maintain aspect ratio */
.item-card7-img .item-card7-imgs {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.item-card7-img .item-card7-imgs > img.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* For responsive images, maintain aspect ratio */
@media (max-width: 768px) {
  .item-card7-imgs {
    padding-top: 56.25%; /* Maintain 16:9 on mobile */
  }
  
  img.cover-image {
    object-fit: cover;
    object-position: center;
  }
}

/* Fix for other cover-image usages outside of cards */
.cover-image:not(.bg-background):not(.bg-background2):not(.bg-background3) {
  min-height: unset !important;
}