/* ======== WRAPPER ======== */
.fashion-lookbook-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ======== SESSION BLOCKS ======== */
.fashion-session {
  margin-bottom: 80px;
}

.fashion-session-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ======== SLIDER CONTAINER ======== */
.fashion-gallery-slider {
  position: relative;
  width: 100%;
  height: 650px;        /* ⭐ Desktop height */
  overflow: hidden;
  background: transparent;     /* dark background for letterboxing */
}

/* Wrapper keeps slides aligned vertically */
.fashion-gallery-slider .swiper-wrapper {
  align-items: center;
}

/* ======== EACH SLIDE ======== */
.fashion-gallery-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease;
  height: 100%;          /* fill the 650px container */
}

/* ======== IMAGE SIZING (NO CROPPING) ======== */
/* IMPORTANT: override Swiper's default width:100% on images */
.fashion-gallery-slider .swiper-slide img {
  max-height: 650px;           /* ≤ 650px on desktop */
  max-width: 100%;            /* don’t overflow horizontally */
  width: auto !important;     /* 🔥 key: no forced full-width */
  height: auto !important;    /* keep natural aspect ratio */
  /* object-fit: contain;  <-- optional, not required with auto/auto */
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

/* ======== COVERFLOW / "3 COLUMN" LOOK ON DESKTOP ======== */
@media (min-width: 1024px) {
  /* With slidesPerView:'auto', this width controls center slide width.
     ~90% center, with ~5% peeks left/right visually. */
  .fashion-gallery-slider .swiper-slide {
    width: 90%;
    opacity: 0.3;
    transform: scale(0.9);
  }

  .fashion-gallery-slider .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
  }

  .fashion-gallery-slider .swiper-slide-next,
  .fashion-gallery-slider .swiper-slide-prev {
    opacity: 0.6;
    transform: scale(0.95);
    z-index: 1;
  }
}

/* ======== NAVIGATION ARROWS ======== */
.fashion-gallery-slider .swiper-button-next,
.fashion-gallery-slider .swiper-button-prev {
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.fashion-gallery-slider .swiper-button-next::after,
.fashion-gallery-slider .swiper-button-prev::after {
  font-size: 18px;
}

/* ======== PAGINATION BULLETS ======== */
.fashion-gallery-slider .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.4;
}

.fashion-gallery-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ======== TABLET ======== */
@media (max-width: 1024px) {
  .fashion-gallery-slider {
    height: 450px;
  }
}

/* ======== SMALL TABLET / LARGE MOBILE ======== */
@media (max-width: 768px) {
  .fashion-gallery-slider {
    height: 380px;
  }

  .fashion-session-title {
    font-size: 1.6rem;
  }
}

/* ======== MOBILE ======== */
@media (max-width: 480px) {
  .fashion-gallery-slider {
    height: 320px;
  }
}