/* =====================================================
   🎬 GENRE MOVIES PAGE (FINAL PRO VERSION)
===================================================== */

/* =====================================================
   🎬 PAGE
===================================================== */

.genre-movies-page {
    padding-bottom: 0px;
}

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

.genre-movies-hero {
    padding-top: 10px;
}

/* =====================================================
   📝 HERO CONTENT
===================================================== */

.genre-movies-hero-content {
    padding: 20px 20px 10px;
}

/* =====================================================
   🎬 TITLE
===================================================== */

.genre-movies-title {
    margin: 0;

    font-size: 42px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;

    color: #fff;
}

/* =====================================================
   📝 DESCRIPTION
===================================================== */

.genre-movies-description {
    margin-top: 14px;

    max-width: 680px;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.74);
}

/* =====================================================
   🎬 SECTION
===================================================== */

.genre-movies-section {
    margin-top: 26px;
}

/* =====================================================
   🎞️ GRID
===================================================== */

.genre-movies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 14px;
    padding: 0 20px;
    align-items: start;
}

/* =====================================================
   🎬 GRID CARD FIX
===================================================== */

.genre-movies-grid .movie-card {
    width: 100%;
}

/* =====================================================
   🔄 SPINNER
===================================================== */

#genre-movies-spinner {
    padding: 26px 0;
}

/* =====================================================
   📭 EMPTY
===================================================== */

.genre-movies-grid .movies-empty {
    grid-column: 1 / -1;
}

/* =====================================================
   📱 TABLET
===================================================== */

@media (min-width: 768px) {

    .genre-movies-hero-content {
        padding: 28px 28px 12px;
    }

    .genre-movies-title {
        font-size: 56px;
    }

    .genre-movies-description {
        font-size: 16px;
    }

    .genre-movies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 30px 18px;

        padding: 0 28px;
    }

}

/* =====================================================
   💻 DESKTOP
===================================================== */

@media (min-width: 1024px) {

    .genre-movies-page {
        padding-bottom: 140px;
    }

    .genre-movies-title {
        font-size: 72px;
    }

    .genre-movies-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 34px 20px;
    }

}

/* =====================================================
   🖥️ LARGE DESKTOP
===================================================== */

@media (min-width: 1440px) {

    .genre-movies-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}