/* ==========================================================
   K2S RELATED WIDGET
   ========================================================== */

/* ==========================================================
   Контейнер виджета
   ========================================================== */

.k2s-related-widget{

    overflow:hidden;

    pointer-events:none;
    
    z-index:2;

}

/* ==========================================
   Обычное видео
   ========================================== */

.overlay-widget{

    position:absolute;

    left:0;
    right:0;

    bottom:0;

    height:clamp(95px,16vw,170px);

    z-index:2;

}

/* ==========================================
   Удалённое видео
   ========================================== */

.standalone-widget{

    display:block;

    position:relative;

    width:100%;

    height:clamp(95px,16vw,170px);

    background:#000;

}

/* ==========================================================
   Лента
   ========================================================== */

#related-strip{

    display:flex;

    align-items:stretch;

				flex-wrap:nowrap;

				white-space:nowrap;

    height:100%;

    gap:clamp(3px,.45vw,6px);

    transform:translate3d(0,0,0);

    will-change:transform;

}

/* ==========================================================
   Карточка
   ========================================================== */

#related-strip .thumb{

    flex:0 0 clamp(105px,16vw,180px);

				height:100%;

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:4px;

    text-decoration:none;

    pointer-events:auto;

    background:#111;

}

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

#related-strip .thumb img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .25s ease,
        filter .25s ease;

    filter:brightness(.92);

}

#related-strip .thumb:hover img{

    transform:scale(1.04);

    filter:brightness(1);

}

/* ==========================================================
   Облачко
   ========================================================== */

#related-strip .cloud{

    position:absolute;

    top:clamp(0px,.35vw,4px);
    right:clamp(2px,.6vw,6px);

    width:clamp(16px,2vw,28px);
    height:clamp(16px,2vw,28px);

    background:
        url("https://k2s.cc/static/media/cloud.svg")
        center center / contain
        no-repeat;

    opacity:.35;

    transition:opacity .2s ease;

}

#related-strip .thumb:hover .cloud{

    opacity:1;

}

/* ==========================================================
   Затемнение
   ========================================================== */

.k2s-related-widget::before,
.k2s-related-widget::after{
    display:none;
}

.k2s-related-widget::before{

    left:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.90),
        rgba(0,0,0,0)
    );

}

.k2s-related-widget::after{

    right:0;

    background:linear-gradient(
        to left,
        rgba(0,0,0,.90),
        rgba(0,0,0,0)
    );

}

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

@media (max-width:768px){

    .k2s-related-widget{

        height:clamp(70px,24vw,105px);

    }

    .k2s-related-title{

        top:2px;

        height:14px;
        line-height:14px;

        font-size:10px;

    }

}

/* ==========================================================
   Очень маленькие экраны
   ========================================================== */

@media (max-width:480px){

    .k2s-related-title{

        font-size:9px;

    }

    #related-strip{

        gap:2px;

    }

}