/* =====================================================
   24-TABLET.CSS - TABLET RESPONSIVE STYLES
   Flimmerkiste.net CSS Modularisierung - Runde 7
   Version: 1.0
   Beschreibung: Tablet-Anpassungen für alle Module
   Breakpoint: 768px - 1024px
   ===================================================== */

/* === TABLET BREAKPOINT (768px - 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* === HERO & HEADER TABLET === */
    .flim-hero-wrapper {
        padding: 40px 30px !important;
    }
    
    .hero-split {
        gap: 30px !important;
    }
    
    /* Poster mittlere Größe */
    .poster-container {
        width: 160px !important;
        height: 240px !important;
    }
    
    /* Content Area Tablet */
    .content-area {
        padding: 0 20px !important;
    }
    
    /* Titel Tablet */
    .flim-title-main {
        font-size: 2.2rem !important;
    }
    
    .flim-title-sub {
        font-size: 1.1rem !important;
    }
    
    /* === QUICK ANSWER BOX TABLET === */
    .flim-quick-answer {
        padding: 25px !important;
    }
    
    .flim-qa-content {
        font-size: 0.95rem !important;
    }
    
    .qa-facts {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* === RATING BADGE TABLET === */
    .flim-rating-banner {
        top: 30px !important;
        right: 30px !important;
    }
    
    .flim-rating-badge {
        padding: 10px 14px !important;
    }
    
    .flim-rating-score {
        font-size: 1.4rem !important;
    }
    
    /* === SECTIONS TABLET === */
    .flim-section {
        padding: 30px !important;
    }
    
    .flim-section-header {
        gap: 20px !important;
    }
    
    .flim-section-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    .flim-section-title {
        font-size: 1.8rem !important;
    }
    
    /* === STREAMING GRID TABLET === */
    .flim-streaming-section {
        padding: 35px !important;
    }
    
    .flim-streaming-grid,
    .stream-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* === CAST GRID TABLET === */
    .flim-cast-grid,
    .cast-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    /* === PRO/CONTRA TABLET === */
    .flim-proscons-section {
        grid-template-columns: 1fr 1fr !important;
        gap: 25px !important;
    }
    
    /* === QUOTES TABLET === */
    .flim-quote-enhanced,
    .flim-quote-frame {
        padding: 30px 35px 30px 55px !important;
        margin: 35px 0 !important;
    }
    
    .flim-quote-text {
        font-size: 1.2rem !important;
    }
    
    /* === MASONRY GRID TABLET === */
    .masonry-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .masonry-card.card-large {
        grid-column: span 2 !important;
    }
    
    /* === SPOTIFY EPISODEN GUIDE TABLET === */
    .flim-spotify-guide {
        padding: 30px !important;
    }
    
    .flim-spotify-header {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    
    .flim-spotify-seasons {
        gap: 10px !important;
    }
    
    .flim-spotify-season-btn {
        padding: 10px 16px !important;
    }
    
    .flim-spotify-episode {
        padding: 15px !important;
        grid-template-columns: 45px 1fr auto auto !important;
    }
    
    .flim-episode-title-en {
        display: block !important;
        font-size: 0.85rem !important;
    }
    
    .flim-episode-meta {
        font-size: 0.8rem !important;
    }
    
    /* === STORY LAYOUT TABLET === */
    .story-layout {
        grid-template-columns: 1fr 280px !important;
        gap: 25px !important;
    }
    
    .story-main {
        padding: 35px !important;
    }
    
    /* === SEASON SELECTOR TABLET === */
    .season-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
    
    .season-btn {
        padding: 12px !important;
    }
    
    /* === FAZIT SECTION TABLET === */
    .fazit-compact {
        padding: 35px !important;
    }
    
    .fazit-score {
        font-size: 3.5rem !important;
    }
    
    .action-row {
        gap: 12px !important;
    }
    
    /* === SHARE BUTTONS TABLET === */
    .flim-share-buttons {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    .flim-share-button {
        flex: 1 1 calc(50% - 6px) !important;
    }
    
    /* === HIGHLIGHT BOXES TABLET === */
    .flim-highlight-box {
        padding: 20px !important;
    }
    
    /* === INFO PILLS TABLET === */
    .flim-header-info {
        gap: 8px !important;
    }
    
    .flim-info-pill {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* === FLOATING HEADER TABLET === */
    .floating-header {
        padding: 8px 25px !important;
        gap: 20px !important;
    }
    
    .header-logo {
        font-size: 1rem !important;
    }
    
    /* === HERO COMPACT TABLET === */
    .hero-compact {
        padding: 35px 0 !important;
    }
    
    .hero-container {
        padding: 0 30px !important;
        gap: 35px !important;
    }
    
    /* === WIDGETS TABLET === */
    .widget {
        padding: 20px !important;
    }
    
    .widget-title {
        font-size: 1rem !important;
    }
    
    /* === MINI PREVIEW TABLET === */
    .mini-preview {
        padding: 12px !important;
    }
    
    .preview-text {
        font-size: 0.85rem !important;
    }
    
    /* === CONTENT WRAPPER TABLET === */
    .content-wrapper {
        padding: 0 30px !important;
    }
}

/* === TABLET LANDSCAPE SPECIFIC === */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    /* Hero optimiert für Landscape */
    .flim-hero-wrapper {
        min-height: auto !important;
        padding: 30px !important;
    }
    
    .hero-split {
        flex-direction: row !important;
    }
    
    /* Streaming Grid für Landscape */
    .flim-streaming-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Cast Grid für Landscape */
    .flim-cast-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* === IPAD SPECIFIC FIXES === */
@media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* iPad Retina spezifische Anpassungen */
    .flim-hero-wrapper {
        -webkit-font-smoothing: antialiased !important;
    }
    
    .flim-quote-enhanced,
    .flim-quote-frame {
        -webkit-transform: translateZ(0) !important; /* Hardware acceleration */
    }
    
    /* Touch-optimierte Buttons */
    .flim-spotify-season-btn,
    .season-btn,
    .action-btn,
    .flim-share-button {
        min-height: 44px !important; /* Apple Touch Guidelines */
    }
}

/* === TABLET PORTRAIT SPECIFIC === */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* Portrait-spezifische Anpassungen */
    .hero-split {
        flex-direction: column !important;
    }
    
    .left-section {
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Masonry Grid Portrait */
    .masonry-grid {
        grid-template-columns: 1fr !important;
    }
    
    .masonry-card.card-large {
        grid-column: span 1 !important;
    }
}

/* === LARGE TABLET / SMALL DESKTOP TRANSITION === */
@media (min-width: 1024px) and (max-width: 1200px) {
    
    /* Übergangsbereich zwischen Tablet und Desktop */
    .content-wrapper {
        max-width: 980px !important;
        margin: 0 auto !important;
    }
    
    .flim-streaming-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .flim-cast-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .masonry-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === TABLET UTILITIES === */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* Utility Klassen für Tablet */
    .flim-hidden-tablet {
        display: none !important;
    }
    
    .flim-visible-tablet {
        display: block !important;
    }
    
    /* Text Größen Tablet */
    .flim-responsive-text {
        font-size: 1rem !important;
    }
    
    .flim-responsive-title {
        font-size: 1.8rem !important;
    }
    
    .flim-responsive-subtitle {
        font-size: 1.2rem !important;
    }
    
    /* Spacing Utilities Tablet */
    .flim-mt-tablet-20 {
        margin-top: 20px !important;
    }
    
    .flim-mb-tablet-20 {
        margin-bottom: 20px !important;
    }
    
    .flim-pt-tablet-20 {
        padding-top: 20px !important;
    }
    
    .flim-pb-tablet-20 {
        padding-bottom: 20px !important;
    }
}

/* === NEWSPAPER THEME TABLET COMPATIBILITY === */
@media (min-width: 768px) and (max-width: 1018px) {
    
    /* Newspaper Theme spezifische Breakpoints */
    .td-post-content .flim-review-wrapper {
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
    
    .td_module_wrap .flim-review-wrapper {
        padding: 0 20px !important;
    }
}

/* Dateiname: 24-tablet.css */
/* Pfad: /wp-content/themes/Newspaper-child/assets/css/responsive/24-tablet.css */