/* Service Image Fix - Show Full Images Without Cropping (Service cards only) */

/* 1) Make the service thumbnail frame a fixed height, centered content */
.service_default .service_img .lazy-container {
  height: 200px !important;              /* unified thumbnail height on desktop */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f8f9fa !important;  /* subtle backdrop for letterboxing */
  overflow: hidden !important;           /* no overflow out of the frame */
}

/* 2) Ensure the lazy image fills the frame but preserves the whole image */
.service_default .service_img .lazy-container img,
.service_column .service_img .lazy-container img {
  position: static !important;           /* override absolute from base CSS */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;               /* cancel base min-constraints */
  min-height: 0 !important;
  object-fit: contain !important;        /* show entire image without cropping */
  background-color: transparent !important;
}

/* 3) Neutralize ratio padding for these thumbnails so the fixed height applies */
.service_default .service_img .lazy-container.ratio::before {
  content: none !important;
  padding-bottom: 0 !important;
}

/* 4) Slight visual frame */
.service_default .service_img .lazy-container {
  border: 1px solid #e9ecef;             /* subtle border */
  border-radius: 4px;
}

/* 5) Responsive: shorter height on small screens */
@media (max-width: 768px) {
  .service_default .service_img .lazy-container {
    height: 160px !important;
  }
}