/* ============================================================
   GetDunk — Responsive Design
   ============================================================ */

/* ── Tablet (≤992px) ──────────────────────────────────────── */
@media (max-width: 992px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .card-large { grid-column: span 2; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .contact-wrapper {
        grid-template-columns: 1fr;
        padding: var(--space-2xl);
        gap: var(--space-2xl);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer-brand { grid-column: span 2; }
}

/* ── Mobile (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Navigation */
    .nav-links { display: none; }
    .mobile-nav-toggle { display: flex; }

    /* Typography */
    .hero-title { font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.15; }
    .section-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }

    /* Spacing */
    .section-padding { padding: var(--section-spacing-sm) 0; }
    .container { padding: 0 20px; }

    /* Grid layouts */
    .bento-grid { grid-template-columns: 1fr; }
    .card-large { grid-column: span 1; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
    .form-row { grid-template-columns: 1fr; }

    /* Process steps */
    .process-steps::before { left: 30px; }
    .step {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        padding: var(--space-lg);
    }
    .step-number { font-size: 2.5rem; min-width: auto; }

    /* Contact */
    .contact-wrapper { padding: var(--space-lg); gap: var(--space-xl); }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .footer-brand { grid-column: span 1; }
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }

    /* Portfolio */
    .portfolio-content {
        opacity: 1;
        transform: translateY(0);
    }

    /* Clients */
    .clients-static-row { gap: 30px; }
    .clients-static-row img { height: 40px; }

    /* Dashboard */
    .dashboard-layout { position: relative; }
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: var(--z-nav);
        transition: all 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
        background: var(--bg-dark);
        border-right: 1px solid var(--border-color);
    }
    .sidebar.active { left: 0; }
    .sidebar-nav { flex-direction: column; overflow-x: hidden; overflow-y: auto; }

    .dashboard-header {
        height: 70px;
        padding: 0 20px;
        gap: var(--space-sm);
    }
    .header-search { display: none; }
    .projects-grid { grid-template-columns: 1fr; }
    .admin-menu-toggle { display: flex !important; }

    /* Modal */
    .modal-close { top: 12px; right: 12px; width: 36px; height: 36px; }
    .modal-content { padding: var(--space-lg); }

    /* Login */
    .login-card { padding: var(--space-xl) var(--space-lg); }
    .login-header h2 { font-size: 1.5rem; }

    /* Cursor — disable on touch */
    .cursor, .cursor-follower { display: none !important; }
    body, .btn, a, input, textarea, select, button { cursor: auto !important; }

    /* Performance - lighter effects on mobile */
    .glow-orb {
        filter: blur(60px);
        width: 250px !important;
        height: 250px !important;
    }

    /* Invoice table scroll */
    .invoice-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Navbar spacing on mobile viewports */
    .navbar {
        padding: 8px 16px;
    }

    /* Bento Grid (Services/Portfolio) collapse on mobile */
    .bento-layout {
        grid-template-columns: 1fr !important;
        gap: var(--space-md);
    }
    
    .feature-large {
        grid-column: span 1 !important;
        flex-direction: column !important;
        gap: var(--space-lg) !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }
    
    .feature-large .feature-text {
        margin-bottom: 0;
    }
    
    .feature-large .feature-graphic {
        min-height: 200px;
        margin-top: var(--space-md);
    }

    /* Hide overlapping floating emojis on mobile to protect button click targets */
    .floating-emoji {
        display: none !important;
    }
}

/* ── Small phones (≤480px) ────────────────────────────────── */
@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-desc { font-size: 0.95rem; }
    .hero-badge { font-size: 0.6rem; padding: 6px 14px; }

    .btn { padding: 12px 24px; font-size: var(--fs-caption); }
    .btn-lg { padding: 14px 28px; font-size: var(--fs-body-sm); }

    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 2rem; }

    .bento-card { padding: var(--space-lg); }
    .step { padding: var(--space-md); }

    .mobile-menu-link { font-size: 1.8rem; }
    .mobile-menu-container { padding: 100px 24px 24px; }

    .section-header { margin-bottom: var(--space-2xl); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal-up, .reveal-left, .reveal-scale {
        opacity: 1;
        transform: none;
    }
    html { scroll-behavior: auto; }
}