/**
 * Capabilities Page Slider Styles
 * Ensures consistent display for all images regardless of original aspect ratio
 */

/* Target sliders with the capabilities_slider class */
.capabilities_slider,
.capabilities_slider .gem-gallery,
.capabilities_slider .portfolio-slider,
.capabilities_slider .slick-slider,
.capabilities_slider .swiper-container {
  width: 100%;
  max-width: 100%;
}

/* Option 1: Object-fit approach (recommended) - maintains aspect ratio within fixed containers */
.capabilities_slider .gem-gallery-item img,
.capabilities_slider .portfolio-item img,
.capabilities_slider .slick-slide img,
.capabilities_slider .swiper-slide img,
.capabilities_slider .wp-spaios-slider-img,
.capabilities_slider .owl-item img,
.capabilities_slider img {
  width: 100% !important;
  height: 400px !important; /* Fixed height for consistency */
  object-fit: cover !important; /* Crops to fill container while maintaining aspect ratio */
  object-position: center bottom !important; /* Focus on bottom part of construction site images */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Hover effect for visual feedback */
.capabilities_slider .gem-gallery-item:hover img,
.capabilities_slider .portfolio-item:hover img,
.capabilities_slider .slick-slide:hover img,
.capabilities_slider .swiper-slide:hover img,
.capabilities_slider .wp-spaios-slider-img:hover,
.capabilities_slider .owl-item:hover img {
  transform: scale(1.05);
}

/* Container styling for consistent spacing */
.capabilities_slider .gem-gallery-item,
.capabilities_slider .portfolio-item,
.capabilities_slider .slick-slide,
.capabilities_slider .swiper-slide {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: var(--csd-space-md, 1rem);
}

/* Option 2: Background-image approach (alternative) - uncomment to use */
/*
.capabilities_slider .slide-bg-approach {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  position: relative;
}
*/

/* Thumbnail consistency for navigation */
.capabilities_slider .gem-gallery-thumbnail img,
.capabilities_slider .slick-dots img,
.capabilities_slider .swiper-pagination img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center bottom; /* Also focus thumbnails on bottom portion */
  border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .capabilities_slider .gem-gallery-item img,
  .capabilities_slider .portfolio-item img,
  .capabilities_slider .slick-slide img,
  .capabilities_slider .swiper-slide img,
  .capabilities_slider .wp-spaios-slider-img,
  .capabilities_slider .owl-item img,
  .capabilities_slider img {
    height: 350px !important;
  }
}

@media (max-width: 768px) {
  .capabilities_slider .gem-gallery-item img,
  .capabilities_slider .portfolio-item img,
  .capabilities_slider .slick-slide img,
  .capabilities_slider .swiper-slide img,
  .capabilities_slider .wp-spaios-slider-img,
  .capabilities_slider .owl-item img,
  .capabilities_slider img {
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .capabilities_slider .gem-gallery-item img,
  .capabilities_slider .portfolio-item img,
  .capabilities_slider .slick-slide img,
  .capabilities_slider .swiper-slide img,
  .capabilities_slider .wp-spaios-slider-img,
  .capabilities_slider .owl-item img,
  .capabilities_slider img {
    height: 250px !important;
  }
}

/* Lightbox/Modal consistency when images are clicked */
.capabilities_slider + .mfp-bg,
.capabilities_slider ~ .mfp-wrap .mfp-img,
.gem-lightbox-wrap .mfp-img {
  /* Original aspect ratios preserved in lightbox */
  max-height: 90vh;
  max-width: 90vw;
}

/* Grid layout option for multiple images */
.capabilities_slider.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--csd-space-md, 1rem);
}

.capabilities_slider.grid-layout img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center bottom; /* Focus on bottom for grid layout too */
}

/* Ensure slider navigation controls are visible */
.capabilities_slider .slick-prev,
.capabilities_slider .slick-next,
.capabilities_slider .swiper-button-prev,
.capabilities_slider .swiper-button-next {
  z-index: 10;
  background-color: rgba(26, 26, 26, 0.8);
  color: var(--csd-yellow, var(--csd-yellow));
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capabilities_slider .slick-prev:hover,
.capabilities_slider .slick-next:hover,
.capabilities_slider .swiper-button-prev:hover,
.capabilities_slider .swiper-button-next:hover {
  background-color: var(--csd-grey, var(--csd-grey));
}

/* Loading state for images */
.capabilities_slider img[loading="lazy"] {
  background-color: var(--csd-bg-secondary, #f8f8f8);
}

/* Accessibility - focus states */
.capabilities_slider a:focus img,
.capabilities_slider button:focus img {
  outline: 3px solid var(--csd-yellow, var(--csd-yellow));
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .capabilities_slider img {
    height: auto;
    max-height: 300px;
  }
}