
.project-cover-open{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:none;
    cursor:zoom-in;
}

.project-cover-open img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.project-gallery-section{
    padding:72px 0 82px;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(circle at 78% 12%,rgba(237,28,36,.06),transparent 24%),
        #05090c;
}

.project-gallery-header{
    margin-bottom:35px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.project-gallery-header h2{
    margin:0;
    font-size:clamp(38px,4vw,62px);
    line-height:.95;
    font-weight:650;
    letter-spacing:-.055em;
}

.project-gallery-header h2 em{
    color:var(--red);
    font-style:normal;
}

.gallery-count{
    min-width:120px;
    padding-left:25px;
    border-left:1px solid var(--line);
}

.gallery-count strong{
    display:block;
    color:var(--red);
    font-size:48px;
    line-height:.9;
    letter-spacing:-.06em;
}

.gallery-count span{
    display:block;
    margin-top:9px;
    color:#7e888e;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
}

.project-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:270px;
    gap:12px;
}

.project-gallery-item{
    position:relative;
    overflow:hidden;
    min-width:0;
    padding:0;
    border:1px solid #202b31;
    background:#091014;
    cursor:zoom-in;
}

.project-gallery-item.gallery-wide{
    grid-column:span 2;
    grid-row:span 2;
}

.project-gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .45s ease,
        filter .45s ease;
}

.project-gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(5,9,12,.55),
            transparent 35%
        );
    pointer-events:none;
}

.project-gallery-item:hover img{
    transform:scale(1.025);
    filter:brightness(1.05);
}

.gallery-item-number,
.gallery-item-open{
    position:absolute;
    z-index:2;
    bottom:15px;
}

.gallery-item-number{
    left:16px;
    color:#fff;
    font-size:11px;
    font-weight:600;
}

.gallery-item-open{
    right:16px;
    color:var(--red);
    font-size:9px;
    font-weight:800;
    letter-spacing:.07em;
}


/* LIGHTBOX */
body.lightbox-open{
    overflow:hidden;
}

.phk-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:35px 95px;
    background:rgba(2,5,7,.97);
    backdrop-filter:blur(10px);
}

.phk-lightbox.open{
    display:flex;
}

.lightbox-stage{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lightbox-stage > img{
    display:block;
    max-width:100%;
    max-height:calc(100vh - 110px);
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
}

.lightbox-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center;
    padding-top:18px;
    color:#c4cace;
    font-size:10px;
}

.lightbox-caption span{
    color:var(--red);
    font-weight:800;
    letter-spacing:.1em;
}

.lightbox-caption strong{
    overflow:hidden;
    font-size:10px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lightbox-close{
    position:absolute;
    right:23px;
    top:20px;
    z-index:4;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border:1px solid #334047;
    background:#081014;
    color:#fff;
    font-size:28px;
    font-weight:300;
    cursor:pointer;
}

.lightbox-nav{
    position:absolute;
    top:50%;
    z-index:4;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border:1px solid #334047;
    background:#081014;
    color:#fff;
    font-size:22px;
    transform:translateY(-50%);
    cursor:pointer;
}

.lightbox-nav:hover,
.lightbox-close:hover{
    border-color:var(--red);
    color:var(--red);
}

.lightbox-prev{
    left:22px;
}

.lightbox-next{
    right:22px;
}


/* TABLET */
@media(max-width:950px){

    .project-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:240px;
    }

    .project-gallery-item.gallery-wide{
        grid-column:span 2;
        grid-row:span 1;
    }

}


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

    .project-gallery-section{
        padding:50px 0 58px;
    }

    .project-gallery-header{
        align-items:flex-end;
    }

    .gallery-count{
        min-width:78px;
        padding-left:16px;
    }

    .gallery-count strong{
        font-size:38px;
    }

    .project-gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:175px;
        gap:7px;
    }

    .project-gallery-item.gallery-wide{
        grid-column:span 2;
        grid-row:span 2;
    }

    .gallery-item-open{
        display:none;
    }

    .phk-lightbox{
        padding:65px 12px 70px;
    }

    .lightbox-stage > img{
        max-height:calc(100vh - 145px);
    }

    .lightbox-close{
        top:12px;
        right:12px;
        width:45px;
        height:45px;
    }

    .lightbox-nav{
        top:auto;
        bottom:13px;
        width:50px;
        height:44px;
        transform:none;
    }

    .lightbox-prev{
        left:12px;
    }

    .lightbox-next{
        right:12px;
    }

    .lightbox-caption{
        left:65px;
        right:65px;
        bottom:-53px;
        padding-top:0;
        justify-content:center;
    }

    .lightbox-caption strong{
        display:none;
    }

}
