/* =========================
   GALLERY GRID
========================= */
.cu-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:27px;
}

.cu-gallery-item{
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    aspect-ratio:4/3;
        box-shadow:0 8px 24px rgba(0,0,0,0.08);

}

.cu-gallery-item:hover{
    transform:scale(1.02);
}

.cu-gallery-item img{
    width:100%;
    height:100% !important;
    object-fit:cover;
    display:block;
    border-radius:20px;
}

.cu-hidden{ display:none; }


/* =========================
   LOAD MORE BUTTON
========================= */
.cu-load-more{
    margin:40px auto;
    display:block;
    background:#0f766e;
    color:#fff;
    padding:12px 34px;
    border-radius:26px;
    border:0;
    font-size:16px;
    cursor:pointer;
    transition:.25s;
}

.cu-load-more:hover{
    background:#0c5f5b;
}


/* =========================
   LIGHTBOX OVERLAY
========================= */
.cu-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}


/* =========================
   LIGHTBOX FRAME (FIXED SIZE LIKE XD)
========================= */
.cu-lightbox-inner {
    position: relative;
    /* Changed from hidden to visible so the close button can hang off the edge */
    overflow: visible; 
    
    padding: 24px;
    width: min(980px, 90vw);
    height: min(620px, 85vh);

    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}


/* =========================
   IMAGE FITTING (CRITICAL FIX)
========================= */
.cu-lightbox-img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:18px !important;
}

/* =========================
   CLOSE BUTTON
========================= */
.cu-close {
    position: absolute;
    /* Moves the button outside the top-right corner */
    top: -22px;
    right: -22px;

    width: 44px;
    height: 44px;

    background: #1f8a84;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Ensure it stays above everything */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}


/* =========================
   NAVIGATION ARROWS
========================= */
.cu-prev,
.cu-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:60px;
    height:60px;

    border-radius:50%;
    background:rgba(255,255,255,0.15);

    color:#fff;
    font-size:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

.cu-prev{
    left:60px;
}

.cu-next{
    right:60px;
}

.cu-prev:hover,
.cu-next:hover{
    background:rgba(255,255,255,0.28);
}


/* =========================
   POP ANIMATION
========================= */
@keyframes cuPop{
    from{
        transform:scale(.96);
        opacity:.6;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}


/* =========================
   TABLET
========================= */
@media(max-width:1024px){

    .cu-lightbox-inner{
        width:92vw;
        height:70vh;
    }

    .cu-prev{ left:10px; }
    .cu-next{ right:10px; }
}


/* =========================
   MOBILE
========================= */
@media(max-width:640px){

    .cu-gallery-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .cu-lightbox-inner{
        width:94vw;
        height:65vh;
        padding:14px;
    }

    .cu-prev,
    .cu-next{
        width:46px;
        height:46px;
        font-size:22px;
    }
}

/* =========================
   FIX ARROWS OVER IMAGE
========================= */

/* Ensure arrows are ABOVE everything */
.cu-prev,
.cu-next{
    z-index: 10002;
}

/* Ensure image stays below arrows */
.cu-lightbox-inner{
    z-index: 10000;
}

/* Optional: make sure image doesn't block clicks */
.cu-lightbox-img{
    position: relative;
    z-index: 1;
}


/* =========================
   MOBILE SPECIFIC FIX
========================= */
@media(max-width:640px){

    .cu-prev,
    .cu-next{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10002;

        width: 46px;
        height: 46px;
        font-size: 22px;

        background: rgba(0,0,0,0.6);
    }

    .cu-prev{
        left: 10px;
    }

    .cu-next{
        right: 10px;
    }

}