/* Mobile Responsiveness Overrides */

@media (max-width: 768px) {

    /* --- Header --- */
    .navbar-netflix {
        padding: 0 15px;
        /* Less side padding */
        height: 60px;
        /* Slightly shorter */
        background-color: #141414;
        /* Solid background on mobile usually better, or handle scroll */
    }

    .navbar-netflix .navbar-brand {
        font-size: 1.4rem;
        /* Smaller logo */
        margin-right: 0;
    }

    .navbar-netflix .navbar-toggler {
        padding: 0;
        border: none;
    }

    /* Collapse Menu adjustments */
    .navbar-netflix .navbar-collapse {
        background-color: #141414;
        padding: 15px;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        border-top: 1px solid #333;
    }

    .navbar-netflix .nav-link {
        margin-left: 0;
        padding: 10px 0;
        font-size: 1rem;
        border-bottom: 1px solid #333;
    }

    .navbar-netflix .nav-right {
        margin-top: 15px;
        justify-content: space-between;
    }

    /* --- Hero Section --- */
    .hero-wrapper {
        height: 65vh;
        /* Shorter hero on mobile */
        margin-bottom: 0;
    }

    .hero-content {
        bottom: 10%;
        /* Move up slightly */
        left: 5%;
        width: 90%;
        max-width: none;
    }

    .hero-title {
        font-size: 2.2rem;
        /* Much smaller title */
        margin-bottom: 0.5rem;
    }

    .hero-description {
        font-size: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* Limit text lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .hero-buttons .btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
        width: auto;
        flex: 1;
        /* Stretch buttons */
        justify-content: center;
    }

    /* --- Search Overlay --- */
    .search-input {
        font-size: 1.5rem;
        /* Smaller input text */
        width: 90%;
    }

    .close-search-btn {
        top: 20px;
        right: 20px;
        font-size: 2rem;
    }

    .search-container {
        width: 95%;
        height: 90%;
    }

    /* --- Movie Cards (Landing) --- */
    .movie-card {
        width: 140px;
        /* Smaller cards */
    }

    .movie-card:hover {
        transform: none;
        /* Disable scale effect on touch devices to prevent layout issues */
        z-index: 1;
    }

    .movie-overlay,
    .overlay {
        display: none !important;
    }

    .row-scroll {
        padding: 1rem 0;
        /* Less padding since no scale */
    }

    .row-title {
        font-size: 1.1rem;
        margin-left: 10px;
    }

    .row-container {
        padding: 0 10px;
    }

    /* Top 10 badges */
    .top-10-card {
        width: 180px;
    }

    .top-10-rank {
        font-size: 6rem;
        right: -10px;
    }

    .top-10-img {
        flex: 0 0 100px;
    }

    /* --- Footer --- */
    .netflix-footer {
        padding: 20px;
    }

    .netflix-footer .footer-links {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on mobile */
        gap: 10px;
    }

    .netflix-footer .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 15px;
    }

    .netflix-footer .social-links {
        gap: 20px;
    }
}

@media (max-width: 480px) {

    /* Extra small screens */
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-buttons {
        display: flex;
        gap: 10px;
    }

    .netflix-footer .footer-links {
        grid-template-columns: 1fr;
        /* 1 column on very small screens */
    }
}