/**
 * eLfilms.cz - Responsive styly pro reklamní bannery
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/splash-reklama-responsive.css
 * @version    3.0 - mobile stacked layout, foto nahoře + obsah dole
 * @datum      Duben 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 *
 * STYLUJE:
 * - Responsive úpravy bannerů pro tablety a mobily
 * - Mobile: stacked layout (foto nahoře, tmavý obsah dole)
 * - Ženy nikdy neoříznuté — foto má fixní výšku + object-position z DB
 *
 * POUŽÍVÁ:
 * - css/splash-reklama.css (desktop základna)
 *
 * NOTE:
 * - Mobilní breakpoint: max-width: 767px (vždy 767px!)
 * - Na mobilech se přepne na flex column layout
 */

/* ============================================
   TABLET LANDSCAPE (992px–1199px)
   ============================================ */

@media (min-width: 992px) and (max-width: 1199px) {

    .el-banner-splash {
        height: 360px;
    }

    .el-banner-promo {
        height: 420px;
    }

    .el-content {
        max-width: 500px;
        padding: 32px 48px;
    }

    .el-slogan {
        font-size: 90% !important;
    }

    .el-podtext {
        font-size: 90% !important;
    }

}

/* ============================================
   TABLET PORTRAIT (768px–991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {

    .el-banner-splash {
        height: 300px;
    }

    .el-banner-promo {
        height: 360px;
    }

    .el-content {
        max-width: 440px;
        padding: 28px 36px;
    }

    .el-slogan {
        font-size: 82% !important;
    }

    .el-podtext {
        font-size: 82% !important;
    }

    .el-btn {
        font-size: 13px;
        padding: 10px 26px;
    }

    .el-close {
        width: 34px;
        height: 34px;
    }

}

/* ============================================
   VŠECHNY MOBILY — STACKED LAYOUT (max 767px)
   Foto nahoře (pevná výška, object-position z DB)
   Obsah dole s tmavým pozadím — ženy NIKDY neoříznuté
   ============================================ */

@media (max-width: 767px) {

    /* Banner přepne na flex column */
    .el-banner {
        display: flex;
        flex-direction: column;
        height: auto !important;
    }

    /* Foto — pevná výška, object-position přijde z inline style na .el-banner-photo */
    .el-banner-photo {
        position: relative;
        width: 100%;
        height: 220px;
        flex-shrink: 0;
        object-fit: cover;
    }

    /* Ken Burns na mobilech vypnout — výkon */
    .el-banner-kb .el-banner-photo {
        animation: none;
    }

    /* Overlay skrýt — na mobilech ho nepotřebujeme (text je v bloku dole) */
    .el-overlay {
        display: none;
    }

    /* Na mobilech outer wrapper není potřeba — obsah je stacked */
    .el-content-outer {
        position: relative;
        max-width: 100%;
        left: auto;
        transform: none;
    }

    /* Obsah — relativně pozicovaný blok pod fotkou */
    .el-content {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        max-width: 100%;
        width: 100%;
        background: #071a2e;
        padding: 20px 20px 24px;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0;
    }

    /* Zavírací tlačítko přesunout na foto */
    .el-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 30px;
        height: 30px;
        z-index: 10;
    }

    .el-close-icon {
        font-size: 11px;
    }

    /* Logo */
    .el-logo {
        margin-bottom: 12px;
    }

    .el-logo img {
        max-height: 36px;
    }

    .el-logo-text {
        font-size: 15px;
    }

    /* Slogan */
    .el-slogan {
        font-size: 19px !important;
        margin-bottom: 10px;
        text-shadow: none;
    }

    /* Podtext */
    .el-podtext {
        font-size: 13px !important;
        margin-bottom: 16px;
        text-shadow: none;
        max-width: 100%;
    }

    /* Tlačítko */
    .el-btn {
        font-size: 13px;
        padding: 10px 24px;
    }

    /* Promo — trochu vyšší foto */
    .el-banner-promo .el-banner-photo {
        height: 240px;
    }

}

/* ============================================
   MALÉ MOBILY (max 359px)
   ============================================ */

@media (max-width: 359px) {

    .el-banner-photo {
        height: 180px;
    }

    .el-banner-promo .el-banner-photo {
        height: 200px;
    }

    .el-slogan {
        font-size: 16px !important;
    }

    .el-podtext {
        font-size: 12px !important;
    }

    .el-btn {
        font-size: 12px;
        padding: 9px 20px;
    }

    .el-content {
        padding: 16px 16px 20px;
    }

}

/* ============================================
   VĚTŠÍ MOBILY (480px–767px)
   ============================================ */

@media (min-width: 480px) and (max-width: 767px) {

    .el-banner-photo {
        height: 250px;
    }

    .el-banner-promo .el-banner-photo {
        height: 270px;
    }

    .el-slogan {
        font-size: 21px !important;
    }

    .el-podtext {
        font-size: 14px !important;
    }

}