/* =============================================================================
   Sweeper — Carousel Plugin Styles  v2.0.0
   Depends on: swiper-bundle.min.css (loaded automatically)

   Design rules:
     · Active (centre) slide  → full size  (controlled by .sweeper-main height)
     · Inactive slides        → scale(0.6) of active size
     · Scale is applied to .sweeper-slide-inner so it never conflicts with
       Swiper's own transforms on .swiper-slide
   ============================================================================= */

/* =============================================================================
   CSS custom properties (override these in your theme for easy branding)
   ============================================================================= */

.sweeper-wrapper {
    --sweeper-active-h:   500px;   /* height of the active (full-size) slide     */
    --sweeper-scale:       0.6;    /* scale factor for inactive slides            */
    --sweeper-speed:       600ms;  /* inner-scale transition speed                */
    --sweeper-radius:      10px;   /* border-radius of slide images               */
    --sweeper-accent:    #0073aa;  /* thumb border / pagination active colour     */
    --sweeper-thumb-w:     auto;   /* overridden by inline style when thumb_size set */

    position: relative;
    width: 100%;
}

/* =============================================================================
   Main swiper container
   ============================================================================= */

.sweeper-main {
    width: 100%;
    /* Vertical padding creates breathing room for the 3-D depth and scale effect */
    padding: 60px 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* =============================================================================
   Slide containers (.swiper-slide)
   Swiper controls the horizontal layout; we control height here.
   ============================================================================= */

.sweeper-main .swiper-slide {
    height: var(--sweeper-active-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Coverflow + cards: give each slide an explicit width so Swiper's auto-width
   calculation has a reference point and side slides can peek in.             */
.sweeper-wrapper.effect-coverflow .sweeper-main .swiper-slide,
.sweeper-wrapper.effect-cards     .sweeper-main .swiper-slide {
    width: 70%;
    max-width: 520px;
}

/* =============================================================================
   Slide inner — THIS is where the scale animation lives.
   Keeping it on a child element means it never fights Swiper's own transforms.
   ============================================================================= */

.sweeper-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--sweeper-radius);
    will-change: transform;

    /* Inactive state: scaled down */
    /*transform: scale(var(--sweeper-scale));
    transition: transform var(--sweeper-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow var(--sweeper-speed) ease;*/
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Active centre slide: full size */
.sweeper-main .swiper-slide-active .sweeper-slide-inner {
    transform: scale(1);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
}

/* =============================================================================
   Slide image
   ============================================================================= */

.sweeper-slide-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* clicks handled on the slide, not the img */
}

/* =============================================================================
   Cursor — all slides are clickable by default
   ============================================================================= */

.sweeper-slide {
    cursor: pointer;
}

/* =============================================================================
   Caption
   ============================================================================= */

.sweeper-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px 14px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Show caption on the active slide and on hover */
.swiper-slide-active .sweeper-caption,
.sweeper-slide:hover  .sweeper-caption {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   Effect-specific overrides
   ============================================================================= */

/* Coverflow needs extra vertical space for the 3-D rotation */
.sweeper-wrapper.effect-coverflow .sweeper-main {
    padding: 80px 0;
}

/* Cube / flip: take up the full slide height, no scale effect needed
   (the 3-D rotation is the whole point) */
.sweeper-wrapper.effect-cube .sweeper-slide-inner,
.sweeper-wrapper.effect-flip .sweeper-slide-inner {
    transform: none;
    box-shadow: none;
}

.sweeper-wrapper.effect-cube .swiper-slide-active .sweeper-slide-inner,
.sweeper-wrapper.effect-flip .swiper-slide-active .sweeper-slide-inner {
    transform: none;
    box-shadow: none;
}

/* =============================================================================
   Navigation arrows
   ============================================================================= */

.sweeper-main .swiper-button-prev,
.sweeper-main .swiper-button-next {
    color: #003a6c;
    /* Subtle drop-shadow so arrows stay visible on light images */
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
    transition: opacity 0.2s;
    border-radius: 50%;
    background-color: #fff;
    padding: 12px;
}

.sweeper-main .swiper-button-prev i,
.sweeper-main .swiper-button-next i {
    font-size: 28px;
}

.sweeper-main .swiper-button-prev:hover,
.sweeper-main .swiper-button-next:hover {
    opacity: 0.8;
}

/* =============================================================================
   Pagination (bullets / fraction / progress bar)
   ============================================================================= */

.sweeper-main .swiper-pagination {
    bottom: 12px;
}

.sweeper-main .swiper-pagination-bullet-active {
    background: var(--sweeper-accent);
}

.sweeper-main .swiper-pagination-progressbar-fill {
    background: var(--sweeper-accent);
}

/* =============================================================================
   Thumbnail pagination
   ============================================================================= */

/* Outer centres the strip when slides don't fill the full container width */
.sweeper-thumbs-outer {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    overflow: hidden;
}

/* Thumb swiper container.
   Height can be overridden by inline style (thumb_size attribute).
   JS shrinks the width to the actual slides width for flex-centering.       */
.sweeper-thumbs {
    height: 80px;
    padding: 0 2px;
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 1;
}

.sweeper-thumbs .swiper-wrapper {
    align-items: center;
}

.sweeper-thumbs .swiper-slide {
    /* Width: CSS var set by thumb_size attribute; falls back to auto (image ratio) */
    width: var(--sweeper-thumb-w, auto);
    height: 100%;
    opacity: 0.45;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.sweeper-thumbs .swiper-slide img {
    display: block;
    height: 100%;
    width: var(--sweeper-thumb-w, auto);
    object-fit: cover;
    pointer-events: none;
}

.sweeper-thumbs .swiper-slide:hover {
    opacity: 0.72;
}

/* Active thumbnail */
.sweeper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--sweeper-accent);
}

/* =============================================================================
   Lightbox
   ============================================================================= */

.sweeper-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.sweeper-lightbox.is-open {
    display: flex;
    animation: sweeperFadeIn 0.22s ease;
}

@keyframes sweeperFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sweeper-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

.sweeper-lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 92vh;
}

.sweeper-lightbox-img-wrap {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.8);
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sweeper-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
}

.sweeper-lightbox-close {
    position: absolute;
    top: -48px;
    right: -4px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.75;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sweeper-lightbox-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .sweeper-wrapper {
        --sweeper-active-h: 340px;
    }

    .sweeper-wrapper.effect-coverflow .sweeper-main {
        padding: 50px 0;
    }

    .sweeper-main {
        padding: 40px 0;
    }

    /* On mobile, slides take more of the container width */
    .sweeper-wrapper.effect-coverflow .sweeper-main .swiper-slide,
    .sweeper-wrapper.effect-cards     .sweeper-main .swiper-slide {
        width: 85%;
        max-width: 100%;
    }

    /* Thumb strip height when not overridden by inline style */
    .sweeper-thumbs:not([style*="height"]) {
        height: 58px;
    }

    .sweeper-lightbox-close {
        top: -40px;
        font-size: 2.25rem;
    }

    .sweeper-lightbox-img {
        max-width: 96vw;
        max-height: 80vh;
    }
}

@media (max-width: 480px) {
    .sweeper-wrapper {
        --sweeper-active-h: 240px;
    }

    .sweeper-thumbs:not([style*="height"]) {
        height: 46px;
    }

    .sweeper-wrapper.effect-coverflow .sweeper-main {
        padding: 32px 0;
    }
}