/* =========================================================
   WIZORA GALLERY
========================================================= */

.wizora-gallery{

    position:relative;

    width:100%;

    overflow:hidden;

    background:var(--background-color,transparent);

    color:var(--text-color,#111827);

    font-family:var(--body-font,inherit);

}

.gallery-inner{

    width:100%;

    max-width:1400px;

    margin:auto;

}

/* =========================================================
   HEADER
========================================================= */

.gallery-header{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

}

.gallery-title{

    margin:0;

    font-family:var(--heading-font,inherit);

    font-size:clamp(32px,5vw,54px);

    font-weight:800;

    line-height:1.15;

    color:var(--text-color,#111827);

}

.gallery-subtitle{

    margin-top:18px;

    font-size:18px;

    line-height:1.8;

    color:#64748b;

}

/* =========================================================
   FILTERS
========================================================= */

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin:0 0 40px;

}

.gallery-filter-btn{

    appearance:none;

    border:none;

    cursor:pointer;

    padding:12px 22px;

    border-radius:999px;

    background:#f3f4f6;

    color:#374151;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.gallery-filter-btn:hover{

    background:var(--primary-color);

    color:#fff;

    transform:translateY(-2px);

}

.gallery-filter-btn.active{

    background:var(--primary-color);

    color:#fff;

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

}

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

.gallery-grid{

    display:grid;

    gap:var(--gallery-gap,20px);

}

/* Desktop Columns */

.gallery-grid.cols-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.gallery-grid.cols-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.gallery-grid.cols-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

.gallery-grid.cols-5{

    grid-template-columns:repeat(5,minmax(0,1fr));

}

.gallery-grid.cols-6{

    grid-template-columns:repeat(6,minmax(0,1fr));

}

/* =========================================================
   LAYOUTS
========================================================= */

/* Grid */

.layout-grid{

    align-items:start;

}

/* Masonry */

.layout-masonry{

    column-gap:var(--gallery-gap,20px);

}

/* Justified */

.layout-justified{

    display:flex;

    flex-wrap:wrap;

    gap:var(--gallery-gap,20px);

}

.layout-justified .gallery-item{

    flex:1 1 280px;

}

/* Slider */

.layout-slider{

    display:flex;

    overflow-x:auto;

    gap:var(--gallery-gap,20px);

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}

.layout-slider::-webkit-scrollbar{

    display:none;

}

.layout-slider .gallery-item{

    min-width:340px;

    flex:0 0 auto;

    scroll-snap-align:start;

}

/* =========================================================
   ITEM
========================================================= */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--gallery-radius,18px);

    transition:.35s;

}

.gallery-item.featured{

    transform:scale(1.02);

}

/* Masonry support */

.layout-masonry .gallery-item{

    display:inline-block;

    width:100%;

    margin:0 0 var(--gallery-gap,20px);

}

/* =========================================================
   EMPTY STATE
========================================================= */

.gallery-empty{

    text-align:center;

    padding:80px 30px;

    border:2px dashed #d1d5db;

    border-radius:20px;

}

.gallery-empty-icon{

    font-size:56px;

    margin-bottom:15px;

}

.gallery-empty h3{

    margin:0;

    font-size:28px;

}

.gallery-empty p{

    margin-top:12px;

    color:#6b7280;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1200px){

    .gallery-grid.cols-5,

    .gallery-grid.cols-6{

        grid-template-columns:repeat(4,1fr);

    }

}

@media (max-width:992px){

    .gallery-grid.cols-4,

    .gallery-grid.cols-5,

    .gallery-grid.cols-6{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr)!important;

    }

    .gallery-header{

        margin-bottom:35px;

    }

    .gallery-title{

        font-size:34px;

    }

    .gallery-subtitle{

        font-size:16px;

    }

}

@media (max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr!important;

    }

    .gallery-filter{

        justify-content:flex-start;

    }

    .layout-slider .gallery-item{

        min-width:85%;

    }

}

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

.gallery-image-wrap{

    position:relative;

    overflow:hidden;

    border-radius:inherit;

    background:#f8fafc;

    isolation:isolate;

}

.gallery-image-link{

    display:block;

    text-decoration:none;

    color:inherit;

}

.gallery-image{

    display:block;

    width:100%;

    height:var(--gallery-height,280px);

    object-fit:cover;

    transition:
    transform .6s ease,
    filter .35s ease,
    opacity .35s ease;

    user-select:none;

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    padding:24px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.78),
        rgba(0,0,0,.25),
        transparent
    );

    opacity:0;

    transition:
    opacity .35s ease;

    z-index:2;

}

.gallery-overlay-inner{

    width:100%;

    color:#fff;

}

.gallery-caption{

    margin:0;

    font-size:22px;

    font-weight:700;

    line-height:1.3;

}

.gallery-category{

    display:inline-flex;

    align-items:center;

    margin-top:10px;

    padding:6px 14px;

    border-radius:999px;

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

    backdrop-filter:blur(8px);

    font-size:13px;

    font-weight:600;

}

/* =========================================================
   BUTTON
========================================================= */

.gallery-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:18px;

    padding:12px 22px;

    border-radius:999px;

    background:var(--primary-color,#2563eb);

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

}

.gallery-button:hover{

    transform:translateY(-2px);

    background:var(--secondary-color,#1d4ed8);

    box-shadow:
    0 14px 35px rgba(0,0,0,.18);

}

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

.gallery-item:hover{

    transform:translateY(-8px);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

/* Zoom */

.hover-zoom .gallery-item:hover .gallery-image{

    transform:scale(1.10);

}

/* Lift */

.hover-lift .gallery-item{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.hover-lift .gallery-item:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);

}

/* Fade */

.hover-fade .gallery-item:hover .gallery-image{

    opacity:.82;

}

/* Blur */

.hover-blur .gallery-item:hover .gallery-image{

    transform:scale(1.06);

    filter:blur(3px);

}

/* None */

.hover-none .gallery-item:hover{

    transform:none;

}

.hover-none .gallery-item:hover .gallery-image{

    transform:none;

    filter:none;

}

/* =========================================================
   FEATURED
========================================================= */

.gallery-item.featured{

    box-shadow:
    0 18px 45px rgba(37,99,235,.18);

}

.gallery-item.featured::before{

    content:"Featured";

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    padding:7px 14px;

    border-radius:999px;

    background:var(--primary-color,#2563eb);

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.4px;

}

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

.gallery-item{

    opacity:0;

    transform:translateY(30px);

    animation:
    galleryReveal .7s ease forwards;

}

.gallery-item:nth-child(2){animation-delay:.08s;}
.gallery-item:nth-child(3){animation-delay:.16s;}
.gallery-item:nth-child(4){animation-delay:.24s;}
.gallery-item:nth-child(5){animation-delay:.32s;}
.gallery-item:nth-child(6){animation-delay:.40s;}
.gallery-item:nth-child(7){animation-delay:.48s;}
.gallery-item:nth-child(8){animation-delay:.56s;}

@keyframes galleryReveal{

    from{

        opacity:0;

        transform:
        translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* =========================================================
   IMAGE HOVER ANIMATIONS
========================================================= */

.wizora-gallery.style-modern .gallery-image img,
.wizora-gallery.style-masonry .gallery-image img,
.wizora-gallery.style-slider .gallery-image img{
    transition:
        transform .6s ease,
        filter .4s ease;
}

.wizora-gallery.style-modern .gallery-card:hover img,
.wizora-gallery.style-masonry .gallery-card:hover img,
.wizora-gallery.style-slider .gallery-card:hover img{
    transform:scale(1.08);
}

.wizora-gallery.hover-zoom .gallery-card:hover img{
    transform:scale(1.12);
}

.wizora-gallery.hover-grayscale .gallery-card img{
    filter:grayscale(100%);
}

.wizora-gallery.hover-grayscale .gallery-card:hover img{
    filter:none;
}

.wizora-gallery.hover-blur .gallery-card img{
    transition:filter .35s ease;
}

.wizora-gallery.hover-blur .gallery-card:hover img{
    filter:blur(2px);
}

.wizora-gallery.hover-lift .gallery-card{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.wizora-gallery.hover-lift .gallery-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}



/* =========================================================
   LOAD ANIMATION
========================================================= */

.gallery-card{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .6s ease,
        transform .6s ease;
}

.gallery-card.gallery-visible{
    opacity:1;
    transform:none;
}



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

.gallery-lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.94);

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

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    padding:40px;
}

.gallery-lightbox.show{

    opacity:1;
    visibility:visible;

}

.gallery-lightbox img{

    max-width:92%;
    max-height:90vh;

    border-radius:18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.55);

    animation:galleryZoom .35s ease;

}

@keyframes galleryZoom{

from{

    opacity:0;
    transform:scale(.9);

}

to{

    opacity:1;
    transform:none;

}

}



/* CLOSE */

.gallery-lightbox-close{

    position:absolute;

    top:24px;
    right:30px;

    width:48px;
    height:48px;

    border-radius:50%;

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

    font-size:24px;

    cursor:pointer;

    background:rgba(255,255,255,.12);
    color:#fff;

    backdrop-filter:blur(14px);

    transition:.25s;

}

.gallery-lightbox-close:hover{

    background:#fff;
    color:#111827;

}



/* NAVIGATION */

.gallery-prev,
.gallery-next{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:54px;
    height:54px;

    border-radius:50%;

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

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

    color:#fff;

    cursor:pointer;

    font-size:26px;

    transition:.25s;

    user-select:none;

}

.gallery-prev:hover,
.gallery-next:hover{

    background:#fff;
    color:#111827;

}

.gallery-prev{

    left:30px;

}

.gallery-next{

    right:30px;

}



/* COUNTER */

.gallery-counter{

    position:absolute;

    bottom:25px;
    left:50%;

    transform:translateX(-50%);

    padding:8px 16px;

    border-radius:30px;

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

    color:#fff;

    backdrop-filter:blur(10px);

    font-size:14px;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1200px){

.gallery-grid.columns-5,
.gallery-grid.columns-6{

grid-template-columns:repeat(4,1fr);

}

}



@media (max-width:992px){

.gallery-grid.columns-4,
.gallery-grid.columns-5,
.gallery-grid.columns-6{

grid-template-columns:repeat(3,1fr);

}

}



@media (max-width:768px){

.wizora-gallery{

padding:70px 20px;

}

.gallery-title{

font-size:34px;

}

.gallery-subtitle{

font-size:17px;

margin-bottom:40px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.gallery-card img{

height:240px;

}

.gallery-prev,
.gallery-next{

display:none;

}

.gallery-lightbox{

padding:20px;

}

}



@media (max-width:520px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-card img{

height:260px;

}

.gallery-title{

font-size:28px;

}

.gallery-filter{

gap:8px;

}

.gallery-filter button{

padding:10px 18px;
font-size:13px;

}

.gallery-caption{

padding:18px;

}

}



/* =========================================================
   DARK MODE
========================================================= */

body.dark .gallery-card{

background:#1f2937;

}

body.dark .gallery-title{

color:#f9fafb;

}

body.dark .gallery-subtitle{

color:#cbd5e1;

}

body.dark .gallery-caption{

background:#1f2937;

color:#f9fafb;

}

body.dark .gallery-filter button{

background:#1f2937;
color:#e5e7eb;

}

body.dark .gallery-filter button.active{

background:var(--primary-color);

color:#fff;

}



/* =========================================================
   PRINT
========================================================= */

@media print{

.gallery-filter,
.gallery-lightbox{

display:none!important;

}

.gallery-card{

box-shadow:none;

break-inside:avoid;

}

}

/* ==========================================================
   FIX BLOCK LIBRARY WIDTH
========================================================== */


.builder-workspace{

    grid-template-columns:

    76px

    260px

    minmax(600px,1fr)

    360px;

}



/* BLOCK PANEL */

.builder-panel{

    width:260px;

    min-width:260px;

}



/* BLOCK HEADER */

.panel-header{

    padding:18px;

}


.panel-header h3{

    font-size:17px;

}



/* SEARCH */

.panel-header input{

    height:40px;

    font-size:14px;

}



/* BLOCK LIST */

#blockLibrary{

    padding:15px;

}



/* BLOCK CARD */

.modern-block-card{

    height:64px;

    padding:10px;

    border-radius:14px;

    gap:10px;

}



.modern-block-card i{

    width:38px;

    height:38px;

    border-radius:11px;

    font-size:14px;

}



.modern-block-card strong{

    font-size:13px;

}



.modern-block-card small{

    font-size:11px;

}