/**
 * Series Reels Pro - Responsive Styles
 */

/* Tablet: 600px - 1024px */
@media (max-width: 1024px) {
    .srp-watch-layout {
        grid-template-columns: 1fr;
        padding: 0 16px 16px;
    }

    .srp-watch-player-section {
        position: static;
    }

    .srp-watch-sidebar {
        gap: 16px;
    }

    .srp-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px 30px;
    }

    .srp-hero-poster { width: 160px; }
    .srp-hero-title { font-size: 24px; }
    .srp-hero-meta { justify-content: center; }
    .srp-hero-excerpt { max-width: 100%; }

    .srp-series-body {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .srp-series-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
    }
}

/* Mobile: < 600px */
@media (max-width: 600px) {
    .srp-watch-layout {
        padding: 0 8px 8px;
    }

    .srp-watch-breadcrumbs {
        padding: 12px 16px;
        font-size: 12px;
    }

    .srp-watch-title {
        font-size: 20px;
    }

    .srp-watch-stats {
        margin: 16px 8px;
        padding: 16px;
        font-size: 13px;
        gap: 16px;
    }

    .srp-watch-suggestions {
        padding: 16px 8px;
    }

    .srp-suggestions-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .srp-episode-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 4px;
    }

    .srp-episode-btn {
        height: 38px;
        font-size: 12px;
    }

    .srp-hero-content {
        padding: 30px 14px 20px;
    }

    .srp-hero-poster { width: 130px; }
    .srp-hero-title { font-size: 20px; }
    .srp-hero-meta { font-size: 12px; gap: 10px; }
    .srp-hero-excerpt { font-size: 13px; }

    .srp-series-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .srp-btn { padding: 8px 14px; font-size: 13px; }
    .srp-btn-prev, .srp-btn-next { padding: 10px; }
}

/* Very small: < 360px */
@media (max-width: 360px) {
    .srp-watch-title { font-size: 18px; }
    .srp-series-grid { grid-template-columns: 1fr; }
    .srp-suggestions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large screens: > 1600px */
@media (min-width: 1600px) {
    .srp-watch-layout {
        grid-template-columns: 1fr 480px;
        max-width: 1600px;
    }
    .srp-series-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}