/* ===== RESPONSIVE DESIGN - MOBILE FIRST APPROACH ===== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    .movie-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .nav-menu {
        gap: 2rem;
    }
    
    .nav-link {
        padding: 0.8rem 1.5rem;
    }
    
    /* Profile layout for tablet */
    .profile-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
    }
    
    /* Watchlist grid for tablet */
    .watchlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .movie-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Header layout for desktop */
    .navbar {
        flex-direction: row;
    }
    
    .nav-menu {
        gap: 2.5rem;
    }
    
    /* Sidebar layout */
    .layout-with-sidebar {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 2rem;
    }
    
    /* Film detail page */
    .film-detail {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 2rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .movie-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== MOBILE SPECIFIC STYLES (Max-width 767px) ===== */
@media (max-width: 767px) {
    /* Container adjustments */
    .container {
        padding: 0 15px;
    }
    
    /* Header & Navigation */
    .header {
        padding: 0.8rem 0;
    }
    
    .navbar {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .logo {
        font-size: 1.6rem;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }
    
    .nav-link {
        justify-content: center;
        padding: 1rem;
        border-radius: 8px;
        background-color: rgba(86, 124, 139, 0.1);
    }
    
    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--beige);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    /* Cards */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding-bottom: 0.8rem;
        margin-bottom: 1rem;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    /* Movie Grid */
    .movie-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .movie-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .movie-poster {
        height: 300px;
    }
    
    /* Tabs */
    .nav-tabs {
        flex-direction: column;
        border-bottom: none;
        border-radius: 8px;
        overflow: visible;
    }
    
    .tab-link {
        padding: 1rem;
        border-bottom: 2px solid var(--teal);
        border-radius: 0;
        justify-content: center;
    }
    
    .tab-link:first-child {
        border-radius: 8px 8px 0 0;
    }
    
    .tab-link:last-child {
        border-radius: 0 0 8px 8px;
        border-bottom: none;
    }
    
    .tab-link.active {
        border-bottom: 2px solid var(--sky-blue);
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-control {
        padding: 0.8rem;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Search */
    .search-container {
        margin: 1rem 0;
    }
    
    .search-input {
        padding: 0.9rem 0.9rem 0.9rem 2.8rem;
    }
    
    /* Profile */
    .profile-header {
        padding: 2rem 1rem;
        margin-bottom: 1rem;
    }
    
    .avatar {
        width: 120px;
        height: 120px;
    }
    
    .profile-name {
        font-size: 1.6rem;
    }
    
    .profile-bio {
        font-size: 1rem;
    }
    
    /* Watchlist */
    .watchlist-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1rem;
    }
    
    .watchlist-poster {
        width: 120px;
        height: 160px;
    }
    
    .watchlist-title {
        font-size: 1.2rem;
    }
    
    /* Footer */
    .footer {
        padding: 1.5rem 0;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    /* Modal */
    .modal-content {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .modal-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.2rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* Filters */
    .filter-group {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .filter-select {
        width: 100%;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    
    .page-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* ===== TABLET SPECIFIC STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .nav-menu {
        gap: 1.5rem;
    }
    
    .nav-link {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .card {
        padding: 1.2rem;
    }
    
    /* Tablet specific layout for film detail */
    .film-detail-tablet {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 1.5rem;
    }
    
    /* Watchlist grid for tablet */
    .watchlist-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ===== SMALL MOBILE (Max-width 375px) ===== */
@media (max-width: 375px) {
    .container {
        padding: 0 10px;
    }
    
    .logo {
        font-size: 1.4rem;
    }
    
    .card {
        padding: 0.8rem;
        border-radius: 8px;
    }
    
    .movie-poster {
        height: 250px;
    }
    
    .movie-info {
        padding: 0.8rem;
    }
    
    .movie-title {
        font-size: 1.1rem;
    }
    
    .profile-header {
        padding: 1.5rem 0.8rem;
    }
    
    .avatar {
        width: 100px;
        height: 100px;
    }
    
    .profile-name {
        font-size: 1.4rem;
    }
    
    .btn {
        padding: 0.9rem;
        font-size: 0.9rem;
    }
    
    .search-input {
        padding: 0.8rem 0.8rem 0.8rem 2.5rem;
        font-size: 0.9rem;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 0.5rem 0;
        position: static;
    }
    
    .main-content {
        padding: 1rem 0;
    }
    
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .movie-poster {
        height: 200px;
    }
    
    .modal-content {
        max-height: 80vh;
        padding: 1rem;
    }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        font-weight: 600;
    }
    
    .card-title {
        font-weight: 600;
    }
    
    .btn {
        font-weight: 500;
    }
}

/* ===== DARK MODE SUPPORT (Additional) ===== */
@media (prefers-color-scheme: dark) {
    /* Already dark mode optimized with our color scheme */
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .movie-card:hover,
    .btn:hover,
    .stat-card:hover {
        transform: none;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --teal: #456a78;
        --navy: #0a1a2a;
        --sky-blue: #a8c9e6;
        --beige: #fff8f0;
    }
    
    .card {
        border-width: 3px;
    }
    
    .nav-link {
        border: 1px solid var(--teal);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .header,
    .footer,
    .btn,
    .nav-tabs {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
    }
    
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    .nav-link:hover,
    .btn:hover,
    .tab-link:hover,
    .movie-card:hover {
        transform: none;
        background-color: initial;
    }
    
    .nav-link:active,
    .btn:active,
    .tab-link:active {
        background-color: var(--teal);
        color: var(--sky-blue);
    }
    
    .movie-card:active {
        border-color: var(--sky-blue);
    }
    
    /* Larger touch targets */
    .nav-link,
    .btn,
    .tab-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .star {
        padding: 0.5rem;
    }
}

/* ===== FOLDABLE DEVICES ===== */
@media (max-width: 350px) {
    .container {
        padding: 0 8px;
    }
    
    .movie-grid {
        grid-template-columns: 1fr;
    }
    
    .card {
        margin-bottom: 0.8rem;
    }
    
    .btn {
        padding: 0.8rem;
        font-size: 0.85rem;
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE ===== */
.hidden-mobile {
    display: none;
}

.visible-mobile {
    display: block;
}

.hidden-tablet {
    display: none;
}

.visible-tablet {
    display: block;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
    
    .visible-mobile {
        display: none;
    }
}

@media (min-width: 992px) {
    .hidden-tablet {
        display: block;
    }
    
    .visible-tablet {
        display: none;
    }
}

/* ===== GRID SYSTEM FOR RESPONSIVE LAYOUTS ===== */
.responsive-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== FLEX UTILITIES FOR RESPONSIVE ===== */
.flex-responsive {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .flex-responsive {
        flex-direction: row;
    }
}

/* ===== TEXT SIZING FOR DIFFERENT SCREENS ===== */
.responsive-text {
    font-size: 1rem;
}

@media (max-width: 767px) {
    .responsive-text {
        font-size: 0.9rem;
    }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
}

@media (max-width: 375px) {
    .responsive-text {
        font-size: 0.85rem;
    }
    
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}