/* ==========================================
   LARGE DEVICES (1200px and below)
========================================== */

@media (max-width:1200px){

    .hero h1{
        font-size:58px;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ==========================================
   TABLETS (992px and below)
========================================== */

@media (max-width:992px){

    .navbar{

        flex-wrap:wrap;

        gap:20px;

        justify-content:center;

        text-align:center;

    }

    .nav-links{

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero{

        min-height:75vh;

        padding:70px 30px;

    }

    .hero h1{

        font-size:48px;

    }

    .hero p{

        font-size:18px;

    }

    .hero-search{

        max-width:650px;

    }

    .stats{

        grid-template-columns:repeat(2,1fr);

        margin-top:30px;

    }

    .prompt-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================
   MOBILE (768px and below)
========================================== */

@media (max-width:768px){

    section{

        padding:60px 25px;

    }

    .navbar{

        flex-direction:column;

        padding:20px;

    }

    .logo{

        font-size:24px;

    }

    .nav-links{

        flex-direction:column;

        gap:15px;

    }

    .nav-actions{

        width:100%;

        justify-content:center;

    }

    .hero{

        min-height:auto;

        padding-top:80px;

    }

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:17px;

    }

    .hero-search{

        flex-direction:column;

        border-radius:18px;

        overflow:hidden;

    }

    .hero-search input{

        width:100%;

        padding:18px;

    }

    .hero-search button{

        width:100%;

        height:55px;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .filter-section{

        gap:10px;

    }

    .filter-btn{

        padding:10px 18px;

        font-size:14px;

    }

    .prompt-grid{

        grid-template-columns:1fr;

    }

    .prompt-card{

        padding:22px;

    }

    .card-top{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .card-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .card-actions{

        width:100%;

    }

    .copy-btn{

        flex:1;

    }

    .modal{

        padding:15px;

    }

    .modal-content{

        padding:25px;

        max-height:90vh;

        overflow-y:auto;

    }

    .modal-header h2{

        font-size:26px;

    }

    .modal-meta{

        gap:10px;

    }

    footer{

        padding:60px 25px;

    }

}

/* ==========================================
   SMALL MOBILE (576px and below)
========================================== */

@media (max-width:576px){

    .hero h1{

        font-size:32px;

    }

    .hero p{

        font-size:15px;

    }

    .hero-badge{

        font-size:13px;

    }

    .section-title h2{

        font-size:30px;

    }

    .stat-card{

        padding:25px;

    }

    .stat-card h2{

        font-size:30px;

    }

    .prompt-card{

        padding:20px;

    }

    .prompt-card h3{

        font-size:20px;

    }

    .category{

        font-size:12px;

    }

    .difficulty{

        font-size:13px;

    }

    .tags span{

        font-size:12px;

    }

    .copy-btn{

        width:100%;

    }

    .bookmark-btn{

        width:100%;

        height:45px;

    }

    .footer-icons{

        gap:12px;

    }

    .footer-icons i{

        width:42px;

        height:42px;

    }

}

/* ==========================================
   EXTRA SMALL (400px and below)
========================================== */

@media (max-width:400px){

    .hero h1{

        font-size:28px;

    }

    .hero-search input{

        font-size:14px;

    }

    .login-btn{

        width:100%;

    }

    .filter-btn{

        width:100%;

    }

    .modal-content{

        padding:20px;

    }

}