/* Responsive Styles - 响应式样式 */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: var(--container-2xl);
    }
    
    .main-title {
        font-size: 4rem;
    }
    
    .video-wrapper {
        max-width: 1000px;
    }
}

/* Desktop (1024px - 1399px) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .container {
        max-width: var(--container-xl);
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: var(--container-lg);
        padding: 0 var(--space-6);
    }
    
    /* Navigation */
    .nav-menu {
        gap: var(--space-6);
    }
    
    .nav-link {
        font-size: var(--font-sm);
    }
    
    /* Video Section */
    .main-title {
        font-size: var(--font-4xl);
    }
    
    .main-subtitle {
        font-size: var(--font-lg);
    }
    
    .main-tagline {
        font-size: var(--font-base);
    }
    
    .video-wrapper {
        max-width: 700px;
    }
    
    /* Overview Section */
    .overview-content {
        gap: var(--space-12);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* Characters Section */
    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .character-card {
        padding: var(--space-5);
    }
    
    .character-image {
        width: 100px;
        height: 100px;
    }
    
    /* Story Section */
    .story-article {
        padding: var(--space-10);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }
}

/* Mobile Large (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .container {
        max-width: var(--container-md);
        padding: 0 var(--space-4);
    }
    
    /* Navigation */
    .nav-container {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .nav-brand .nav-title {
        font-size: var(--font-xl);
    }
    
    .nav-menu {
        gap: var(--space-4);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Video Section */
    .video-section {
        padding: var(--space-16) 0;
        min-height: auto;
    }
    
    .video-header {
        margin-bottom: var(--space-8);
    }
    
    .main-title {
        font-size: var(--font-3xl);
        line-height: 1.1;
    }
    
    .main-subtitle {
        font-size: var(--font-base);
    }
    
    .main-tagline {
        font-size: var(--font-sm);
        margin-bottom: var(--space-4);
    }
    
    .video-player {
        margin: var(--space-8) 0;
    }
    
    .video-wrapper {
        max-width: 100%;
        border-radius: var(--radius-lg);
    }
    
    /* Overview Section */
    .overview-section {
        padding: var(--space-16) 0;
    }
    
    .overview-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
    }
    
    .poster-image {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .overview-info {
        padding: 0;
    }
    
    .section-title {
        font-size: var(--font-3xl);
        margin-bottom: var(--space-8);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .features-title {
        font-size: var(--font-xl);
    }
    
    /* Characters Section */
    .characters-section {
        padding: var(--space-16) 0;
    }
    
    .characters-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        max-width: 400px;
        margin: var(--space-8) auto 0;
    }
    
    .character-card {
        padding: var(--space-5);
    }
    
    .character-image {
        width: 100px;
        height: 100px;
    }
    
    .character-name {
        font-size: var(--font-lg);
    }
    
    .character-role {
        font-size: var(--font-sm);
    }
    
    .character-description {
        font-size: var(--font-xs);
    }
    
    /* Story Section */
    .story-section {
        padding: var(--space-16) 0;
    }
    
    .story-article {
        padding: var(--space-6);
    }
    
    .story-article h3 {
        font-size: var(--font-xl);
        margin: var(--space-6) 0 var(--space-3);
    }
    
    .story-article h4 {
        font-size: var(--font-lg);
        margin: var(--space-4) 0 var(--space-2);
    }
    
    .story-article p {
        margin-bottom: var(--space-4);
        text-align: left;
        font-size: var(--font-sm);
        line-height: 1.6;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-8) 0 var(--space-4);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }
    
    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
    .container {
        padding: 0 var(--space-3);
    }
    
    /* Navigation */
    .header {
        padding: var(--space-2) 0;
    }
    
    .nav-container {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .nav-brand .nav-title {
        font-size: var(--font-lg);
    }
    
    .nav-menu {
        gap: var(--space-3);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link {
        font-size: var(--font-xs);
        padding: var(--space-1);
    }
    
    /* Video Section */
    .video-section {
        padding: var(--space-12) 0;
        min-height: auto;
    }
    
    .video-header {
        margin-bottom: var(--space-6);
    }
    
    .main-title {
        font-size: var(--font-2xl);
        line-height: 1.1;
        margin-bottom: var(--space-3);
    }
    
    .main-subtitle {
        font-size: var(--font-sm);
        margin-bottom: var(--space-4);
    }
    
    .main-tagline {
        font-size: var(--font-xs);
        line-height: 1.5;
    }
    
    .video-player {
        margin: var(--space-6) 0;
    }
    
    .video-wrapper {
        border-radius: var(--radius-md);
    }
    
    .video-cta {
        margin-top: var(--space-6);
    }
    
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-sm);
    }
    
    /* Overview Section */
    .overview-section {
        padding: var(--space-12) 0;
    }
    
    .overview-content {
        gap: var(--space-6);
    }
    
    .poster-image {
        max-width: 250px;
    }
    
    .section-title {
        font-size: var(--font-2xl);
        margin-bottom: var(--space-6);
    }
    
    .info-item {
        padding: var(--space-3);
        text-align: center;
    }
    
    .info-label {
        font-size: var(--font-xs);
    }
    
    .info-value {
        font-size: var(--font-sm);
    }
    
    .features-title {
        font-size: var(--font-lg);
        margin-bottom: var(--space-4);
    }
    
    .features-list li {
        font-size: var(--font-xs);
        padding: var(--space-2) 0;
    }
    
    /* Characters Section */
    .characters-section {
        padding: var(--space-12) 0;
    }
    
    .characters-grid {
        gap: var(--space-4);
        margin-top: var(--space-6);
    }
    
    .character-card {
        padding: var(--space-4);
    }
    
    .character-image {
        width: 80px;
        height: 80px;
        margin-bottom: var(--space-4);
    }
    
    .character-name {
        font-size: var(--font-base);
    }
    
    .character-role {
        font-size: var(--font-xs);
        margin-bottom: var(--space-3);
    }
    
    .character-description {
        font-size: var(--font-xs);
        line-height: 1.4;
    }
    
    /* Story Section */
    .story-section {
        padding: var(--space-12) 0;
    }
    
    .story-article {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }
    
    .story-article h3 {
        font-size: var(--font-lg);
        margin: var(--space-4) 0 var(--space-2);
    }
    
    .story-article h4 {
        font-size: var(--font-base);
        margin: var(--space-3) 0 var(--space-2);
    }
    
    .story-article p {
        font-size: var(--font-xs);
        line-height: 1.5;
        margin-bottom: var(--space-3);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-6) 0 var(--space-3);
    }
    
    .footer-content {
        gap: var(--space-4);
    }
    
    .footer-info h3 {
        font-size: var(--font-base);
        margin-bottom: var(--space-2);
    }
    
    .footer-info p {
        font-size: var(--font-xs);
    }
    
    .footer-links {
        gap: var(--space-2);
    }
    
    .footer-links a {
        font-size: var(--font-xs);
    }
    
    .footer-bottom p {
        font-size: var(--font-xs);
    }
    
    /* Components */
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: var(--space-4);
        right: var(--space-4);
    }
    
    .notification {
        top: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
        max-width: none;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .poster-image,
    .character-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .video-section {
        min-height: 70vh;
        padding: var(--space-8) 0;
    }
    
    .video-header {
        margin-bottom: var(--space-6);
    }
    
    .video-player {
        margin: var(--space-6) 0;
    }
    
    .main-title {
        font-size: var(--font-3xl);
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .back-to-top,
    .notification {
        display: none;
    }
    
    .main {
        margin-top: 0;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .video-wrapper {
        border: 2px solid #ccc;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-wrapper::after {
        content: 'Video content available online';
        color: #666;
    }
    
    .video-wrapper iframe {
        display: none;
    }
}