/* ==================================================
   STRÁNKA REALIZACE
================================================== */

.gallery-hero{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
}

.gallery-hero-image{
    position:absolute;
    inset:0;
    background:
        url("assets/images/hero-bg.png")
        center / cover no-repeat;
    transform:scale(1.06);
    animation:galleryHeroBreathing 20s ease-in-out infinite alternate;
}

.gallery-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(208,168,95,.24),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.82),
            rgba(0,0,0,.42),
            rgba(0,0,0,.72)
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.78)
        );
}

.gallery-hero-watermark{
    position:absolute;
    left:50%;
    top:44%;
    transform:translate(-50%,-50%);
    font-family:'Cormorant Garamond',serif;
    font-size:25vw;
    line-height:.7;
    font-weight:700;
    letter-spacing:-22px;
    color:rgba(255,255,255,.055);
    pointer-events:none;
    user-select:none;
}

.gallery-hero-content{
    position:relative;
    z-index:3;
    width:min(950px, 100%);
    margin:0 auto;
    padding:150px 24px 80px;

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

    text-align:center;
}

.gallery-hero-content h1,
.gallery-hero-content p{
    width:100%;
    text-align:center;
}

.gallery-hero-content h1{
    margin-bottom:28px;
    font-family:'Cormorant Garamond',serif;
    font-size:92px;
    line-height:.95;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:4px;
    text-shadow:0 18px 50px rgba(0,0,0,.55);
    text-align:center;
    width:100%;
}

.gallery-hero-line{
    width:110px;
    height:1px;
    margin:0 auto 26px;
    background:#d0a85f;
}

.gallery-hero-content > p:last-child{
    max-width:700px;
    margin:0 auto;
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.9;
}

@keyframes galleryHeroBreathing{
    from{
        transform:scale(1.06);
    }

    to{
        transform:scale(1.12);
    }
}

/* ==================================================
   HLAVNÍ GALERIE
================================================== */

.full-gallery-section{
    position:relative;
    padding:135px 28px 150px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(208,168,95,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #090806,
            #11100d 48%,
            #080705
        );
}

.full-gallery-section::before{
    content:"REALIZACE";
    position:absolute;
    top:28px;
    left:50%;
    transform:translateX(-50%);
    font-family:'Cormorant Garamond',serif;
    font-size:14vw;
    font-weight:600;
    letter-spacing:18px;
    color:rgba(255,255,255,.022);
    pointer-events:none;
    user-select:none;
}

.gallery-container{
    position:relative;
    z-index:2;
    width:min(1380px,100%);
    margin:0 auto;
}

.gallery-heading{
    max-width:820px;
    margin:0 auto 58px;
    text-align:center;
}

.gallery-heading h2{
    margin-bottom:22px;
    font-family:'Cormorant Garamond',serif;
    font-size:66px;
    line-height:1.05;
    font-weight:500;
}

.gallery-heading > p:last-child{
    color:rgba(255,255,255,.66);
    font-size:16px;
    line-height:1.9;
}

/* ==================================================
   FILTRY
================================================== */

.gallery-filters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:60px;
}

.filter-button{
    padding:14px 24px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:rgba(255,255,255,.72);
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.filter-button:hover{
    transform:translateY(-3px);
    color:#fff;
    border-color:rgba(208,168,95,.55);
}

.filter-button.active{
    color:#111;
    border-color:#d0a85f;
    background:#d0a85f;
    box-shadow:0 14px 34px rgba(208,168,95,.16);
}

/* ==================================================
   MŘÍŽKA FOTEK
================================================== */

.full-gallery-grid{
    columns:3;
    column-gap:18px;
}

.full-gallery-item{
    position:relative;
    width:100%;
    margin:0 0 18px;
    display:block;
    break-inside:avoid;
    overflow:hidden;
    border-radius:6px;
    background:#11100d;
    box-shadow:0 24px 68px rgba(0,0,0,.26);
    cursor:zoom-in;
    opacity:1;
    transform:scale(1);
    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.full-gallery-item.is-hidden{
    display:none;
}

.full-gallery-item.is-filtering{
    opacity:0;
    transform:scale(.96);
}

.full-gallery-item img{
    width:100%;
    height:auto;
    display:block;
    transition:
        transform .75s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.full-gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.28)
        );
    opacity:.45;
    pointer-events:none;
    transition:opacity .35s ease;
}

.full-gallery-item::after{
    content:"Zvětšit";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    transform:translate(-50%,-42%);
    padding:12px 20px;
    border:1px solid rgba(255,255,255,.44);
    border-radius:999px;
    background:rgba(0,0,0,.48);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.3px;
    text-transform:uppercase;
    opacity:0;
    pointer-events:none;
    backdrop-filter:blur(8px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        border-color .35s ease;
}

.full-gallery-item:hover{
    box-shadow:0 32px 85px rgba(0,0,0,.42);
}

.full-gallery-item:hover img{
    transform:scale(1.045);
    filter:saturate(1.04) contrast(1.03);
}

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

.full-gallery-item:hover::after{
    opacity:1;
    transform:translate(-50%,-50%);
    border-color:rgba(208,168,95,.75);
}

/* ==================================================
   CTA POD GALERIÍ
================================================== */

.gallery-cta{
    position:relative;
    min-height:560px;
    padding:110px 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
    background:
        url("assets/images/tym-spolecna.jpg")
        center / cover no-repeat;
}

.gallery-cta-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(208,168,95,.18),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.86),
            rgba(0,0,0,.54),
            rgba(0,0,0,.86)
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.40),
            rgba(0,0,0,.80)
        );
}

.gallery-cta-content{
    position:relative;
    z-index:2;
    width:min(820px,100%);
}

.gallery-cta-content h2{
    margin-bottom:24px;
    font-family:'Cormorant Garamond',serif;
    font-size:70px;
    line-height:1;
    font-weight:500;
}

.gallery-cta-content > p:not(.section-label){
    max-width:660px;
    margin:0 auto 38px;
    color:rgba(255,255,255,.76);
    font-size:17px;
    line-height:1.9;
}

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

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 90px;
    background:rgba(0,0,0,.96);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .3s ease,
        visibility .3s ease;
}

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

.gallery-lightbox-image{
    display:block;
    max-width:90vw;
    max-height:88vh;
    width:auto;
    height:auto;
    object-fit:contain;
    box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.gallery-lightbox-close,
.gallery-lightbox-arrow{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.26);
    border-radius:50%;
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.gallery-lightbox-close{
    top:22px;
    right:28px;
    width:54px;
    height:54px;
    font-size:34px;
}

.gallery-lightbox-arrow{
    top:50%;
    width:58px;
    height:58px;
    transform:translateY(-50%);
    font-size:42px;
}

.gallery-lightbox-prev{
    left:24px;
}

.gallery-lightbox-next{
    right:24px;
}

.gallery-lightbox-close:hover{
    transform:rotate(90deg);
    border-color:#d0a85f;
    background:#d0a85f;
    color:#111;
}

.gallery-lightbox-arrow:hover{
    border-color:#d0a85f;
    background:#d0a85f;
    color:#111;
}

.gallery-lightbox-prev:hover{
    transform:translateY(-50%) translateX(-4px);
}

.gallery-lightbox-next:hover{
    transform:translateY(-50%) translateX(4px);
}

.gallery-lightbox-counter{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    color:rgba(255,255,255,.65);
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
}

/* ==================================================
   RESPONZIVITA
================================================== */

@media(max-width:1050px){
    .full-gallery-grid{
        columns:2;
    }

    .gallery-hero-content h1{
        font-size:72px;
    }
}

@media(max-width:700px){
    .gallery-hero{
        min-height:72vh;
    }

    .gallery-hero-content{
        padding:130px 20px 90px;
    }

    .gallery-hero-content h1{
        font-size:52px;
        letter-spacing:2px;
    }

    .gallery-hero-watermark{
        font-size:48vw;
        letter-spacing:-10px;
    }

    .full-gallery-section{
        padding:95px 18px 110px;
    }

    .gallery-heading{
        margin-bottom:42px;
    }

    .gallery-heading h2{
        font-size:44px;
    }

    .gallery-filters{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:10px;
        scrollbar-width:none;
    }

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

    .filter-button{
        flex:0 0 auto;
    }

    .full-gallery-grid{
        columns:1;
    }

    .gallery-cta{
        min-height:500px;
        padding:90px 20px;
    }

    .gallery-cta-content h2{
        font-size:46px;
    }

    .gallery-lightbox{
        padding:70px 14px;
    }

    .gallery-lightbox-arrow{
        top:auto;
        bottom:18px;
        width:48px;
        height:48px;
        transform:none;
    }

    .gallery-lightbox-prev{
        left:18px;
    }

    .gallery-lightbox-next{
        right:18px;
    }

    .gallery-lightbox-prev:hover,
    .gallery-lightbox-next:hover{
        transform:none;
    }

    .gallery-lightbox-counter{
        bottom:34px;
    }
}

@media(prefers-reduced-motion:reduce){
    .gallery-hero-image{
        animation:none;
    }

    .full-gallery-item,
    .full-gallery-item img{
        transition:none;
    }
}

/* ==================================================
   FINÁLNÍ HERO REALIZACÍ
   Stejné vystředění jako na hlavní stránce
================================================== */

.gallery-hero{
    position:relative;
    min-height:78vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    text-align:center;
}

.gallery-hero-content{
    position:relative;
    z-index:3;
    width:min(950px, calc(100% - 48px));
    margin:0 auto;
    padding:150px 0 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.gallery-hero-content .section-label{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.gallery-hero-title{
    width:100%;
    margin:0 auto 28px;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(58px,5.8vw,92px);
    line-height:.95;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    text-align:center;
    text-shadow:0 18px 50px rgba(0,0,0,.55);
}

.gallery-hero-title span{
    display:block;
    width:100%;
    margin:0 auto;
    text-align:center;
}

.gallery-hero-line{
    width:110px;
    height:1px;
    margin:0 auto 26px;
    background:#d0a85f;
}

.gallery-hero-content > p:last-child{
    width:100%;
    max-width:700px;
    margin:0 auto;
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.9;
    text-align:center;
}

@media(max-width:1100px){
    .gallery-hero-content{
        width:min(900px, calc(100% - 40px));
    }

    .gallery-hero-title{
        font-size:clamp(48px,7vw,72px);
        letter-spacing:1px;
    }
}

@media(max-width:700px){
    .gallery-hero{
        min-height:100svh;
    }

    .gallery-hero-content{
        width:calc(100% - 28px);
        padding:145px 0 88px;
    }

    .gallery-hero-content .section-label{
        max-width:350px;
        margin:0 auto 20px;
        font-size:11px;
        letter-spacing:3px;
        line-height:1.7;
    }

    .gallery-hero-title{
        width:100%;
        max-width:100%;
        margin:0 auto 28px;
        font-size:clamp(34px,9.5vw,42px);
        line-height:1.03;
        letter-spacing:0;
    }

    .gallery-hero-title span{
        width:100%;
        margin:0 auto;
        text-align:center;
    }

    .gallery-hero-title span + span{
        margin-top:4px;
    }

    .gallery-hero-content > p:last-child{
        max-width:350px;
        margin:0 auto;
        padding:0 4px;
        font-size:15px;
        line-height:1.8;
    }
}

@media(max-width:390px){
    .gallery-hero-content{
        width:calc(100% - 22px);
    }

    .gallery-hero-title{
        font-size:34px;
    }
}