/* ==========================================================================
   PHOTO MODAL (лайтбокс просмотра фото)
   ==========================================================================
*/

.photo-modal,
.photo-modal *,
.photo-modal *::before,
.photo-modal *::after{
    box-sizing:border-box;
}

.photo-modal{
    position:fixed;
    inset:0;

    z-index:2000;

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

    padding:32px;

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

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;
}

.photo-modal.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;

    transition:
        opacity .25s ease,
        visibility 0s linear 0s;
    z-index: 10200;
}

.photo-modal__box{
    position:relative;

    width:100%;
    max-width:1280px;
    max-height:100%;

    display:flex;
    flex-direction:column;

    gap:12px;

    background:transparent;

    transform:scale(.96);

    transition:transform .25s ease;
}

.photo-modal.is-open .photo-modal__box{
    transform:scale(1);
}

.photo-modal__title{
    display:none;
}

.photo-modal__main{
    position:relative;

    width:100%;
    aspect-ratio:1280/700;
    background: rgba(0, 0, 0, 0.7);

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

    overflow:hidden;
}

.photo-modal__image{
    display:block;

    width:100%;
    height:100%;

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

.photo-modal__navigation{
    width:100%;

    padding:8px 16px;

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

    gap:12px;

    background:#FFFFFF;
}

.photo-modal__thumb-arrow{
    flex:0 0 auto;

    width:32px;
    height:32px;

    margin:0;
    padding:0;

    border:0;

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

    background:transparent;
    color:#171717;

    cursor:pointer;

    transition:opacity .2s ease;
}

.photo-modal__thumb-arrow:hover{
    opacity:.6;
}

.photo-modal__thumb-arrow svg{
    display:block;

    width:20px;
    height:20px;
}

.photo-modal__thumbs-viewport{
    min-width:0;
    height:64px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.photo-modal__thumbs-viewport::-webkit-scrollbar{
    display:none;
}

.photo-modal__thumbs{
    min-width:max-content;
    height:64px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:0 4px;
}

.photo-modal__thumb{
    position:relative;

    width:56px;
    height:56px;

    flex:0 0 56px;

    margin:0;
    padding:0;

    border:0;

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

    background:#F5F5F5;

    cursor:pointer;
}

.photo-modal__thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.photo-modal__thumb::after{
    content:"";

    position:absolute;
    inset:-4px;

    border:1px solid transparent;

    pointer-events:none;

    transition:border-color .2s ease;
}

.photo-modal__thumb.is-active::after{
    border-color:#171717;
}

@media(max-width: 991px) {

    /* Модалка просмотра фото — на мобилке открывается на весь экран */
    .photo-modal{
        padding:0;
    }

    .photo-modal__box{
        width:100%;
        height:100%;
        height:100dvh;
        max-width:none;
        max-height:none;

        padding-top:72px;

        gap:0;

        background:#FFFFFF;
    }

    .photo-modal__title{
        display:block;

        position:absolute;
        top:16px;
        left:16px;
        right:56px;

        font-family:"Roboto Flex Custom", sans-serif;
        font-style:normal;
        font-weight:700;
        font-variation-settings:"wght" 700;
        font-size:16px;
        line-height:20px;

        color:#171717;

        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .photo-modal__close{
        position:absolute;
        top:16px;
        right:16px;
        transform:none;

        background:rgba(23,23,23,.06);
    }

    .photo-modal__main{
        flex:1 1 auto;

        width:100%;
        height:auto;
        aspect-ratio:auto;

        background:transparent;
    }

    .photo-modal__image{
        object-fit:cover;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .photo-modal__navigation{
        flex:0 0 auto;

        padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    }
}