/**
 * eLfilms.cz - Responzivní styly pro stránku Seznam epizod seriálu
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/serial-epizody-responsive.css
 * @version    1.0 - Initial Release
 * @datum      Březen 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 *
 * Responzivní přizpůsobení pro různá zařízení.
 *
 * STYLUJE:
 * - Tablet portrait 768px - 991px
 * - Mobil do 767px (vertikální karty epizod, zmenšené hero)
 * - Velmi malé mobily do 359px
 *
 * POUŽÍVÁ:
 * - serial-epizody.php (parent stránka)
 *
 * DESIGN:
 * - Barvy: tmavě modrá (#0d1b2a, #0b334f–#1a4f72), zlatá (#EEB500)
 * - Max šířka obsahu: 1200px
 *
 * NOTE:
 * - Mobilní breakpoint: max-width: 767px (iPad Mini 768px dostane tabletový layout)
 */

/* ============================================
   TABLET PORTRAIT (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {

    .episode-image {
        flex: 0 0 220px;
        min-height: 140px;
    }

    .episode-title {
        font-size: 18px;
    }

    .episode-description {
        font-size: 15px;
    }

    .season-info-title {
        font-size: 24px;
    }

    .season-info-text {
        font-size: 15px;
    }

    .btn-trailer {
        padding: 15px 28px;
        font-size: 15px;
    }

    .episodes-title {
        font-size: 26px;
    }
}

/* ============================================
   VŠECHNY MOBILY (do 767px)
   ============================================ */
@media (max-width: 767px) {

    /* HERO */
    .hero-section {
        height: 25vh;
        min-height: 150px;
    }

    /* SEKCE SÉRIE */
    .season-info-section {
        padding: 30px 20px;
    }

    .season-info-wrapper {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .season-info-title {
        font-size: 22px;
    }

    .season-info-text {
        font-size: 15px;
        text-indent: 0;
    }

    .btn-trailer {
        padding: 15px 30px;
        font-size: 14px;
        gap: 12px;
    }

    /* SEKCE EPIZOD */
    .episodes-section {
        padding: 25px 0 50px;
    }

    .episodes-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 25px;
        gap: 15px;
    }

    .episodes-title {
        font-size: 22px;
    }

    /* KARTA EPIZODY - vertikální layout */
    .episode-item {
        flex-direction: column;
        gap: 0;
    }

    .episode-image {
        flex: none;
        width: 100%;
        height: 180px;
    }

    .episode-content {
        padding: 15px;
    }

    .episode-header {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 8px;
    }

    .episode-title {
        font-size: 17px;
    }

    .episode-date {
        font-size: 13px;
        white-space: normal;
    }

    .episode-description {
        font-size: 14px;
        text-indent: 0;
    }

    /* TITULKY - horizontální layout na mobilu */
    .episode-subtitles {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        padding: 12px 15px;
        min-width: auto;
    }

    .download-count {
        margin-top: 0;
    }

    /* MODAL */
    .modal-content {
        margin: 10% auto;
        padding: 20px;
        width: 98%;
    }

    .modal-title {
        font-size: 17px;
        margin-bottom: 15px;
    }

    .video-title {
        font-size: 17px;
    }

    .subtitle-item-download {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================
   VELMI MALÉ MOBILY (do 359px)
   ============================================ */
@media (max-width: 359px) {

    .episode-title {
        font-size: 15px;
    }

    .season-info-title {
        font-size: 20px;
    }

    .btn-trailer {
        padding: 12px 20px;
        font-size: 13px;
    }

    .episodes-title {
        font-size: 19px;
    }
}