/* ===============================
   FILTR
=============================== */

.gallery-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

    width:100%;
    max-width:1200px;

    margin:0 auto 70px;
    padding:0 20px;
}

.gallery-filter button{

    padding:14px 24px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.85rem;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;

    cursor:pointer;

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

.gallery-filter button:hover{
    transform:translateY(-2px);
    border-color:rgba(0,212,255,.3);
    box-shadow: 0 10px 24px rgba(0,212,255,.12);
}

.gallery-filter button.active{
    background:
        linear-gradient(
            135deg,
            #00d4ff 0%,
            #008cff 100%
        );
    color:#021018;
    border-color:transparent;
    box-shadow: 0 10px 30px rgba(0,212,255,.25);
}

/* ===============================
   GALERIE – DOPLŇKOVÉ STYLY
=============================== */

/* DARK */
.dark-section .gallery-subheading{
    background:var(--silver-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* LIGHT */
.light-section .gallery-subheading{
    background:
        linear-gradient(
            135deg,
            #021018 0%,
            #003b66 55%,
            #00bfff 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* ===============================
   SUBHEADING
=============================== */

.gallery-subheading{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    position:relative;
    margin:0 auto 52px;
    text-align:center;
    font-family:'Outfit', sans-serif;
    font-size:clamp(2.2rem,4vw,3.8rem);
    line-height:.95;
    letter-spacing:-2px;
    font-weight:900;
    text-transform:uppercase;
    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.05));
}

/* second line */
.gallery-subheading span{
    display:block;
}

/* overlay click */
.gallery-overlay{
    pointer-events:none;
}

/* ===============================
   CTA SEKCE
=============================== */

.cta-section h2{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    text-align:center;
}

.cta-section h2 .neon-text{
    display:inline-block;
    margin-top:0;
}

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

@media (max-width:768px){

    .gallery-subheading{
        gap:4px;
        margin-bottom:32px;

        font-size:1.9rem;
        line-height:1.05;
        letter-spacing:-1px;
    }

    .gallery-filter{
        gap:10px;
        margin-bottom:42px;
    }

    .gallery-filter button{
        padding:11px 18px;
        font-size:.72rem;
    }
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:18px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,.015) 100%
        );
    backdrop-filter:blur(10px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.22);
    isolation:isolate;
    transition:
        transform .7s cubic-bezier(.19,1,.22,1),
        box-shadow .7s cubic-bezier(.19,1,.22,1),
        border-color .5s ease;
}

/* glow */
.gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
        radial-gradient(
            circle at top,
            rgba(0,212,255,.14),
            transparent 72%
        );
    opacity:0;
    transition:opacity .5s ease;
    z-index:1;
}

/* image */
.gallery-item img{
    height: auto;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
    transition:
        transform .7s cubic-bezier(.19,1,.22,1),
        filter .5s ease;
}

/* hover */
.gallery-item:hover{
    transform:translateY(-8px);
    border-color:rgba(0,212,255,.24);
    box-shadow:
        0 35px 70px rgba(0,0,0,.38),
        0 0 35px rgba(0,212,255,.08);
}

.gallery-item:hover::before{
    opacity:1;
}

.gallery-item:hover img{
    transform:scale(1.02);
    filter:brightness(.92);
}

/* overlay */
.gallery-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    color:#fff;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.38) 48%,
            transparent 100%
        );
    opacity:0;
    transition:
        opacity .7s cubic-bezier(.19,1,.22,1),
        transform .7s cubic-bezier(.19,1,.22,1);
    transform:translateY(18px);
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
    transform:translateY(0);
}

/* title */
.gallery-overlay h4{
    margin-bottom:6px;
    font-size:1.55rem;
    line-height:1;
    font-weight:800;
    letter-spacing:-1px;
    background:var(--silver-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* text */
.gallery-overlay p{
    font-size:.92rem;
    line-height:1.6;
    letter-spacing:.5px;
    opacity:.78;
}

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

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

    .gallery-item{
        border-radius:28px;
    }

    .gallery-item img{
        height:340px;
    }

    .gallery-overlay{
        opacity:1;
        transform:none;
        padding:22px;
        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.78) 0%,
                rgba(0,0,0,.24) 55%,
                transparent 100%
            );
    }

    .gallery-overlay h4{
        font-size:1.3rem;
    }
}

/* smooth GPU rendering */
.gallery-item,
.gallery-item img,
.gallery-overlay{
    will-change:transform;
}

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

.lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none !important;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(
            circle at center,
            rgba(0,20,40,.75) 0%,
            rgba(0,0,0,.96) 70%
        );
    backdrop-filter:blur(14px);
    user-select:none;
}

/* active */
.lightbox.active{
    display:flex !important;
}

/* wrapper */
.lightbox-inner{
    position:relative;
    max-width:92vw;
    max-height:92vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* image */
.lightbox-image{
    max-width:100%;
    max-height:80vh;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 60px rgba(0,212,255,.16),
        0 30px 80px rgba(0,0,0,.55);
    animation:lightboxFade .45s ease;
}

/* close */
.lightbox-close{
    position:absolute;
    top:-58px;
    right:0;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );
    backdrop-filter:blur(10px);
    cursor:pointer;
    color:#fff;
    font-size:1.8rem;
    line-height:1;
    transition:
        transform .3s ease,
        opacity .3s ease,
        border-color .3s ease;
}

.lightbox-close:hover{
    opacity:1;
    transform:rotate(90deg);
    border-color:rgba(0,212,255,.3);
}

/* nav */
.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );
    backdrop-filter:blur(10px);
    cursor:pointer;
    color:#fff;
    font-size:2.2rem;
    line-height:1;
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.lightbox-nav:hover{
    transform:translateY(-50%) scale(1.08);
    border-color:rgba(0,212,255,.3);
}

/* positions */
.lightbox-nav.prev{
    left:-90px;
}

.lightbox-nav.next{
    right:-90px;
}

/* caption */
.lightbox-caption{
    margin-top:22px;
    text-align:center;
    color:#fff;
}

.lightbox-caption h4{
    margin-bottom:6px;
    font-family:'Outfit', sans-serif;
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-.5px;
    background:var(--silver-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.lightbox-caption p{
    color:rgba(255,255,255,.68);
    font-size:.95rem;
    line-height:1.7;
}

/* animation */

@keyframes lightboxFade{

    from{
        opacity:0;
        transform:scale(.96);
    }

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

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

@media (max-width:992px){

    .lightbox-nav.prev{
        left:20px;
    }

    .lightbox-nav.next{
        right:20px;
    }
}

@media (max-width:768px){

    .gallery-subheading{
        font-size:1.8rem;
        margin-bottom:28px;
    }

    .lightbox-inner{
        max-width:94vw;
    }

    .lightbox-image{
        max-height:72vh;
        border-radius:18px;
    }

    .lightbox-nav{
        width:48px;
        height:48px;
        font-size:1.8rem;
    }

    .lightbox-close{
        top:-48px;
        width:40px;
        height:40px;
        font-size:1.5rem;
    }

}


@media (max-width:480px){

    .gallery-subheading{
        font-size:1.45rem;
        margin-bottom:22px;
    }

    .lightbox-image{
        max-height:68vh;
        border-radius:14px;
    }

    .lightbox-nav{
        width:42px;
        height:42px;
        font-size:1.5rem;
    }

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

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

    .lightbox-close{
        top:-42px;
        font-size:1.3rem;
    }

    .lightbox-caption{
        margin-top:14px;
    }

    .lightbox-caption h4{
        font-size:1.05rem;
    }

    .lightbox-caption p{
        font-size:.88rem;
    }
}

@media (max-width:390px){

    .lightbox-image{
        max-height:64vh;
    }

    .lightbox-nav{
        width:38px;
        height:38px;
        font-size:1.3rem;
    }

    .lightbox-close{
        top:-38px;
    }
}