/* ===================================
   Responsive Design - التصميم المتجاوب
   =================================== */

/* Mobile First Approach */

/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575px) {
    :root {
        --font-xs: 0.65rem;
        --font-sm: 0.8rem;
        --font-md: 0.9rem;
        --font-lg: 1rem;
        --font-xl: 1.3rem;
        --font-2xl: 1.5rem;
        --font-3xl: 2rem;
    }
    
    /* Container */
    .container {
        padding: 0 1rem;
    }
    
    /* Typography */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    
    /* Spacing */
    .section {
        padding: 2rem 1rem;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (max-width: 768px) {
    /* Navigation */
    .nav-links {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .search-box {
        order: -1;
    }
    
    .search-input.active {
        width: 150px;
    }
    
    /* Hero */
    .hero {
        padding: 3rem 1rem;
        min-height: 50vh;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero-stats {
        gap: 1.5rem;
        flex-direction: column;
    }
    
    .stat-item {
        width: 100%;
        min-width: auto;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .hero-btn {
        padding: 0.8rem 1.5rem;
        font-size: var(--font-sm);
    }
    
    .hero.hero-split {
        grid-template-columns: 1fr;
        padding: 2rem;
        text-align: center;
    }
    
    /* Cards */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .card-image {
        height: 220px;
        font-size: 2rem;
    }
    
    .release-card {
        flex-direction: column;
        padding: 1rem;
    }
    
    .release-image {
        width: 100%;
        height: 200px;
    }
    
    .chapters {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Sections */
    .section {
        padding: 2rem 1rem;
    }
    
    .section-title {
        font-size: var(--font-xl);
    }
    
    .section-title::after {
        width: 60px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-tabs {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Slider */
    .slider-container {
        padding: 0;
    }
    
    .slider-nav {
        display: none;
    }
    
    .slider .card {
        min-width: 200px;
    }
    
    /* Schedule */
    .schedule-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.8rem;
    }
    
    .day-card {
        padding: 1rem;
    }
    
    .day-count {
        font-size: 1.5rem;
    }
    
    /* Newsletter */
    .newsletter {
        padding: 2rem 1rem;
    }
    
    .newsletter h2 {
        font-size: var(--font-xl);
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-input {
        min-width: 100%;
    }
    
    /* Footer */
    footer {
        padding: 2rem 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-stats {
        justify-content: center;
    }
    
    .scroll-top {
        left: 20px;
        bottom: 20px;
        width: 45px;
        height: 45px;
    }
    
    /* Modals */
    .modal {
        padding: 1rem;
    }
    
    .modal-content {
        padding: 1.5rem;
        max-width: 100%;
    }
    
    .notification-toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .social-login {
        flex-direction: column;
    }
    
    /* Browse Page */
    .browse-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar-filters {
        position: sticky;
        top: 70px;
        z-index: 100;
        background: var(--bg-card);
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }
    
    .filter-section {
        margin-bottom: 1rem;
    }
    
    .browse-controls {
        flex-direction: column;
        gap: 1rem;
    }
    
    .search-bar {
        width: 100%;
    }
    
    /* Series Page */
    .series-main-info {
        flex-direction: column;
    }
    
    .series-cover {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .series-actions {
        flex-wrap: wrap;
    }
    
    .action-btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 120px;
    }
    
    /* Reader */
    .reader-navbar {
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
    }
    
    .reader-nav-left {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .reader-settings {
        max-width: 100%;
    }
    
    .setting-buttons {
        flex-direction: column;
    }
    
    .reader-navigation {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-btn {
        width: 100%;
    }
    
    .chapter-selector {
        width: 100%;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Show more cards */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    
    /* Better spacing */
    .section {
        padding: 4rem 2rem;
    }
    
    /* Larger containers */
    .container {
        max-width: 1200px;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
    
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    
    /* Enhanced layouts */
    .hero.hero-split {
        gap: 4rem;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: 80vh;
    }
    
    .hero-stats {
        flex-direction: row;
    }
    
    nav {
        padding: 0.5rem 2rem;
    }
}

/* Print Styles */
@media print {
    nav,
    footer,
    .scroll-top,
    .modal,
    .filter-tabs,
    .slider-nav,
    .action-btn,
    .newsletter {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .card,
    .section {
        break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper images for retina displays */
    .card-image,
    .release-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Specific Adjustments */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-primary: linear-gradient(135deg, #0a0014 0%, #1a0a2e 50%, #0a0014 100%);
        --text-primary: #ffffff;
    }
}

/* Light Mode Specific Adjustments */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg-primary: linear-gradient(135deg, #f5f0ff 0%, #e9d5ff 50%, #f5f0ff 100%);
        --text-primary: #1a0a2e;
    }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .action-btn,
    .tab,
    .chapter-link {
        min-height: 44px;
        padding: 0.8rem 1rem;
    }
    
    /* Remove hover effects */
    .card::before {
        display: none;
    }
    
    /* Show actions always on touch devices */
    .card-actions {
        opacity: 1;
    }
}

/* Notch Support (iPhone X and newer) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    nav {
        padding-left: max(2rem, env(safe-area-inset-left));
        padding-right: max(2rem, env(safe-area-inset-right));
    }
}

/* Container Queries (Modern browsers) */
@container (min-width: 700px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    
    .card-image {
        height: auto;
    }
}

/* Gap Support Fallback */
@supports not (gap: 1rem) {
    .cards-grid > * {
        margin: 1rem;
    }
    
    .hero-stats > * {
        margin: 0 1.5rem;
    }
}