/* =========================================
   RESPONSIVE CSS
   NeoAI Editor Theme
========================================= */

/* =================================================
   LARGE DEVICES
================================================= */

@media(max-width:1400px){

    .container{

        width:min(1180px,92%);
    }

    .hero-content h1{

        font-size:4rem;
    }

    .editor-canvas{

        width:820px;
    }

}

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

@media(max-width:1200px){

    .hero-grid,
    .footer-top{

        grid-template-columns:1fr;
    }

    .hero-content{

        text-align:center;
    }

    .hero-content p{

        margin-inline:auto;
    }

    .hero-buttons,
    .hero-stats{

        justify-content:center;
    }

    .editor-workspace{

        grid-template-columns:
            70px 1fr;
    }

    .editor-panel{

        display:none;
    }

    .editor-topbar{

        right:0;
    }

    .single-layout{

        grid-template-columns:1fr;
    }

    .single-sidebar{

        margin-top:50px;
    }

}

/* =================================================
   TABLETS
================================================= */

@media(max-width:992px){

    section{

        padding:100px 0;
    }

    .site-header{

        padding:0 20px;
    }

    .header-container{

        min-height:80px;
    }

    .hero-content h1{

        font-size:3.4rem;
    }

    .hero-content p{

        font-size:1rem;
    }

    .section-title h2,
    .neo-section-title h2{

        font-size:2.5rem;
    }

    .footer-links-grid{

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

    .editor-layout{

        grid-template-columns:
            80px 1fr;
    }

    .editor-right-panel{

        display:none;
    }

    .editor-canvas{

        width:90%;
        height:500px;
    }

    .archive-grid,
    .posts-grid,
    .index-grid,
    .search-grid{

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

}

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

@media(max-width:768px){

    body{

        overflow-x:hidden;
    }

    .nav-menu{

        position:fixed;

        top:80px;
        left:-100%;

        width:280px;
        height:calc(100vh - 80px);

        flex-direction:column;

        align-items:flex-start;

        padding:40px 25px;

        background:
            rgba(15,23,42,.96);

        backdrop-filter:
            blur(20px);

        transition:
            all .4s ease;

        z-index:999;
    }

    .nav-menu.active{

        left:0;
    }

    .mobile-toggle{

        display:flex;
        align-items:center;
        justify-content:center;

        width:50px;
        height:50px;

        border-radius:16px;

        background:
            rgba(255,255,255,.05);

        border:
            1px solid rgba(255,255,255,.08);

        cursor:pointer;
    }

    .hero-section{

        min-height:auto;

        padding-top:160px;
    }

    .hero-grid{

        gap:60px;
    }

    .hero-content h1{

        font-size:2.9rem;
    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;
    }

    .hero-stats{

        flex-wrap:wrap;
    }

    .editor-window{

        border-radius:24px;
    }

    .editor-workspace{

        grid-template-columns:1fr;
    }

    .editor-sidebar{

        display:none;
    }

    .features-grid,
    .neo-feature-grid,
    .testimonial-grid{

        grid-template-columns:1fr;
    }

    .footer-top{

        gap:50px;
    }

    .footer-links-grid{

        grid-template-columns:1fr;
    }

    .footer-bottom{

        flex-direction:column;

        gap:20px;

        text-align:center;
    }

    .newsletter-box{

        padding:40px 25px;
    }

    .newsletter-box h2{

        font-size:2rem;
    }

    .archive-grid,
    .posts-grid,
    .index-grid,
    .search-grid{

        grid-template-columns:1fr;
    }

    .single-title{

        font-size:2.4rem;
    }

    .single-meta{

        flex-wrap:wrap;

        gap:20px;
    }

    .post-navigation{

        flex-direction:column;

        gap:20px;
    }

}

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

@media(max-width:580px){

    .container{

        width:92%;
    }

    section{

        padding:80px 0;
    }

    .header-container{

        min-height:75px;
    }

    .logo{

        font-size:1.1rem;
    }

    .logo-icon{

        width:38px;
        height:38px;
    }

    .hero-content h1{

        font-size:2.2rem;

        line-height:1.2;
    }

    .hero-content p{

        font-size:.95rem;
    }

    .hero-badge{

        font-size:.75rem;

        padding:8px 14px;
    }

    .btn-primary,
    .btn-secondary,
    .header-btn{

        width:100%;

        justify-content:center;
    }

    .section-title h2,
    .neo-section-title h2{

        font-size:1.9rem;
    }

    .section-title p{

        font-size:.95rem;
    }

    .feature-card,
    .neo-feature-card,
    .testimonial-card{

        padding:25px;
    }

    .feature-card h3,
    .neo-feature-card h3{

        font-size:1.3rem;
    }

    .stat-box{

        width:100%;
    }

    .editor-canvas{

        width:100%;
        height:320px;

        border-radius:20px;
    }

    .editor-topbar{

        padding:0 15px;
    }

    .editor-btn{

        height:44px;

        padding:0 16px;

        font-size:.85rem;
    }

    .floating-card{

        display:none;
    }

    .newsletter-box{

        padding:30px 20px;
    }

    .newsletter-box h2{

        font-size:1.7rem;
    }

    .newsletter-box p{

        font-size:.95rem;
    }

    .newsletter-input{

        height:54px;
    }

    .footer-socials{

        flex-wrap:wrap;
    }

    .scroll-top{

        width:52px;
        height:52px;

        right:18px;
        bottom:18px;
    }

    .single-title{

        font-size:2rem;
    }

    .single-content{

        font-size:.96rem;
    }

    .author-box{

        flex-direction:column;

        text-align:center;
    }

}

/* =================================================
   EXTRA SMALL DEVICES
================================================= */

@media(max-width:420px){

    .hero-content h1{

        font-size:1.9rem;
    }

    .section-title h2,
    .neo-section-title h2{

        font-size:1.6rem;
    }

    .hero-buttons{

        gap:14px;
    }

    .btn-primary,
    .btn-secondary{

        padding:14px 18px;
    }

    .editor-canvas{

        height:260px;
    }

    .editor-btn{

        font-size:.78rem;

        padding:0 12px;
    }

    .single-title{

        font-size:1.7rem;
    }

    .single-meta{

        flex-direction:column;

        align-items:flex-start;
    }

}

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

@media(max-height:600px)
and (orientation:landscape){

    .hero-section{

        min-height:auto;

        padding:140px 0 80px;
    }

    .editor-layout{

        min-height:100vh;
    }

    .nav-menu{

        overflow-y:auto;
    }

}

/* =================================================
   ULTRA WIDE
================================================= */

@media(min-width:1800px){

    .container{

        width:min(1450px,90%);
    }

    .hero-content h1{

        font-size:5.5rem;
    }

    .section-title h2,
    .neo-section-title h2{

        font-size:4rem;
    }

    .editor-canvas{

        width:1100px;
        height:680px;
    }

}