/* Responsive Design for Silent Bride Drama Site */
/* Mobile-first approach with progressive enhancement */

/* ===== BASE MOBILE STYLES (320px+) ===== */
/* Already defined in base.css and layout.css */

/* ===== SMALL MOBILE ADJUSTMENTS (375px+) ===== */
@media (min-width: 375px) {
    .container {
        padding: 0 var(--space-5);
    }
    
    .hero-title {
        font-size: var(--font-5xl);
    }
    
    .section-title {
        font-size: var(--font-3xl);
    }
}

/* ===== LARGE MOBILE (425px+) ===== */
@media (min-width: 425px) {
    .episodes-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-actions .btn {
        width: auto;
        min-width: 160px;
    }
}

/* ===== TABLET PORTRAIT (600px+) ===== */
@media (min-width: 600px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    .nav-menu {
        display: flex;
        gap: var(--space-6);
    }
    
    .nav-toggle {
        display: none;
    }
    
    .hero {
        min-height: 90vh;
    }
    
    .hero-title {
        font-size: var(--font-6xl);
    }
    
    .hero-stats {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-8);
    }
    
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .analysis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .visual-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
}

/* ===== TABLET LANDSCAPE (768px+) ===== */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
    
    section {
        padding: var(--space-20) 0;
    }
    
    .section-title {
        font-size: var(--font-4xl);
    }
    
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
        text-align: left;
    }
    
    .overview-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
    
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .analysis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .footer-content {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-12);
    }
    
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

/* ===== SMALL DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }
    
    section {
        padding: var(--space-24) 0;
    }
    
    .hero {
        min-height: 100vh;
    }
    
    .hero-content {
        gap: var(--space-16);
    }
    
    .overview-content {
        gap: var(--space-16);
    }
    
    .episodes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .characters-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .analysis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .footer-content {
        gap: var(--space-16);
    }
    
    .footer-links {
        gap: var(--space-8);
    }
}

/* ===== DESKTOP (1280px+) ===== */
@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
    
    .episodes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .characters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .analysis-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== LARGE DESKTOP (1440px+) ===== */
@media (min-width: 1440px) {
    .container {
        max-width: var(--container-2xl);
        padding: 0 var(--space-10);
    }
    
    .hero-title {
        font-size: var(--font-6xl);
    }
    
    .section-title {
        font-size: var(--font-5xl);
    }
}

/* ===== ULTRA WIDE (1920px+) ===== */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-content {
        gap: var(--space-20);
    }
    
    .overview-content {
        gap: var(--space-20);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .header,
    .nav,
    .nav-toggle,
    .hero-actions,
    .btn,
    .footer {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: var(--space-8) 0;
        background: white !important;
    }
    
    .hero-title,
    .section-title {
        color: black !important;
        text-align: center;
    }
    
    .hero-description,
    .section-subtitle {
        color: #333 !important;
    }
    
    section {
        padding: var(--space-8) 0;
        page-break-inside: avoid;
    }
    
    .episode-card,
    .character-card,
    .analysis-card {
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        margin-bottom: var(--space-4);
    }
    
    .episodes-grid,
    .characters-grid,
    .analysis-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .visual-grid img {
        max-width: 200px;
        height: auto;
    }
}

/* ===== HIGH DPI / RETINA DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image,
    .character-image img,
    .grid-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== REDUCED MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hover-lift:hover {
        transform: none !important;
    }
    
    .episode-card:hover,
    .character-card:hover,
    .analysis-card:hover {
        transform: none !important;
    }
    
    .character-image img,
    .grid-image {
        transition: none !important;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .hero {
        background: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-neutral-800) 50%, var(--color-accent-900) 100%);
    }
    
    .episode-card,
    .character-card,
    .analysis-card {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }
    
    .episode-card:hover,
    .character-card:hover,
    .analysis-card:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .episode-card,
    .character-card,
    .analysis-card {
        border: 2px solid currentColor;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .hero-title,
    .section-title {
        text-shadow: 1px 1px 0 white;
    }
}

/* ===== LANDSCAPE ORIENTATION ADJUSTMENTS ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: 100vh;
        padding-top: 60px;
    }
    
    .hero-title {
        font-size: var(--font-4xl);
    }
    
    .hero-description {
        font-size: var(--font-base);
    }
    
    .section-title {
        font-size: var(--font-3xl);
    }
    
    section {
        padding: var(--space-12) 0;
    }
}

/* ===== TOUCH DEVICE ADJUSTMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    .hover-lift:hover {
        transform: none;
        box-shadow: var(--shadow-base);
    }
    
    .btn {
        min-height: 44px; /* Minimum touch target size */
        min-width: 44px;
    }
    
    .nav-link {
        padding: var(--space-3) var(--space-4);
    }
    
    .episode-card,
    .character-card,
    .analysis-card {
        transition: none;
    }
    
    .episode-card:active,
    .character-card:active,
    .analysis-card:active {
        transform: scale(0.98);
    }
}

/* ===== SPECIFIC MOBILE BROWSER FIXES ===== */

/* iOS Safari viewport height fix */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
}

/* Android Chrome address bar compensation */
@media screen and (max-width: 768px) {
    .hero {
        min-height: calc(100vh - 56px); /* Account for Chrome mobile address bar */
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus indicators for keyboard navigation */
@media (hover: hover) and (pointer: fine) {
    .episode-card:focus-within,
    .character-card:focus-within,
    .analysis-card:focus-within {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: more) {
    .text-secondary {
        color: var(--color-neutral-700);
    }
    
    .text-tertiary {
        color: var(--color-neutral-600);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on slower devices */
@media (prefers-reduced-motion: no-preference) and (update: slow) {
    .episode-card,
    .character-card,
    .analysis-card {
        transition-duration: var(--transition-slow);
    }
}

/* GPU acceleration for smooth animations */
@media (hover: hover) and (pointer: fine) {
    .hover-lift,
    .episode-card,
    .character-card,
    .analysis-card {
        will-change: transform;
    }
}

/* ===== CONTAINER QUERIES (Future-proofing) ===== */
/* Note: Limited browser support as of 2025, but preparing for future */

/* 
@container (min-width: 400px) {
    .episode-card {
        padding: var(--space-8);
    }
}

@container (min-width: 600px) {
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
*/