/* =========================================================
   RESPONSIVE.CSS
   Mobile + Tablet + Desktop
   Fullscreen Video + Landscape Support
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   TABLET & BELOW
   ========================================================= */

@media (max-width: 900px) {

    .navbar {
        flex-wrap: wrap;
        row-gap: 12px;
        padding: 14px 18px;
    }

    .search-box {
        order: 3;
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-box input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nav-links {
        gap: 18px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }


    /* =====================================================
       MAIN CONTAINER
       ===================================================== */

    .container {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MOVIE CONTENT
       ===================================================== */

    #movie-content-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MOVIE INFO
       ===================================================== */

    .movie-info-card {

        width: 100% !important;

        padding: 14px !important;

        box-sizing: border-box !important;

        border-radius: 6px !important;
    }


    .movie-info-card h1 {

        font-size: 1.25rem !important;

        line-height: 1.35;

        word-break: break-word;
    }


    .info-grid {

        width: 100%;

        grid-template-columns:
            85px minmax(0, 1fr) !important;

        font-size: 0.85rem !important;
    }


    /* =====================================================
       NAVBAR
       ===================================================== */

    .navbar-left {

        gap: 10px;

        min-width: 0;
    }


    .logo {

        min-width: 0;
    }


    .logo a {

        font-size: 1.3rem;

        white-space: nowrap;
    }


    .nav-links {

        gap: 12px;

        min-width: 0;

        flex-wrap: wrap;
    }


    .nav-links a {

        font-size: 0.82rem;

        white-space: nowrap;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .search-box {

        width: 100% !important;

        max-width: 100% !important;

        display: flex;

        min-width: 0;
    }


    .search-box input {

        width: 100% !important;

        min-width: 0;

        font-size: 14px;
    }


    .search-box button {

        flex-shrink: 0;

        padding: 9px 16px !important;

        font-size: 0.85rem;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {

        width: 100%;

        padding: 40px 14px;

        min-height: auto;
    }


    .hero h1 {

        font-size: 1.8rem;

        line-height: 1.2;

        word-break: break-word;
    }


    .hero p {

        font-size: 0.9rem;

        line-height: 1.5;
    }


    /* =====================================================
       MOVIE GRID
       ===================================================== */

    .movie-grid {

        width: 100% !important;

        grid-template-columns:
            repeat(auto-fill, minmax(140px, 1fr)) !important;

        gap: 12px !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .site-footer {
        margin-top: 32px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 16px 24px;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-legal {
        padding: 0 16px 16px;
        font-size: 0.75rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 16px 24px;
        gap: 10px;
    }

    .footer-copy,
    .developer-credit {
        font-size: 0.78rem;
    }
}


/* =========================================================
   FOOTER — TABLET
   ========================================================= */

@media (min-width: 641px) and (max-width: 900px) {

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px 20px 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {

    .movie-info-card {
        padding: 20px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .container {

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .nav-links {
        gap: 8px;
    }


    .nav-links a {
        font-size: 0.78rem;
    }


    .movie-grid {

        grid-template-columns:
            repeat(auto-fill, minmax(125px, 1fr)) !important;
    }


    .movie-info-card h1 {

        font-size: 1.15rem !important;
    }
}