/**
 * eLfilms.cz - Responzivní styly pro úvodní stránku
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/index-responsive.css
 * @version    4.1 - iPad Mini fix (768px → 767px)
 * @datum      Březen 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 *
 * Responzivní přizpůsobení pro různá zařízení.
 *
 * STYLUJE:
 * - Hero sekce, statistiky, video panel
 * - Novinky taby, grid filmů/seriálů/knih
 * - Carousely (slavné ženy, výroky, narozeniny)
 * - Sekce knihy, prohlizet, CTA
 *
 * POUŽÍVÁ:
 * - index.php
 *
 * DESIGN:
 * - Barvy: tmavě modrá (#0d1b2a, #0b334f–#1a4f72), zlatá (#EEB500)
 * - Max šířka obsahu: 1200px
 *
 * NOTE:
 * - Breakpoint mobilů je max-width: 767px
 *   (iPad Mini 768px dostane tabletový layout místo mobilního)
 * - Breakpointy: 360px, 480px, 600px, 767px, 992px, 1200px
 */

/* ============================================
   DESKTOPY & VELKÉ TABLETY (992px - 1200px)
   ============================================ */
@media (max-width: 1200px) {
    .container {
        padding: 0 20px;
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 30px 20px;
    }

    .hero-logo {
        max-width: 260px;
    }

    .hero-subtitle {
        font-size: 17px;
        margin-bottom: 40px;
    }

    .hero-stats {
        gap: 30px;
    }

    .stat-icon {
        font-size: 38px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 14px;
    }

    .hero-video-panel {
        width: 100%;
        max-width: 420px;
    }

    .hero-texts {
        font-size: 13px;
    }

    .tab-btn {
        padding: 16px 35px;
        font-size: 19px;
        max-width: 280px;
        flex: 1;
        white-space: nowrap;
    }

    .novinky-tabs {
        gap: 20px;
        padding: 0 20px;
    }

    .items-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
    }

    .item-poster {
        aspect-ratio: 2/3;
    }

    .carousel-track {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .carousel-item {
        flex: 0 0 calc(32% - 15px) !important;
        min-width: calc(32% - 15px) !important;
    }

    .zena-card {
        min-height: 340px;
    }

    .vyrok-card {
        min-height: 360px;
    }

    .narozeniny-card {
        min-height: 320px;
    }

    .zena-name,
    .vyrok-author-name {
        min-height: 3em;
        line-height: 1.5;
    }

    .narozeniny-name {
        word-spacing: 100vw;
    }

    .zena-name,
    .narozeniny-name {
        font-size: 20px;
    }

    .carousel-wrapper {
        max-width: calc(100% - 100px);
    }

    .narozeniny-cake i,
    .narozeniny-age-counter {
        font-size: 26px;
    }
}

/* ============================================
   TABLETY (768px - 992px)
   ============================================ */
@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }

    .hero-section {
        min-height: 600px;
    }

    .hero-logo {
        max-width: 280px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 40px;
    }

    .stat-icon {
        font-size: 42px;
    }

    .stat-number {
        font-size: 40px;
    }

    .stat-label {
        font-size: 15px;
    }

    .hero-video-panel {
        max-width: 450px;
    }

    .video-player {
        max-height: 250px;
    }

    .tab-btn {
        padding: 14px 30px !important;
        font-size: 17px !important;
        max-width: 260px !important;
        min-width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .novinky-tabs {
        gap: 10px !important;
        justify-content: center !important;
    }

    .items-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }

    .item-poster {
        aspect-ratio: 2/3;
    }

    .carousel-track {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .carousel-item {
        flex: 0 0 calc(32% - 15px) !important;
        min-width: calc(32% - 15px) !important;
    }

    .narozeniny-card {
        min-height: 320px;
    }

    .zena-name,
    .vyrok-author-name {
        min-height: 3em;
        line-height: 1.3;
        word-spacing: 100vw;
        display: block;
    }

    .zena-profession {
        min-height: 3.2em;
        line-height: 1.4;
        display: block;
    }

    .zena-card {
        min-height: 380px !important;
    }

    .vyrok-card {
        min-height: 400px !important;
    }

    .narozeniny-name {
        word-spacing: 100vw;
    }

    .carousel-wrapper {
        max-width: calc(100% - 100px);
    }

    .knihy-content {
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 40px;
    }

    .knihy-image {
        order: 0;
    }

    .knihy-image img {
        max-width: 85%;
    }

    .section-title,
    .section-title-white {
        font-size: 38px;
    }

    .zena-name,
    .narozeniny-name {
        font-size: 18px;
    }

    .narozeniny-cake i,
    .narozeniny-age-counter {
        font-size: 24px;
    }
}

/* ============================================
   MOBILY (max 767px) — iPad Mini (768px) dostane tabletový layout
   ============================================ */
@media (max-width: 767px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-left {
        align-items: center;
    }

    .hero-right {
        align-items: center;
        min-height: auto !important;
        justify-content: flex-start !important;
        gap: 8px;
    }

    .hero-texts {
        text-align: center;
        margin-bottom: 8px !important;
        margin-top: 12px !important;
    }

    .hero-video-panel {
        max-width: 500px;
        margin-top: 8px !important;
    }

    .hero-background {
        height: 78%;
    }

    .hero-bottom-bg {
        top: 78%;
    }

    .container {
        padding: 0 15px !important;
    }

    .hero-section {
        min-height: 520px !important;
        padding-top: 60px;
    }

    .hero-logo {
        max-width: 220px !important;
    }

    .hero-logo-container {
        margin-bottom: 8px !important;
        margin-top: 10px !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }

    .hero-stats {
        gap: 18px !important;
        flex-wrap: wrap;
        margin-bottom: 0 !important;
    }

    .stat-icon {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }

    .stat-number {
        font-size: 32px !important;
    }

    .stat-label {
        font-size: 13px !important;
        margin-top: 4px !important;
    }

    .hero-video-panel {
        max-width: 100%;
        padding: 12px !important;
        width: 100% !important;
    }

    .video-player {
        max-height: 200px !important;
    }

    .play-button {
        width: 55px !important;
        height: 55px !important;
    }

    .play-button i {
        font-size: 24px !important;
    }

    .section-title,
    .section-title-white {
        font-size: 28px !important;
        margin-bottom: 30px;
    }

    .section-subtitle {
        font-size: 18px !important;
        margin-bottom: 40px;
    }

    .novinky-tabs {
        flex-direction: column;
        gap: 12px;
    }

    .tab-btn {
        padding: 14px 40px !important;
        font-size: 18px !important;
        min-width: 280px !important;
        width: 100%;
        max-width: 350px;
    }

    .items-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        padding: 0 15px;
        justify-items: center !important;
        display: grid !important;
    }

    .item-card {
        max-width: 250px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .carousel-wrapper {
        max-width: calc(100% - 90px) !important;
    }

    .carousel-item,
    .vyroky-carousel .carousel-item,
    .narozeniny-carousel .carousel-item {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .carousel-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .carousel-container {
        gap: 15px !important;
    }

    .carousel-track {
        gap: 15px !important;
    }

    .carousel-item {
        margin: 0 !important;
    }

    .knihy-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }

    .knihy-image {
        order: -1;
    }

    .knihy-text h2 {
        font-size: 28px !important;
    }

    .knihy-subtitle,
    .knihy-description {
        font-size: 15px !important;
    }

    .vyrok-card {
        padding: 25px 18px !important;
        min-height: 320px;
    }

    .vyrok-photo {
        width: 110px !important;
        height: 110px !important;
    }

    .vyrok-author-name {
        font-size: 20px !important;
    }

    .vyrok-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .carousel-note {
        font-size: 12px !important;
        margin-top: 30px !important;
    }

    .section-cta h3 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .cta-number {
        font-size: 36px !important;
    }

    .cta-label {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .zena-card {
        padding: 30px 20px 25px !important;
        min-height: 300px !important;
    }

    .narozeniny-card {
        padding: 130px 20px 8px !important;
        min-height: auto !important;
    }

    .zena-photo {
        width: 120px !important;
        height: 120px !important;
    }

    .narozeniny-card img {
        width: 110px !important;
        height: 110px !important;
        top: 10px !important;
    }

    .narozeniny-photo-placeholder {
        width: 110px !important;
        height: 110px !important;
        top: 10px !important;
    }

    .narozeniny-carousel .carousel-track {
        gap: 0 !important;
    }

    .narozeniny-carousel .carousel-item {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .narozeniny-header {
        margin-bottom: 90px !important;
    }

    .zena-name {
        font-size: 18px !important;
        min-height: 44px !important;
        line-height: 1.2 !important;
        word-spacing: 100vw;
    }

    .narozeniny-name {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
        word-spacing: 100vw;
    }

    .zena-profession {
        font-size: 12px !important;
        min-height: 32px !important;
    }

    .zena-country {
        font-size: 12px !important;
    }

    .narozeniny-date {
        font-size: 12px !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 0 !important;
    }

    .narozeniny-cake i,
    .narozeniny-age-counter {
        font-size: 28px !important;
    }

    .narozeniny-cake {
        margin-bottom: 4px !important;
    }

    .narozeniny-age-label {
        font-size: 20px !important;
    }

    .narozeniny-month-badge {
        width: 90px !important;
        height: 90px !important;
        font-size: 16px !important;
        top: 70px !important;
        right: 20px !important;
    }

    .btn-cta,
    .btn-kalendar,
    .knihy-btn {
        padding: 12px 35px !important;
        font-size: 15px !important;
    }

    body {
        overflow-x: hidden !important;
    }

    .page-container,
    .hero-section,
    .novinky-section,
    .prohlizet-section,
    .slavne-zeny-section,
    .knihy-section,
    .vyroky-section,
    .narozeniny-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ============================================
   MENŠÍ MOBILY (max 600px)
   ============================================ */
@media (max-width: 600px) {
    .hero-background {
        height: 82%;
    }

    .hero-bottom-bg {
        top: 82%;
    }

    .hero-section {
        min-height: 580px !important;
    }
}

/* ============================================
   MALÉ MOBILY (max 480px)
   ============================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 10px !important;
    }

    .hero-background {
        height: 85%;
    }

    .hero-bottom-bg {
        top: 85%;
    }

    .hero-section {
        min-height: 620px !important;
        padding-top: 50px;
    }

    .hero-logo {
        max-width: 180px !important;
    }

    .hero-logo-container {
        margin-bottom: 8px !important;
        margin-top: 10px !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }

    .hero-stats {
        gap: 15px !important;
        flex-direction: row !important;
        justify-content: space-around !important;
    }

    .stat-item {
        width: auto !important;
    }

    .stat-number {
        font-size: 26px !important;
    }

    .stat-icon {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }

    .stat-label {
        font-size: 11px !important;
    }

    .hero-texts {
        margin-bottom: 8px !important;
        margin-top: 10px !important;
    }

    .hero-video-panel {
        padding: 10px !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    .video-player {
        max-height: 180px !important;
    }

    .play-button {
        width: 50px !important;
        height: 50px !important;
    }

    .play-button i {
        font-size: 20px !important;
    }

    .video-caption {
        font-size: 11px !important;
        margin-top: 8px !important;
    }

    .section-title,
    .section-title-white {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }

    .section-subtitle {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }

    .items-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 15px !important;
        justify-items: center !important;
        display: grid !important;
    }

    .item-card {
        max-width: 240px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .tab-btn {
        padding: 12px 25px !important;
        font-size: 16px !important;
        max-width: 100% !important;
        min-width: 240px !important;
    }

    .novinky-tabs {
        gap: 10px !important;
    }

    .knihy-text h2 {
        font-size: 24px !important;
    }

    .knihy-text p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .knihy-btn {
        padding: 10px 25px !important;
        font-size: 14px !important;
    }

    .carousel-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .carousel-container {
        gap: 12px !important;
    }

    .carousel-wrapper {
        max-width: calc(100% - 84px) !important;
    }

    .vyroky-section {
        padding: 50px 0 !important;
    }

    .vyrok-card {
        padding: 20px 15px !important;
        min-height: 300px;
    }

    .vyrok-photo {
        width: 100px !important;
        height: 100px !important;
    }

    .vyrok-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .vyrok-author-name {
        font-size: 18px !important;
    }

    .carousel-note {
        font-size: 11px !important;
        margin-top: 25px !important;
    }

    .section-cta h3 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .cta-number {
        font-size: 32px !important;
    }

    .cta-label {
        font-size: 13px !important;
        margin-bottom: 18px !important;
    }

    .zena-photo {
        width: 110px !important;
        height: 110px !important;
    }

    .narozeniny-card img {
        width: 100px !important;
        height: 100px !important;
        top: 10px !important;
    }

    .narozeniny-photo-placeholder {
        width: 100px !important;
        height: 100px !important;
        top: 10px !important;
    }

    .narozeniny-card {
        padding: 120px 15px 8px !important;
        min-height: auto !important;
    }

    .zena-name {
        font-size: 16px !important;
        min-height: 40px !important;
        line-height: 1.2 !important;
        word-spacing: 100vw;
    }

    .narozeniny-name {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        word-spacing: 100vw;
    }

    .zena-profession {
        font-size: 11px !important;
        min-height: 30px !important;
    }

    .zena-country {
        font-size: 11px !important;
    }

    .narozeniny-date {
        font-size: 11px !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 0 !important;
    }

    .narozeniny-cake i,
    .narozeniny-age-counter {
        font-size: 26px !important;
    }

    .narozeniny-cake {
        margin-bottom: 4px !important;
    }

    .narozeniny-age-label {
        font-size: 18px !important;
    }

    .narozeniny-month-badge {
        width: 80px !important;
        height: 80px !important;
        font-size: 14px !important;
        top: 60px !important;
        right: 15px !important;
    }

    .btn-cta,
    .btn-kalendar {
        padding: 10px 30px !important;
        font-size: 14px !important;
    }

    .prohlizet-content h2 {
        font-size: 26px !important;
    }

    .prohlizet-description {
        font-size: 14px !important;
    }
}

/* ============================================
   VELMI MALÉ MOBILY (max 360px)
   ============================================ */
@media (max-width: 360px) {
    .container {
        padding: 0 8px;
    }

    .hero-background {
        height: 88%;
    }

    .hero-bottom-bg {
        top: 88%;
    }

    .hero-section {
        min-height: 640px !important;
    }

    .hero-logo {
        max-width: 160px !important;
    }

    .hero-subtitle {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }

    .stat-number {
        font-size: 22px !important;
    }

    .stat-icon {
        font-size: 22px !important;
    }

    .stat-label {
        font-size: 10px !important;
    }

    .hero-stats {
        gap: 12px;
    }

    .video-player {
        max-height: 160px !important;
    }

    .play-button {
        width: 45px !important;
        height: 45px !important;
    }

    .play-button i {
        font-size: 18px !important;
    }

    .section-title,
    .section-title-white {
        font-size: 22px !important;
    }

    .section-subtitle {
        font-size: 15px !important;
    }

    .tab-btn {
        padding: 10px 20px !important;
        font-size: 15px !important;
        min-width: 220px !important;
    }

    .item-card {
        max-width: 220px !important;
    }

    .video-caption {
        font-size: 10px !important;
    }

    .carousel-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .carousel-container {
        gap: 10px !important;
    }

    .carousel-wrapper {
        max-width: calc(100% - 74px) !important;
    }

    .carousel-note {
        font-size: 10px !important;
    }

    .section-cta h3 {
        font-size: 16px !important;
    }

    .cta-number {
        font-size: 28px !important;
    }

    .cta-label {
        font-size: 12px !important;
    }

    .zena-photo,
    .vyrok-photo {
        width: 100px !important;
        height: 100px !important;
    }

    .vyrok-text {
        font-size: 11px !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTACE - TABLET NA ŠÍŘKU
   ============================================ */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    .hero-section {
        min-height: 500px !important;
    }

    .hero-background {
        height: 70%;
    }

    .hero-bottom-bg {
        top: 70%;
    }

    .hero-stats {
        gap: 20px !important;
    }

    .stat-icon {
        font-size: 28px !important;
    }

    .stat-number {
        font-size: 28px !important;
    }

    .video-player {
        max-height: 180px !important;
    }

    .carousel-container {
        justify-content: center !important;
    }

    .carousel-wrapper {
        max-width: 65% !important;
        margin: 0 auto !important;
    }

    .carousel-track {
        padding-left: 15px !important;
        padding-right: 15px !important;
        justify-content: flex-start !important;
    }

    .carousel-item {
        flex: 0 0 31% !important;
        min-width: 31% !important;
        max-width: 31% !important;
    }

    .zena-name,
    .vyrok-author-name {
        word-spacing: 999px !important;
        line-height: 1.3 !important;
        min-height: 3em !important;
    }

    .zena-profession {
        min-height: 3.2em !important;
    }

    .zena-card {
        min-height: 380px !important;
    }

    .vyrok-card {
        min-height: 400px !important;
    }

    .narozeniny-card {
        min-height: 340px !important;
    }
}