/**
 * Movie Detail Page - CSS Index
 * Imports all CSS modules for movie detail page
 *
 * Structure:
 * - movie-detail.css: Main movie detail page styles
 * - episode-status.css: Episode status indicators
 * - video-player.css: Enhanced video player styles
 * - comments.css: Comment system styles
 *
 * Usage: Import this file in the main layout or page template
 */

/* Core Movie Detail Styles */
@import url('./movie-detail.css');

/* Episode Status Components */
@import url('./episode-status.css');

/* Enhanced Video Player Styles */
@import url('./video-player.css');

/* Comment System Styles */
@import url('./comments.css');

/* Additional Movie Detail Components */
/* Future modules can be added here */

/**
 * Movie Detail Page Variables
 * Override theme variables specifically for movie detail page
 */
:root {
    /* Movie Detail Specific Colors */
    --movie-detail-accent: var(--main-color);
    --movie-detail-bg-primary: var(--bg-primary);
    --movie-detail-bg-secondary: var(--bg-secondary);
    --movie-detail-bg-tertiary: var(--bg-tertiary);

    /* Episode Grid Variables */
    --episode-grid-gap: 0.75rem;
    --episode-item-min-height: 3rem;
    --episode-item-border-radius: 0.5rem;

    /* Accordion Variables */
    --accordion-transition-duration: 0.3s;
    --accordion-border-color: var(--border-primary);

    /* Rating System Variables */
    --rating-star-size: 1.5rem;
    --rating-star-color: #fbbf24;
    --rating-star-hover-scale: 1.3;

    /* Social Share Variables */
    --social-btn-padding: 0.75rem 1rem;
    --social-btn-border-radius: 0.5rem;
    --social-btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Movie Detail Page Layout
 * Base layout styles for movie detail page
 */
.movie-detail-page {
    min-height: 100vh;
    background: var(--movie-detail-bg-primary);
}

.movie-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/**
 * Responsive Breakpoints for Movie Detail
 */
@media (max-width: 1024px) {
    .movie-detail-container {
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    .movie-detail-container {
        padding: 0 0.5rem;
    }

    :root {
        --episode-grid-gap: 0.5rem;
        --episode-item-min-height: 3.5rem;
    }
}

@media (max-width: 480px) {
    :root {
        --episode-grid-gap: 0.5rem;
        --episode-item-min-height: 4rem;
        --rating-star-size: 1.25rem;
        --social-btn-padding: 0.5rem 0.75rem;
    }
}

/**
 * Print Styles for Movie Detail
 */
@media print {
    .movie-detail-page {
        background: white;
        color: black;
    }

    .movie-detail-tabs,
    .social-share-card,
    .rating-stars-container {
        display: none;
    }

    .accordion-content {
        display: block !important;
        max-height: none !important;
    }
}

/**
 * Dark Mode Overrides
 */
@media (prefers-color-scheme: dark) {
    :root {
        --movie-detail-bg-primary: #0f172a;
        --movie-detail-bg-secondary: #1e293b;
        --movie-detail-bg-tertiary: #334155;
    }
}

/**
 * High Contrast Mode Support
 */
@media (prefers-contrast: more) {
    :root {
        --accordion-border-color: #000;
        --episode-item-border-radius: 0;
    }

    .episode-item,
    .server-tab,
    .accordion-header {
        border: 2px solid #000;
    }
}

/**
 * Reduced Motion Support
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --accordion-transition-duration: 0s;
        --social-btn-transition: none;
    }

    .episode-item,
    .server-tab,
    .rating-star,
    .social-btn {
        transition: none;
        animation: none;
    }

    .episode-item:hover,
    .server-tab:hover {
        transform: none;
    }
}