/* 
 * Simple Aspect Ratio Utilities
 * Provides consistent aspect ratio control for card images
 */

/* Base aspect ratio container */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f8f9fa;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

/* Modern browsers - using aspect-ratio property */
.aspect-ratio-4-3 {
  aspect-ratio: 4/3;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 4/3) {
  .aspect-ratio-4-3::before {
    content: "";
    display: block;
    padding-top: 75%; /* 3/4 = 0.75 = 75% */
  }
  
  .aspect-ratio-4-3 > img,
  .aspect-ratio-4-3 > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Image content styling */
.aspect-ratio-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Simple placeholder for missing images */
.aspect-ratio-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Simple placeholder icon */
.aspect-ratio-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.7;
}

/* Override fixed height classes when using aspect ratio */
.listing-item .aspect-ratio-4-3 img.h-176,
.listing-item .aspect-ratio-4-3 div.h-176 {
  height: 100% !important;
}