/* ==========================================================
   RESPONSIVE DESIGN
   Joshua David Gawat Portfolio
========================================================== */
/* ==========================================================
   LARGE LAPTOPS
========================================================== */
@media (max-width:1200px){
    .container{
        width:min(94%,1100px);
    }
    .hero-grid{
        gap:50px;
    }
    .project-card{
        gap:30px;
    }
}
/* ==========================================================
   TABLETS
========================================================== */
@media (max-width:992px){
    .section{
        padding:90px 0;
    }
    /* ---------------- HERO ---------------- */
    .hero{
        padding-top:150px;
    }
    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }
    .hero-content{
        order:2;
    }
    .hero-image{
        order:1;
        max-width:420px;
        margin:auto;
    }
    .hero-description{
        margin-inline:auto;
    }
    .hero-buttons{
        justify-content:center;
    }
    /* ---------------- STATS ---------------- */
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
    /* ---------------- ABOUT ---------------- */
    .about-grid{
        grid-template-columns:1fr;
    }
    .info-card{
        position:static;
    }
    /* ---------------- EXPERIENCE ---------------- */
    .timeline{
        padding-left:30px;
    }
    .timeline-dot{
        left:-24px;
    }
    /* ---------------- PROJECTS ---------------- */
    .project-card{
        grid-template-columns:1fr;
    }
    .project-card:nth-child(even){
        direction:ltr;
    }
    /* ---------------- CLIENT WEBSITES ---------------- */
    .clients-heading{
        margin:80px auto 40px;
    }
    /* ---------------- DASHBOARD EMBED ---------------- */
    .dashboard-embed{
        height:340px;
    }
    /* ---------------- BLOG CARD ---------------- */
    .blog-card{
        flex-direction:column;
    }
    .blog-card-image{
        flex:0 0 auto;
        height:200px;
    }
    /* ---------------- RESUME ---------------- */
    .resume-wrapper{
        grid-template-columns:1fr;
    }
    /* ---------------- CONTACT ---------------- */
    .contact-grid{
        grid-template-columns:1fr;
    }
}
/* ==========================================================
   MOBILE NAVIGATION
========================================================== */
@media (max-width:768px){
    .mobile-menu-btn{
        display:grid;
    }
    .nav-links{
        position:fixed;
        top:80px;
        right:-100%;
        width:280px;
        height:calc(100vh - 80px);
        background:var(--surface);
        border-left:1px solid var(--border);
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:40px 30px;
        gap:28px;
        transition:.35s ease;
        box-shadow:-10px 0 30px rgba(0,0,0,.08);
    }
    .nav-links.active{
        right:0;
    }
    .nav-links li{
        width:100%;
    }
    .nav-links a{
        display:block;
        width:100%;
        font-size:1rem;
    }
    /* ---------------- CLIENT WEBSITES ---------------- */
    .clients-grid{
        grid-template-columns:1fr;
    }
    .client-content{
        padding:22px;
    }
    /* ---------------- VIDEOS ---------------- */
    .videos-grid{
        grid-template-columns:1fr;
    }
}
/* ==========================================================
   LANDSCAPE PHONES
========================================================== */
@media (max-height:600px) and (orientation:landscape){
    .hero{
        padding-top:120px;
    }
    .section{
        padding:60px 0;
    }
    .nav-links{
        overflow-y:auto;
        padding-bottom:40px;
    }
}
/* ==========================================================
   LARGE DESKTOPS
========================================================== */
@media (min-width:1400px){
    .container{
        max-width:1320px;
    }
    .hero-grid{
        gap:100px;
    }
    .stats-grid{
        gap:32px;
    }
    .projects-grid{
        gap:50px;
    }
    .recognition-grid{
        gap:40px;
    }
    .clients-grid{
        gap:36px;
    }
}
/* ==========================================================
   ULTRA-WIDE MONITORS
========================================================== */
@media (min-width:1800px){
    html{
        font-size:18px;
    }
    .container{
        max-width:1500px;
    }
}
/* ==========================================================
   HOVER DEVICES
========================================================== */
@media (hover:hover){
    .project-card:hover{
        transform:translateY(-10px);
    }
    .skill-card:hover{
        transform:translateY(-8px);
    }
    .certificate-card:hover{
        transform:translateY(-10px);
    }
    .timeline-card:hover{
        transform:translateY(-8px);
    }
    .client-card:hover{
        transform:translateY(-8px);
    }
}
/* ==========================================================
   TOUCH DEVICES
========================================================== */
@media (hover:none){
    .project-card:hover,
    .skill-card:hover,
    .certificate-card:hover,
    .timeline-card:hover,
    .client-card:hover{
        transform:none;
    }
}
/* ==========================================================
   PRINT
========================================================== */
@media print{
    header,
    footer,
    #loader,
    #backToTop,
    .background-grid,
    .gradient-orb,
    .mouse-glow{
        display:none !important;
    }
    body{
        background:#fff;
        color:#000;
    }
    .section{
        padding:30px 0;
        break-inside:avoid;
    }
    .project-card,
    .timeline-card,
    .skill-card,
    .certificate-card,
    .client-card{
        box-shadow:none;
        border:1px solid #ddd;
    }
}
/* ==========================================================
   REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }
    *{
        animation:none !important;
        transition:none !important;
    }
}
/* ==========================================================
   HIGH CONTRAST
========================================================== */
@media (prefers-contrast:more){
    :root{
        --border:#555;
    }
    .btn-primary{
        border:2px solid currentColor;
    }
    .project-card,
    .timeline-card,
    .skill-card,
    .certificate-card,
    .client-card{
        border-width:2px;
    }
}