/* =========================================================
   GALLERY PAGE
========================================================= */

.gallery-switch {

    display: flex;

    justify-content: center;

    gap: 16px;

    margin-bottom: 40px;
}

.gallery-switch-btn{
    padding:12px 24px;

    border:none;
    border-radius:14px;

    background:white;
    color:var(--text);

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:.25s;
}

.gallery-switch-btn:hover{
    transform:translateY(-2px);
}

.gallery-switch-btn.active{
    background:var(--green);
    color:white;
}

.gallery-tab {

    display: none;
}



/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px; /* smaller gap */
}

/* =========================================================
   ALBUM CARD (SMALLER PREVIEW)
========================================================= */

.album-card {

    background: white;

    border-radius: 16px;

    overflow: hidden;

    cursor: pointer;

    box-shadow: 0 6px 25px rgba(0,0,0,0.08);

    transition: 0.3s;
}

.album-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

/* IMAGE WRAPPER (SMALLER) */

.album-img-wrapper {

    position: relative;

    height: 180px; /* reduced from 260px */

    overflow: hidden;
}

.album-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.4s;
}

.album-img-wrapper video{
    pointer-events:none;
}

.album-card:hover .album-img-wrapper img {

    transform: scale(1.05);
}

/* ================= PAGE SECTIONS ================= */

.page-section{
    padding:80px 0;
}

.page-section--tight{
    padding:60px 0;
}

.page-section--wide{
    padding:100px 0;
}

/* PHOTO COUNT */

.photo-count {

    position: absolute;

    bottom: 12px;

    right: 12px;

    padding: 6px 12px;

    border-radius: 20px;

    background: rgba(0,0,0,0.7);

    color: white;

    font-size: 13px;

    font-weight: 600;
}

/* BODY (SMALLER) */

.album-body {

    padding: 16px;
}

.album-body h3 {

    margin-bottom: 6px;

    font-size: 18px;
}

.album-body p {

    font-size: 14px;

    color: #666;

    line-height: 1.4;
}

/* =========================================================
   MODAL
========================================================= */

.gallery-modal {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;

    background: rgba(0,0,0,0.94);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 40px;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s;

    z-index: 9999;
}

.gallery-modal.active {

    opacity: 1;

    visibility: visible;
}

/* CLOSE BUTTON */

.gallery-close {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    color: white;

    font-size: 22px;

    cursor: pointer;

    transition: 0.3s;
}

.gallery-close:hover {

    background: rgba(255,255,255,0.25);
}

/* =========================================================
   MAIN IMAGE
========================================================= */

.gallery-slider {

    width: 100%;

    max-width: 1100px;

    display: flex;

    justify-content: center;

    align-items: center;
}

.gallery-slide {

    width: 100%;

    max-height: 70vh;

    object-fit: contain;

    border-radius: 16px;

    animation: fadeSlide 0.25s ease;
}

/* =========================================================
   THUMBNAILS (BELOW IMAGE)
========================================================= */

.gallery-thumbnails {

    width: 100%;

    max-width: 1100px;

    display: flex;

    justify-content: center;

    gap: 10px;

    overflow-x: auto;

    margin-top: 18px;

    padding-bottom: 10px;
}

.gallery-thumbnails::-webkit-scrollbar {

    height: 6px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,0.25);

    border-radius: 20px;
}

.gallery-thumb {

    width: 90px;

    height: 65px;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    opacity: 0.5;

    transition: 0.3s;

    flex-shrink: 0;

    border: 2px solid transparent;
}

.gallery-thumb:hover {

    opacity: 0.9;

    transform: scale(1.03);
}

.gallery-thumb.active {

    opacity: 1;

    border-color: white;
}

/* =========================================================
   NAVIGATION
========================================================= */

.gallery-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 56px;

    height: 56px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    color: white;

    font-size: 28px;

    cursor: pointer;

    transition: 0.3s;
}

.gallery-nav:hover {

    background: rgba(255,255,255,0.25);
}

.gallery-nav.prev {

    left: 20px;
}

.gallery-nav.next {

    right: 20px;
}

.gallery-tab.active {
    display: block;
}

/* VIDEO SUPPORT */

.album-img-wrapper video,
.gallery-thumb video,
.gallery-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-slide {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 16px;
}
/* =========================================================
   ANIMATION
========================================================= */

@keyframes fadeSlide {

    from {

        opacity: 0;

        transform: scale(0.98);
    }

    to {

        opacity: 1;

        transform: scale(1);
    }
}

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

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .album-img-wrapper{
        height:160px;
    }

    .gallery-modal{
        padding:20px 12px;
    }

    .gallery-slide{
        max-height:60vh;
    }

    /* thumbnails */

    .gallery-thumbnails{
        margin-top:10px;
        gap:6px;
        padding-bottom:4px;
    }

    .gallery-thumb{
        width:55px;
        height:40px;
    }

    /* arrows */
    .gallery-nav{
        width:40px;
        height:40px;

        top:45%;

        background:rgba(0,0,0,.65);
        border:1px solid rgba(255,255,255,.4);

        color:#fff;

        font-size:20px;
    }

    .gallery-nav:hover{
        background:rgba(0,0,0,.8);
    }

    .gallery-nav.prev{
        left:10px;
    }

    .gallery-nav.next{
        right:10px;
    }

    /* close button */

    .gallery-close{
        width:36px;
        height:36px;
        font-size:18px;
        top:12px;
        right:12px;
    }
}