/* =========================================================
   ВИДЕОЛАР БЕТІ — БАННЕР СУРЕТІН СОЗЫП, ДҰРЫС КӨРСЕТУ FIX
   Файл: assets/css/videos-hero-cover-fix.css
   ========================================================= */

/*
   Мәселе:
   Видео бетінің жоғары суреті кішкентай болып, сығылып/қысылып көрініп тұр.

   Шешім:
   Суретті <img> емес, фон сияқты cover режимде көрсетеміз.
   Яғни сурет блокты толық жауып тұрады, пропорциясы бұзылмайды.
*/

.videos-hero{
    min-height: 300px !important;
    height: 300px !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Егер videos.php ішінде сурет <img> болып шығып кетсе, оны фондай созамыз */
.videos-hero img,
.videos-hero .hero-image,
.videos-hero .banner-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Видео бетінің мәтіні суреттің үстінде дұрыс тұрсын */
.videos-hero .container,
.videos-hero .videos-hero-inner{
    position: relative !important;
    z-index: 2 !important;
}

/* Суреттің үстіне жұмсақ ашық қабат */
.videos-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 249, 240, 0.96) 0%,
            rgba(255, 249, 240, 0.82) 42%,
            rgba(255, 249, 240, 0.20) 100%
        );
    z-index: 1;
    pointer-events: none;
}

/* ::before жұмыс істеуі үшін */
.videos-hero{
    position: relative !important;
}

/* Егер бұрынғы CSS ішінде қосымша фон қабаты болса, мәтін көрініп тұрсын */
.videos-hero h1,
.videos-hero p{
    position: relative !important;
    z-index: 3 !important;
}

/* Телефонда тым биік болып кетпеуі үшін */
@media(max-width: 700px){
    .videos-hero{
        min-height: 240px !important;
        height: 240px !important;
        background-position: center center !important;
    }
}