:root{
    --gap: 20;
    --transition-ms: 500;

    /* Scaling */
    --center-scale: 1.45;
    --side-scale: 0.40;

    /* Stable unified real height */
    --slide-height: 500px;

    /* Push side slides outward */
    --side-offset: 60px;

    --arrow-size: 40px;
    --arrow-offset: -60px;
    --fade-percent: 10%;
}

/* Basic layout */
.wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0px;
    box-sizing:border-box;
}

.carousel{
    position:relative;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:0 !important;
}

#carousel,
#carousel:focus,
#carousel:focus-visible {
    outline:none !important;
    box-shadow:none !important;
}

.viewport{
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

.track{
    display:flex;
    align-items:center;
    transition: transform calc(var(--transition-ms) * 1ms) cubic-bezier(.22,.9,.35,1);
    will-change: transform;
    background:transparent;
}

/* All slides share same real height (no layout jumping) */
.slide{
    flex:0 0 auto;
    box-sizing:border-box;
    overflow:visible;
    height:var(--slide-height);
    transition:
        transform calc(var(--transition-ms) * 1ms) cubic-bezier(.22,.9,.35,1),
        height 0ms linear;
    background:transparent;
}

.img-wrap{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.no-height-transition .slide{
    transition: none !important;
}

/* Slide images */
.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    pointer-events:auto;
    user-select:none;
    transition: opacity 160ms ease,
                transform calc(var(--transition-ms) * 1ms) cubic-bezier(.22,.9,.35,1);
    cursor: pointer;
    border-radius: 15px !important;
}

/* Gradient edges */
.slide.pos-left img,
.slide.pos-left {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) var(--fade-percent), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) var(--fade-percent), rgba(0,0,0,0) 100%);
}

.slide.pos-right img,
.slide.pos-right {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) var(--fade-percent), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) var(--fade-percent), rgba(0,0,0,0) 100%);
}

/* Active center slide */
.slide.active img {
    object-fit: contain;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

/* Opposite alignment on side slides */
.slide.pos-left img {
    object-fit: cover;
    object-position:right center;
}
.slide.pos-right img {
    object-fit: cover;
    object-position:left center;
}

.slide:not(.active):not(.pos-left):not(.pos-right) img {
    object-fit: cover;
    object-position: center center;
}

/* Desktop arrows */
.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:var(--arrow-size);
    height:var(--arrow-size);
    display:inline-grid;
    place-items:center;
    cursor:pointer;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 50%;
    z-index:10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.arrow-left{ left: calc(-1 * (var(--arrow-size) + var(--arrow-offset))); }
.arrow-right{ right: calc(-1 * (var(--arrow-size) + var(--arrow-offset))); }

.arrow svg{
    width:18px;
    height:18px;
    stroke:#111;
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Indicators */
.indicators{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:16px;
}

.indicator{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d0d0d0;
    cursor:pointer;
    border:0;
    transition: background 160ms ease, transform 160ms ease;
}

.indicator.active{
    background:#111;
    transform:scale(1.3);
}

/* Hide mobile UI on desktop */
#mobileNav,
#mobilePrev,
#mobileNext,
#mobileIndicators {
    display: none !important;
}

/* ---------- DESKTOP MODE ---------- */
@media (min-width:521px){

    .slide.active {
        transform: scale(var(--center-scale)) !important;
        z-index: 20 !important;
    }

    .slide.pos-left {
        transform:
            translateX(calc(-1 * var(--side-offset)))
            scale(var(--side-scale))
            !important;
    }

    .slide.pos-right {
        transform:
            translateX(var(--side-offset))
            scale(var(--side-scale))
            !important;
    }

    .slide:not(.active):not(.pos-left):not(.pos-right) {
        transform: scale(var(--side-scale));
    }

    .carousel {
        display: flex;
        align-items: center;
    }

    .desktop-caption {
        text-align:center;
        margin-top:12px;
        font-size:20px;
        color:#303030;
        display: block;
    }

}

/* ---------- MOBILE MODE ---------- */
@media (max-width:520px){

    .indicators{ margin-top:12px; }

    .slide {
        transition: opacity 350ms ease, transform 350ms ease;
    }

    .slide.mobile-exit-left { opacity:0; transform:translateX(40px); }
    .slide.mobile-exit-right{ opacity:0; transform:translateX(-40px); }
    .slide.mobile-enter     { opacity:0; transform:translateX(40px); }
    .slide.mobile-enter-active{ opacity:1; transform:translateX(0); }

    .slide:not(.active){
        display:none;
        height:0 !important;
        margin:0 !important;
        padding:0 !important;
        visibility:hidden;
    }

    .slide.active{
        display:block;
        height:auto;
        visibility:visible;
        width:100% !important;
        object-fit: contain;
    }

    .slide.active img{
        width:100%;
        height:auto;
        max-height:calc(100vh - 120px);
        object-fit:contain;
    }

    .arrow{ display:none !important; }

    .slide.pos-left img,
    .slide.pos-left,
    .slide.pos-right img,
    .slide.pos-right {
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

    #indicators { display:none !important; }

    #mobileNav,
    #mobilePrev,
    #mobileNext { display:grid !important; }
    #mobileIndicators { display:flex !important; }

    .mobile-nav {
        width: 100%;
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        margin: 0 0 15px 0;
    }

    .mobile-arrow{
        width:40px;
        height:40px;
        border-radius:50%;
        background:rgba(255,255,255,0.95);
        border:1px solid rgba(0,0,0,0.06);
        display:grid;
        place-items:center;
        cursor:pointer;
        box-shadow:0 2px 6px rgba(0,0,0,0.06);
    }

    .mobile-arrow svg{
        width:18px;
        height:18px;
        stroke:#111;
        stroke-width:2;
        fill:none;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .desktop-caption {
        display: none;
    }

    #mobileIndicators.indicators{ margin-top:0 !important; }
}

/* Mobile caption */
.mobile-caption{
    margin-top:12px;
    font-size:20px;
    line-height:1.4;
    color:#303030;
    text-align:center;
    display:none;
    max-width:900px;
}

@media (max-width:520px){
    .mobile-caption{ display:block; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.75);
    z-index:13000;
    padding:24px;
}
.lightbox[aria-hidden="false"]{ display:flex; }

/* Only reset the main image (do not touch svg arrows) */
#lbImg{
    border:none !important;
    outline:none !important;
    background:none !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* Lightbox container */
.lightbox .panel{
    max-width:calc(100% - 64px);
    max-height:calc(100% - 64px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border-radius:8px;
    overflow: visible;
    background: transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    box-sizing:border-box;
    position:relative;
    z-index:13010;
    border:0 !important;
}

/* Inner */
.lb-inner{
    display:inline-flex;
    flex-direction:column;
    align-items:stretch;
    max-width:calc(100vw - 120px);
    max-height:calc(100vh - 120px);
    border-radius: 10px;
    overflow: hidden;
    background:#000;
}

.lb-inner img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(100vh - 120px - 54px);
    object-fit:contain;
    background:#000;
    margin:0;
}

/* Caption */
.lb-caption-bar{
    background:#000;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lb-caption{
    margin:0;
    padding:0 16px;
    color:#fff;
    font-size:20px;
    line-height:1.4;
    text-align:center;
    white-space:normal;
}

/* Close button (always above everything) */
.lightbox .close{
    position: fixed;
    top: 0;
    right: 0;
    background: #fff !important;
    border-radius:50%;
    width:40px;
    height:40px;
    display:inline-grid;
    place-items:center;
    cursor:pointer;
    border:1px solid rgba(0,0,0,0.06);
    z-index:13100;
    pointer-events:auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    outline:none !important;
    visibility:hidden;
    transition: opacity 220ms ease;    
}

.lightbox .close:hover{
    opacity: 1;
    transition: opacity 220ms ease;    
}

/* Lightbox nav zones */
.lb-nav{
    position:absolute;
    top:0;
    bottom:0;
    width:20%;
    cursor:pointer;
    z-index:13020;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
    background:transparent;
    border-radius: inherit;
    overflow: hidden;
}

/* Independent dimming overlays */
.lb-nav::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    transition: opacity 220ms ease;
    pointer-events:none;
}

.lb-nav.left{ left:0; }
.lb-nav.left::before{
    background: linear-gradient(to left,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.55) 100%);
}
.lb-nav.left:hover::before{ opacity:1; }

.lb-nav.right{ right:0; }
.lb-nav.right::before{
    background: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.55) 100%);
}
.lb-nav.right:hover::before{ opacity:1; }

/* Arrow buttons */
.lb-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
    background: rgba(255,255,255,0.95);
    border:1px solid rgba(0,0,0,0.08);
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    opacity:0;
    transition: opacity 160ms ease;
    pointer-events:auto;
    z-index:13030;
}

.lb-nav.left .lb-arrow{ left: 15px; }
.lb-nav.right .lb-arrow{ right: 15px; }
.lb-nav:hover .lb-arrow{ opacity:1; }

.lb-arrow svg{
    width:20px;
    height:20px;
    stroke:#111;
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Lightbox responsive */
@media (max-width:900px) {
    .lb-inner{
        max-width:calc(100vw - 48px);
        max-height:calc(100vh - 96px);
    }
    .lb-inner img{
        max-height:calc(100vh - 96px - 54px);
    }
}