/* ===============================
   Easy Swiper Module - Custom Styles (fixed for .field-photos--swiper)
   =============================== */

/* Default: Desktop gallery visible, Swiper hidden */
.swiper.field-photos--swiper {
  display: none;
}

/* ===============================
   Small viewport styles (works on mobile AND desktop)
   =============================== */
@media (max-width: 768px) {
  .page-node-type-item .image-gallery-wrapper-web {
    display: none !important; /* hide desktop gallery on small viewports */
  }
  .page-node-type-item .gallery-details-container {
    display: block !important;
  }

  .field-photos--swiper,
  .field-photos--swiper.swiper {
    display: block !important;
    width: 100%;
    margin: 0 auto 20px;
    background-color: whitesmoke;
    padding: 40px 10px 10px 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* Hide slide edges */
  }

  /* Let Swiper handle wrapper styles - minimal override */
  .field-photos--swiper .swiper-wrapper {
    min-height: 250px !important;
    align-items: center !important; /* Center images vertically */
    overflow: visible; /* Allow spacing to work */
  }

  /* Slide styling with proper spacing */
  .field-photos--swiper .swiper-slide {
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important; /* Center content vertically */
    justify-content: center !important; /* Center content horizontally */
    background-color: transparent !important;
    box-sizing: border-box !important;
    padding: 0 10px; /* Add horizontal padding for spacing */
  }

  .field-photos--swiper .swiper-slide img {
    max-width: 100% !important;
    max-height: 400px !important;
    height: auto !important;
    width: auto !important; /* Let image maintain aspect ratio */
    object-fit: contain !important;
    display: block !important;
  }

  /* Navigation buttons - simplified */
  .field-photos--swiper .swiper-button-prev,
  .field-photos--swiper .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 50% !important;
    color: #fff !important;
    z-index: 20 !important;
    cursor: pointer !important;
  }

  .field-photos--swiper .swiper-button-prev {
    left: 15px !important;
  }

  .field-photos--swiper .swiper-button-next {
    right: 15px !important;
  }

  .field-photos--swiper .swiper-button-prev::after,
  .field-photos--swiper .swiper-button-next::after {
    font-size: 18px !important;
    color: #fff !important;
  }


.field-photos--swiper .swiper-button-next, 
.field-photos--swiper .swiper-button-prev {
  & svg {
    height: 50%;
    width: 50%;
  }
}


  /* Pagination - simplified */
  .field-photos--swiper .swiper-pagination {
    position: static !important;
    margin-top: 15px !important;
    text-align: center !important;
  }

  .field-photos--swiper .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    margin: 0 5px !important;
  }

  .field-photos--swiper .swiper-pagination-bullet-active {
    background: #007cba !important;
  }
}