/* =========================================================
   АУДИОЛАР БЕТІ — БАННЕР ЖӘНЕ КАРТОЧКА СУРЕТТЕРІН ДҰРЫС КӨРСЕТУ FIX
   Файл: assets/css/audios-hero-cover-fix.css
   ========================================================= */

/*
   Мақсаты:
   1) Аудио бетінің жоғары баннер суреті кішкентай/сығылып қалмасын.
   2) Аудио карточкадағы сурет те пропорциясын бұзбай шықсын.
   3) Тек CSS. Админге, базаға, PHP логикасына тимейді.
*/

/* ЖОҒАРҒЫ БАННЕР */
.audios-hero{
    min-height: 300px !important;
    height: 300px !important;

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

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

/* Егер аудио бетінде баннер суреті <img> болып шықса */
.audios-hero img,
.audios-hero .hero-image,
.audios-hero .banner-image{
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
}

/* Баннер үстіндегі жұмсақ ашық қабат */
.audios-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    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%
        );
}

/* Мәтін суреттің үстінде дұрыс көрінсін */
.audios-hero .container,
.audios-hero .audios-hero-inner,
.audios-hero h1,
.audios-hero p{
    position: relative !important;
    z-index: 3 !important;
}

/* АУДИО КАРТОЧКАДАҒЫ СУРЕТ */
.audio-card .audio-cover,
.audio-cover{
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
}

/* Егер карточка суреті wrapper ішінде img болып тұрса */
.audio-cover img,
.audio-card .audio-cover img{
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
}

/* fallback белгіше бұзылмасын */
.audio-cover.fallback{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: initial !important;
}

/* Телефонда баннер биіктігін азайту */
@media(max-width: 700px){
    .audios-hero{
        min-height: 240px !important;
        height: 240px !important;
        background-position: center center !important;
    }

    .audio-card .audio-cover,
    .audio-cover{
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        border-radius: 16px !important;
    }
}