/* =========================================================
   KRUSHIVANDANA — GALLERY PAGE
   SMART MASONRY GALLERY
   Works with gallery-api.php + gallery-page.js
   Does NOT affect the Home page gallery
========================================================= */


/* =========================================================
   GALLERY HERO
========================================================= */

.gallery-page-hero{
    position:relative;
    min-height:calc(100vh - 95px);
    display:flex;
    align-items:center;
    overflow:hidden;

    background:url("../images/about/about-farm.jpg")
               center center / cover no-repeat;
}

.gallery-page-hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,35,14,.72) 0%,
        rgba(8,35,14,.45) 40%,
        rgba(8,35,14,.18) 70%,
        rgba(8,35,14,0) 100%
    );
}

.gallery-page-hero .container-custom{
      position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:center;
}

.gallery-page-hero-content{
    width:100%;
    max-width:900px;
    margin:0 auto;
    color:#fff;
    text-align:center;
}

.gallery-page-hero-content .section-tag{
    margin-bottom:22px;
     display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.gallery-page-hero-content .breadcrumb{
    margin:20px 0 28px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.gallery-page-hero h1{
    margin:0 0 25px;

    font-size:4rem;
    line-height:1.1;
    font-weight:800;
}

.gallery-page-hero h1 span{
    display:block;
    color:#8EDB65;
}

.gallery-page-hero p{
     max-width:700px;
    margin:0 auto;

    color:#f4f4f4;

    font-size:1.1rem;
    line-height:1.9;
}


/* =========================================================
   GALLERY SECTION
========================================================= */

.gallery-page-section{
    padding:100px 0;
    background:#f8fbf6;
    overflow:hidden;
}

.gallery-page-header{
    max-width:760px;
    margin:0 auto 50px;
    text-align:center;
}

.gallery-page-header h2{
    margin:18px 0 20px;

    color:#1d1d1d;

    font-size:2.8rem;
    line-height:1.2;
    font-weight:700;
}

.gallery-page-header h2 span{
    display:block;
    color:#2E7D32;
}

.gallery-page-header p{
    max-width:700px;
    margin:20px auto 0;

    color:#666;

    font-size:1.05rem;
    line-height:1.8;
}


/* =========================================================
   FILTER BUTTONS
========================================================= */

.gallery-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin-bottom:50px;
}

.gallery-filter{
    border:1px solid #d8e6d8;

    background:#fff;
    color:#35653b;

    padding:11px 23px;
    border-radius:50px;

    font-family:inherit;
    font-size:.95rem;
    font-weight:500;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.gallery-filter:hover{
    background:#eaf5e9;
    border-color:#2E7D32;

    transform:translateY(-2px);
}

.gallery-filter.active{
    background:#2E7D32;
    border-color:#2E7D32;

    color:#fff;

    box-shadow:
        0 8px 20px rgba(46,125,50,.20);
}


/* =========================================================
   SMART MASONRY GALLERY

   IMPORTANT:
   We intentionally use CSS columns here.

   This avoids the large empty gaps caused by:
   grid-auto-rows
   + grid-row spans
   + mixed portrait/landscape cards.

   Every card gets its own natural height.
========================================================= */

.premium-gallery.gallery-grid{
    width:100%;
    max-width:1200px;

    margin:0 auto;

    column-count:3;
    column-gap:20px;
}


/* =========================================================
   GALLERY CARD
========================================================= */

.premium-gallery .gallery-photo{
    position:relative;

    display:block;

    width:100%;

    margin:0 0 20px;

    overflow:hidden;

    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;

    border-radius:22px;

    background:#e8eee7;

    cursor:pointer;

    isolation:isolate;

    box-shadow:
        0 10px 30px rgba(0,0,0,.07);

    opacity:1;

    transform:translateY(0);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        opacity .35s ease,
        box-shadow .45s ease;

    animation:
        galleryCardIn .55s ease both;
}


/* =========================================================
   ORIENTATION SIZES

   These are controlled visual proportions.

   PHP tells JS the real orientation.
   JS adds:
   .landscape
   .portrait
   .square
========================================================= */


/* LANDSCAPE */

.premium-gallery .gallery-photo.landscape{
    aspect-ratio:1.5 / 1;

    max-height:380px;
}


/* PORTRAIT */

.premium-gallery .gallery-photo.portrait{
    aspect-ratio:.577 / 1;

    max-height:520px;
}


/* SQUARE */

.premium-gallery .gallery-photo.square{
    aspect-ratio:1 / 1;

    max-height:400px;
}


/* Fallback if an old class exists */

.premium-gallery .gallery-photo.photo-large,
.premium-gallery .gallery-photo.photo-tall,
.premium-gallery .gallery-photo.photo-wide{
    break-inside:avoid;
}


/* =========================================================
   IMAGE CONTAINER
========================================================= */

.premium-gallery .gallery-photo .photo-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#e7eee7;
}


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

   object-fit:cover prevents stretching.

   It may crop a small amount when a predefined card
   ratio is different from the original image.
========================================================= */

.premium-gallery .gallery-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   HOVER
========================================================= */

.premium-gallery .gallery-photo:hover{
    transform:translateY(-7px);

    box-shadow:
        0 22px 45px rgba(0,0,0,.14);
}

.premium-gallery .gallery-photo:hover img{
    transform:scale(1.06);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.premium-gallery .gallery-photo::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.84) 0%,
        rgba(0,0,0,.40) 42%,
        rgba(0,0,0,0) 78%
    );

    opacity:.9;

    transition:
        opacity .35s ease;
}

.premium-gallery .gallery-photo:hover::after{
    opacity:1;
}


/* =========================================================
   CARD INFORMATION
========================================================= */

.premium-gallery .photo-info{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:24px;

    color:#fff;

    transform:translateY(5px);

    transition:
        transform .35s ease;
}

.premium-gallery .gallery-photo:hover .photo-info{
    transform:translateY(0);
}

.premium-gallery .photo-info span{
    display:block;

    margin-bottom:7px;

    color:#9BE15D;

    font-size:.78rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;
}

.premium-gallery .photo-info h3{
    margin:0;

    color:#fff;

    font-size:1.35rem;
    line-height:1.2;
    font-weight:700;
}


/* Smaller cards */

.premium-gallery .gallery-photo.square .photo-info{
    padding:20px;
}

.premium-gallery .gallery-photo.square .photo-info h3{
    font-size:1.15rem;
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.premium-gallery .gallery-hidden{
    display:none !important;
}

.premium-gallery .gallery-show{
    animation:
        galleryCardIn .5s ease both;
}

@keyframes galleryCardIn{

    from{
        opacity:0;
        transform:translateY(24px) scale(.975);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox{
    position:fixed;
    inset:0;

    z-index:9999;

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

    padding:30px;

    background:rgba(5,15,8,.94);

    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.gallery-lightbox.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.lightbox-inner{
    position:relative;

    width:min(1100px,90vw);
    max-height:90vh;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;
}

#lightboxImage{
    display:block;

    max-width:100%;
    max-height:75vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:12px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.5);

    opacity:1;

    transform:scale(1);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.lightbox-details{
    width:100%;

    padding-top:18px;

    text-align:center;

    color:#fff;
}

.lightbox-details span{
    display:block;

    margin-bottom:5px;

    color:#9BE15D;

    font-size:.8rem;
    font-weight:600;

    text-transform:uppercase;
    letter-spacing:1px;
}

.lightbox-details h3{
    margin:0;

    color:#fff;

    font-size:1.25rem;
    font-weight:600;
}


/* =========================================================
   LIGHTBOX BUTTONS
========================================================= */

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:fixed;

    z-index:10001;

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

    width:52px;
    height:52px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
    background:#fff;
    color:#2E7D32;
}

.lightbox-close{
    top:25px;
    right:25px;
}

.lightbox-prev{
    left:25px;
    top:50%;

    transform:translateY(-50%);
}

.lightbox-next{
    right:25px;
    top:50%;

    transform:translateY(-50%);
}

.lightbox-prev:hover,
.lightbox-next:hover{
    transform:translateY(-50%) scale(1.08);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .premium-gallery.gallery-grid{
        max-width:900px;

        column-count:2;
        column-gap:18px;
    }

    .premium-gallery .gallery-photo.landscape{
        max-height:340px;
    }

    .premium-gallery .gallery-photo.portrait{
        max-height:480px;
    }

    .premium-gallery .gallery-photo.square{
        max-height:360px;
    }
}


@media(max-width:992px){

    .gallery-page-hero{
        min-height:calc(100vh - 80px);
    }

    .gallery-page-hero h1{
        font-size:3.2rem;
    }

    .gallery-page-section{
        padding:85px 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .gallery-page-hero{
        min-height:calc(100vh - 70px);

        padding:70px 0;

        background-position:center;
    }

    .gallery-page-hero-overlay{
        background:
            rgba(8,35,14,.58);
    }

    .gallery-page-hero-content{
        max-width:100%;
    }

    .gallery-page-hero h1{
        font-size:2.5rem;
        line-height:1.15;
    }

    .gallery-page-hero p{
        font-size:1rem;
        line-height:1.8;
    }


    /* SECTION */

    .gallery-page-section{
        padding:70px 0;
    }

    .gallery-page-header{
        padding:0 15px;
    }

    .gallery-page-header h2{
        font-size:2rem;
    }

    .gallery-page-header p{
        font-size:.95rem;
    }


    /* FILTERS */

    .gallery-filters{
        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        gap:8px;

        padding:
            5px 15px 15px;

        margin-bottom:35px;

        scrollbar-width:none;
    }

    .gallery-filters::-webkit-scrollbar{
        display:none;
    }

    .gallery-filter{
        flex:0 0 auto;

        padding:9px 16px;

        font-size:.85rem;
    }


    /* MOBILE MASONRY */

    .premium-gallery.gallery-grid{

        width:100%;

        max-width:600px;

        margin:0 auto;

        padding:0 12px;

        column-count:1;

        column-gap:0;
    }

    .premium-gallery .gallery-photo{

        width:100%;

        margin-bottom:18px;

        border-radius:18px;
    }


    /*
     * Keep real orientation on mobile.
     */

    .premium-gallery .gallery-photo.landscape{

        aspect-ratio:1.5 / 1;

        max-height:none;
    }

    .premium-gallery .gallery-photo.portrait{

        aspect-ratio:.577 / 1;

        max-height:520px;
    }

    .premium-gallery .gallery-photo.square{

        aspect-ratio:1 / 1;

        max-height:420px;
    }


    .premium-gallery .photo-info{
        padding:20px;
    }

    .premium-gallery .photo-info h3{
        font-size:1.15rem;
    }


    /* LIGHTBOX */

    .gallery-lightbox{
        padding:15px;
    }

    #lightboxImage{
        max-width:94vw;
        max-height:70vh;

        border-radius:8px;
    }

    .lightbox-close{
        top:15px;
        right:15px;

        width:44px;
        height:44px;
    }

    .lightbox-prev,
    .lightbox-next{
        width:42px;
        height:42px;

        top:auto;
        bottom:25px;

        transform:none;
    }

    .lightbox-prev{
        left:25%;
    }

    .lightbox-next{
        right:25%;
    }

    .lightbox-prev:hover,
    .lightbox-next:hover{
        transform:scale(1.08);
    }

    .lightbox-details{
        padding-top:12px;
    }

    .lightbox-details h3{
        font-size:1rem;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .gallery-page-hero h1{
        font-size:2.15rem;
    }

    .gallery-filter{
        padding:8px 13px;
        font-size:.8rem;
    }

    .premium-gallery.gallery-grid{
        padding:0 10px;
    }

    .premium-gallery .gallery-photo{
        border-radius:15px;
    }

    .premium-gallery .gallery-photo.portrait{
        max-height:470px;
    }

    .premium-gallery .gallery-photo.square{
        max-height:350px;
    }
}


/* =========================================================
   SAFETY
========================================================= */

.gallery-page-section,
.gallery-page-hero,
.premium-gallery,
.premium-gallery .gallery-photo{
    max-width:100%;
    box-sizing:border-box;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .premium-gallery .gallery-photo,
    .premium-gallery .gallery-photo img,
    .gallery-filter,
    .gallery-lightbox,
    #lightboxImage{

        transition:none;
        animation:none;
    }
}