/* =========================================================
   ACF Photo Gallery used on Italian brands
need to add more descriptive css class 
rename file, add italian in front of it
========================================================= */

/* Wrapper */
.swiper-gallery-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

/* Desktop: keep images from getting too tall.
   NOTE: This assumes you still want to limit height based on header + space.
*/
@media screen and (min-width: 1025px) {
  .swiper-gallery-wrapper .my-custom-swiper img {
    max-height: calc(100vh - var(--header-height) - 300px);
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Main Swiper container */
.swiper-container.my-custom-swiper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Slides */
.swiper-container.my-custom-swiper .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Images */
.swiper-container.my-custom-swiper .swiper-slide img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Lightbox zoom tweak (kept as-is)
   NOTE: This selector is very specific to Elementor lightbox behavior.
*/
@media screen and (min-width: 768px) {
  .swiper-slide.elementor-lightbox-item.swiper-slide-active.swiper-slide-zoomed img {
    transform: translate3d(0px, 0px, 0px) scale(1.4) !important;
  }
}

/* Fallback: if Swiper is not initialized yet, show only the first slide.
   This prevents multiple images from stacking.
*/
.swiper-gallery-wrapper
  .swiper-container.my-custom-swiper:not(.swiper-initialized)
  .swiper-wrapper
  .swiper-slide:not(:first-child) {
  display: none;
}

/* Aspect ratio control (kept, but you might want to remove this)
   This forces a square slide.
   If your images should keep natural aspect ratio, comment this out.
*/
.swiper-gallery-wrapper
  .swiper-container.my-custom-swiper
  .swiper-slide {
  aspect-ratio: 1/1;
}