/* =========================================
   DekoKZ Media Slider
   Version: 1.2
========================================= */


/* =========================================
   Основной контейнер
   Фоном и внешними отступами управляет
   родительская секция страницы
========================================= */

.dkz-media-slider{
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;

    background:transparent;
    border:0;
}


/* =========================================
   Заголовок
========================================= */

.dkz-media-slider__head{
    max-width:980px;
    margin:0 auto 30px;
    text-align:center;
}

.dkz-media-slider__title{
    margin:0 0 14px;
    font-size:32px;
    line-height:1.25;
    font-weight:700;
}

.dkz-media-slider__subtitle{
    max-width:760px;
    margin:0 auto;
    font-size:16px;
    line-height:1.7;
    color:#666;
}


/* =========================================
   Тело слайдера
========================================= */

.dkz-media-slider__body{
    display:grid;
    grid-template-columns:44px minmax(0, 1fr) 44px;
    gap:18px;
    align-items:center;

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

    margin:0 auto;
    padding:0;

    box-sizing:border-box;
    background:transparent;
}


/* =========================================
   Viewport / Track
========================================= */

.dkz-media-slider__viewport{
    width:100%;
    overflow:hidden;
    background:transparent;
}

.dkz-media-slider__track{
    display:flex;
    align-items:stretch;

    gap:22px;

    margin:0;
    padding:0;

    transform:translate3d(0,0,0);
    transition:transform .32s ease;
    will-change:transform;
}


/* =========================================
   Слайды
========================================= */

.dkz-media-slider__slide{
    flex:0 0 calc((100% - 44px) / 3);
    min-width:0;
    margin:0;
    padding:0;
}


/* =========================================
   Карточка фотографии

   По умолчанию белая.
   Позже сможет автоматически брать
   противоположный фон секции через
   --dkz-card-bg.
========================================= */

.dkz-media-slider__card{
    position:relative;

    background:var(--dkz-card-bg, #fff);

    overflow:hidden;
}


/* =========================================
   Изображение
========================================= */

.dkz-media-slider__image-link{
    display:block;

    width:100%;
    aspect-ratio:1 / 1;

    background:var(--dkz-card-bg, #fff);
}

.dkz-media-slider__image{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================
   Badge
========================================= */

.dkz-media-slider__badge{
    position:absolute;

    left:14px;
    top:14px;

    z-index:2;

    display:inline-flex;
    align-items:center;

    max-width:calc(100% - 28px);

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.92);
    color:#333;

    font-size:12px;
    line-height:1.2;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
}


/* =========================================
   Подпись
========================================= */

.dkz-media-slider__caption{
    display:-webkit-box;

    margin:12px 0 0;
    min-height:44px;

    font-size:15px;
    line-height:1.45;

    color:#555;
    text-align:center;

    overflow:hidden;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* =========================================
   Стрелки
========================================= */

.dkz-media-slider__arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    padding:0;

    border:1px solid #e2e2e2;
    border-radius:50%;

    background:#fff;
    color:#333;

    font-size:18px;
    line-height:1;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        opacity .2s ease;
}

.dkz-media-slider__arrow:hover{
    border-color:#cfcfcf;
    background:#faf8fb;
}

.dkz-media-slider__arrow:disabled{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}


/* =========================================
   Планшет
========================================= */

@media (max-width:1100px){

    .dkz-media-slider{
        padding:0;
    }

    .dkz-media-slider__slide{
        flex-basis:calc((100% - 22px) / 2);
    }

}


/* =========================================
   Телефон
========================================= */

@media (max-width:768px){

    .dkz-media-slider{
        padding:0;
    }

    .dkz-media-slider__head{
        margin:0 0 24px;
        text-align:left;
    }

    .dkz-media-slider__title{
        font-size:26px;
    }

    .dkz-media-slider__subtitle{
        margin:0;
        font-size:15px;
    }

    .dkz-media-slider__body{
        grid-template-columns:36px minmax(0, 1fr) 36px;
        gap:10px;
    }

    .dkz-media-slider__track{
        gap:16px;
    }

    .dkz-media-slider__slide{
        flex-basis:100%;
    }

    .dkz-media-slider__arrow{
        width:36px;
        height:36px;

        font-size:15px;
    }

    .dkz-media-slider__caption{
        min-height:40px;
        font-size:14px;
    }

}


/* =========================================
   DekoKZ Media Lightbox v1.1
========================================= */

.dkz-media-lightbox{
    position:fixed !important;
    inset:0 !important;

    z-index:99 !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;

    padding:34px !important;

    box-sizing:border-box !important;

    background:rgba(0,0,0,.86) !important;
}

.dkz-media-lightbox.is-open{
    display:flex !important;
}

.dkz-media-lightbox-open{
    overflow:hidden !important;
}

.dkz-media-lightbox__inner{
    position:relative;

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

    max-width:96vw;
    max-height:96vh;
}

.dkz-media-lightbox__figure{
    margin:0;
    text-align:center;
}

.dkz-media-lightbox__image{
    display:block;

    max-width:92vw;
    max-height:84vh;

    margin:0 auto;

    object-fit:contain;

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

    transition:
        opacity .22s ease,
        transform .22s ease;
}

.dkz-media-lightbox__image.is-loaded{
    opacity:1;
    transform:scale(1);
}

.dkz-media-lightbox__caption{
    max-width:900px;

    margin:16px auto 0;

    color:#fff;

    font-size:18px;
    line-height:1.45;
    font-weight:600;

    text-align:center;

    text-shadow:0 1px 3px rgba(0,0,0,.55);
}

.dkz-media-lightbox__counter{
    margin:8px auto 0;

    color:rgba(255,255,255,.75);

    font-size:14px;
    line-height:1.3;

    text-align:center;
}

.dkz-media-lightbox__close{
    position:absolute;

    top:-18px;
    right:-18px;

    z-index:3;

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

    width:42px;
    height:42px;

    padding:0;

    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;

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

    font-size:34px;
    line-height:1;

    cursor:pointer;
}

.dkz-media-lightbox__arrow{
    position:absolute;

    top:50%;

    z-index:3;

    transform:translateY(-50%);

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

    width:52px;
    height:52px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;

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

    font-size:20px;

    cursor:pointer;
}

.dkz-media-lightbox__arrow--prev{
    left:-70px;
}

.dkz-media-lightbox__arrow--next{
    right:-70px;
}

.dkz-media-lightbox__arrow:disabled{
    opacity:.3;
    cursor:default;
}


/* =========================================
   Lightbox: телефон
========================================= */

@media (max-width:768px){

    .dkz-media-lightbox{
        padding:50px 16px 28px !important;
    }

    .dkz-media-lightbox__image{
        max-width:94vw;
        max-height:78vh;
    }

    .dkz-media-lightbox__close{
        top:-42px;
        right:0;

        width:38px;
        height:38px;

        font-size:30px;
    }

    .dkz-media-lightbox__arrow{
        width:42px;
        height:42px;

        font-size:16px;
    }

    .dkz-media-lightbox__arrow--prev{
        left:8px;
    }

    .dkz-media-lightbox__arrow--next{
        right:8px;
    }

    .dkz-media-lightbox__caption{
        font-size:15px;
    }

}