/* ========================================
   IMAGE ROTATOR — SWIPER
   ========================================
   Replaces Slick carousel + image-rotator-fix.css.
   Three layout modes:

   1. Homepage (.swiper-home inside .container)
      Constrained to Bootstrap .container width —
      aligns with the navbar logo/links.
      Single slide, auto-height.

   2. Project Detail (.swiper-detail inside .rotator-detail)
      Full-bleed, fixed aspect ratio (49% of viewport width).
      slidesPerView: 'auto' — portrait images get narrower slides,
      landscape images fill the viewport. 5px gap between slides.
      Centered, with prev/next visible.

   3. Expertise (.swiper-expertise)
      Constrained to .container, single slide, dots + arrows.

   CDN references needed in your master page / layout:
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
*/


/* ========================================
   SHARED DEFAULTS
   ======================================== */

.swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* All images block-level, no extra line-height gaps */
.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}


/* ========================================
   1. HOMEPAGE / DEFAULT (container-constrained)
   ======================================== */

/* The swiper lives inside Bootstrap .container, so its width
   matches the navbar logo/links at every breakpoint.
   No full-bleed — images stop at the container edges. */

.swiper-home .swiper-slide {
    text-align: center;
}

.swiper-home .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ========================================
   2. PROJECT DETAIL (full-bleed, multi-peek)
   ======================================== */

.rotator-detail {
    width: 100%;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swiper-detail {
    overflow: visible; /* allow adjacent slides to peek */
}

/* Fixed height based on viewport width — matches old 0.49 ratio */
.swiper-detail .swiper-wrapper {
    align-items: center;
}

.swiper-detail .swiper-slide {
    /* Default: let Swiper's slidesPerView:'auto' use the image width */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Auto-width slides: width determined by image aspect ratio at fixed height */
.swiper-detail .swiper-slide--auto {
    width: auto;
}

.swiper-detail .swiper-slide--auto img {
    width: auto;
    height: 49vw;       /* matches old fixedHeight = containerWidth * 0.49 */
    max-height: 580px;  /* reasonable cap for very large screens */
    object-fit: cover;
    display: block;
}

/* Cap overall container height to match */
.rotator-detail,
.swiper-detail {
    max-height: 580px;
}

/* Navigation arrows — position over the slides */
.swiper-detail .swiper-button-prev,
.swiper-detail .swiper-button-next {
    color: #fff;
    z-index: 10;
}

/* On mobile, collapse to single slide behavior */
@media (max-width: 767px) {
    .swiper-detail .swiper-slide--auto img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .swiper-detail .swiper-slide--auto {
        width: 100% !important;
    }

    .rotator-detail,
    .swiper-detail {
        max-height: none;
    }
}


/* ========================================
   3. EXPERTISE CAROUSEL
   ======================================== */

.swiper-expertise .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ========================================
   NAVIGATION ARROWS — SHARED STYLING
   ======================================== */

/* Match your existing arrow style — adjust color/size as needed */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    transition: opacity 0.2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 0.7;
}

/* ========================================
   VIDEO SLIDES
   ======================================== */

.swiper-slide .rotVideo {
    max-height: 580px;
    max-width: 1200px;
}