/**
 * eLfilms - Centrální responzivní styly
 * Soubor: css/responsive.css
 * 
 * FOUNDATION pro všechny stránky
 * Breakpointy: 360px, 480px, 768px, 992px, 1200px, 1280px
 * Mobile First přístup
 */

/* ============================================
   BASE STYLY (320px+) - VELMI MALÉ MOBILY
   ============================================ */

html {
    font-size: 14px;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.container {
    max-width: 100%;
    padding: 0 10px;
    margin: 0 auto;
}

/* Touch-friendly - minimální velikosti */
button:not(.hamburger),
a.btn,
.button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Základní typografie */
h1 { font-size: 24px; line-height: 1.2; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.4; }
h4 { font-size: 16px; line-height: 1.4; }
h5 { font-size: 15px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; }

p { font-size: 14px; line-height: 1.6; }

/* ============================================
   VELMI MALÉ MOBILY (360px+)
   ============================================ */
@media (min-width: 360px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 12px;
    }
    
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 19px; }
}

/* ============================================
   MALÉ MOBILY LANDSCAPE (480px+)
   ============================================ */
@media (min-width: 480px) {
    html {
        font-size: 15px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 17px; }
    
    p { font-size: 15px; }
}

/* ============================================
   TABLET PORTRAIT (768px+)
   ============================================ */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
    .container {
        padding: 0 20px;
        max-width: 720px;
    }
    
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    h5 { font-size: 17px; }
    
    p { font-size: 16px; }
}

/* ============================================
   TABLET LANDSCAPE (992px+)
   ============================================ */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    h1 { font-size: 42px; }
    h2 { font-size: 32px; }
    h3 { font-size: 26px; }
}

/* ============================================
   MALÉ DESKTOPY (1200px+)
   ============================================ */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
    h3 { font-size: 28px; }
}

/* ============================================
   VELKÉ DESKTOPY (1280px+)
   ============================================ */
@media (min-width: 1280px) {
    .container {
        max-width: 1400px;
    }
    
    h1 { font-size: 52px; }
    h2 { font-size: 38px; }
    h3 { font-size: 30px; }
}

/* ============================================
   UTILITY TŘÍDY - ZOBRAZENÍ/SKRYTÍ
   ============================================ */

/* Skrýt na mobilech */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Skrýt na tabletech */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Skrýt na desktopech */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Zobrazit pouze na mobilech */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Zobrazit pouze na tabletech */
@media (max-width: 767px), (min-width: 992px) {
    .show-tablet-only {
        display: none !important;
    }
}

/* Zobrazit pouze na desktopech */
@media (max-width: 991px) {
    .show-desktop-only {
        display: none !important;
    }
}

/* ============================================
   UTILITY TŘÍDY - SPACING
   ============================================ */

/* Text alignment - responsive */
@media (max-width: 767px) {
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
    .text-right-mobile { text-align: right !important; }
}

@media (min-width: 768px) {
    .text-center-tablet { text-align: center !important; }
    .text-left-tablet { text-align: left !important; }
    .text-right-tablet { text-align: right !important; }
}

@media (min-width: 992px) {
    .text-center-desktop { text-align: center !important; }
    .text-left-desktop { text-align: left !important; }
    .text-right-desktop { text-align: right !important; }
}

/* ============================================
   UTILITY TŘÍDY - FLEX & GRID
   ============================================ */

/* Responsive flex direction */
@media (max-width: 767px) {
    .flex-column-mobile {
        flex-direction: column !important;
    }
    
    .flex-row-mobile {
        flex-direction: row !important;
    }
}

/* Responsive grid columns */
@media (max-width: 767px) {
    .grid-1-mobile {
        grid-template-columns: 1fr !important;
    }
    
    .grid-2-mobile {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .grid-1-tablet {
        grid-template-columns: 1fr !important;
    }
    
    .grid-2-tablet {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-3-tablet {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .grid-3-desktop {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .grid-4-desktop {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .grid-5-desktop {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ============================================
   HERO RESPONZIVITA - OBA TYPY
   ============================================ */

/* VŠECHNY MOBILY (do 767px) - SPOLEČNÉ */
@media screen and (max-width: 767px) {
    body .hero-section-simple {
        height: auto !important;
        min-height: 300px !important;
        padding: 100px 20px 40px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    body .hero-section-simple .hero-content-simple {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        text-align: center !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    body .hero-section-simple .hero-left-simple {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        flex: none !important;
    }
    
    body .hero-section-simple .hero-right-simple {
        order: 2 !important;
        text-align: center !important;
        width: 100% !important;
        flex: none !important;
    }
    
    body .hero-section-simple .hero-rainbow-logo {
        width: 80px !important;
        height: auto !important;
    }
    
    body .hero-section-simple .hero-subtitle-small {
        font-size: 14px !important;
        letter-spacing: 3px !important;
        margin-bottom: 10px !important;
    }
    
    body .hero-section-simple .hero-title-large {
        font-size: 32px !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }
    
    body .hero-section-simple .hero-text-medium {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    body .hero-section-simple .hero-note-small {
        font-size: 12px !important;
        margin-top: 10px !important;
        line-height: 1.5 !important;
        max-width: 90% !important;
    }
}

/* TABLET PORTRAIT (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-section-simple {
        height: 320px;
        padding: 100px 20px 40px;
    }
    
    .hero-content-simple {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px;
        padding: 0 20px;
    }
    
    .hero-rainbow-logo {
        width: 120px;
    }
    
    .hero-subtitle-small {
        font-size: 20px;
        letter-spacing: 6px;
    }
    
    .hero-title-large {
        font-size: 44px;
    }
    
    .hero-text-medium {
        font-size: 24px;
    }
    
    .hero-note-small {
        font-size: 13px;
    }
}

/* TABLET LANDSCAPE (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-section-simple {
        height: 360px;
        padding: 120px 20px 50px;
    }
    
    .hero-content-simple {
        gap: 32px;
    }
    
    .hero-rainbow-logo {
        width: 150px;
    }
    
    .hero-subtitle-small {
        font-size: 24px;
    }
    
    .hero-title-large {
        font-size: 56px;
    }
    
    .hero-text-medium {
        font-size: 28px;
    }
    
    .hero-note-small {
        font-size: 14px;
    }
}