/* =========================================================
   ЖЕКЕ ӨЛЕҢ БЕТІ — HERO/BANNER IMAGE COVER FIX
   Файл: assets/css/poem-hero-cover-fix.css
   ========================================================= */

/*
   Мақсаты:
   1) poem.php бетінің жоғарғы суреті сығылып кетпесін.
   2) Сурет пропорциясы сақталсын.
   3) Баннер background-image болса да, img болса да дұрыс көрінсін.
   4) Тек CSS fix. PHP/админ логикасына тимейді.
*/

/* Негізгі hero блок */
.poem-hero,
.poem-detail-hero,
.hero-poem,
.poem-header-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 360px !important;
    height: 360px !important;
    display: flex !important;
    align-items: center !important;

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

/* Егер hero ішінде нақты <img> қолданылса */
.poem-hero > img,
.poem-detail-hero > img,
.hero-poem > img,
.poem-header-hero > img,
.poem-hero .hero-image,
.poem-detail-hero .hero-image,
.poem-hero .banner-image,
.poem-detail-hero .banner-image,
.poem-hero .hero-media img,
.poem-detail-hero .hero-media img,
.poem-header-hero .hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Ашық overlay, мәтін анық көрінсін */
.poem-hero::before,
.poem-detail-hero::before,
.hero-poem::before,
.poem-header-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.85) 42%,
        rgba(255, 249, 240, 0.22) 100%
    );
}

/* Hero контенті суреттің үстінде тұрсын */
.poem-hero .container,
.poem-detail-hero .container,
.hero-poem .container,
.poem-header-hero .container,
.poem-hero .hero-content,
.poem-detail-hero .hero-content,
.hero-poem .hero-content,
.poem-header-hero .hero-content,
.poem-hero .breadcrumbs,
.poem-detail-hero .breadcrumbs,
.poem-hero h1,
.poem-detail-hero h1,
.poem-hero p,
.poem-detail-hero p {
    position: relative !important;
    z-index: 3 !important;
}

/* Егер hero ішінде бөлек сурет бағаны болса */
.poem-hero .hero-art,
.poem-detail-hero .hero-art,
.hero-poem .hero-art,
.poem-header-hero .hero-art {
    height: 100% !important;
}

.poem-hero .hero-art img,
.poem-detail-hero .hero-art img,
.hero-poem .hero-art img,
.poem-header-hero .hero-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Мобильді нұсқа */
@media (max-width: 900px) {
    .poem-hero,
    .poem-detail-hero,
    .hero-poem,
    .poem-header-hero {
        min-height: 280px !important;
        height: 280px !important;
        background-position: center center !important;
    }
}

@media (max-width: 640px) {
    .poem-hero,
    .poem-detail-hero,
    .hero-poem,
    .poem-header-hero {
        min-height: 230px !important;
        height: 230px !important;
    }
}