/* ==========================================================================
   Responsive — Mobile-first overrides
   Breakpoints: 1920 / 1440 / 1024 / 768 / 375 / 320
   ========================================================================== */

/* Large desktops (1920) */
@media (max-width: 1920px) {
    :root { --container: 1280px; }
}

/* Desktop (1440) */
@media (max-width: 1440px) {
    .container { max-width: 1200px; }
}

/* Laptop / small desktop (1024) */
@media (max-width: 1024px) {
    :root {
        --container: 960px;
    }

    .hero-grid,
    .about-grid,
    .case {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .services-grid,
    .projects-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .devops-stack { grid-template-columns: repeat(2, 1fr); }
    .contact-wrap { grid-template-columns: 1fr; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .education { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet (768) */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    section { padding: 80px 0; }
    .hero { padding: 120px 0 60px; min-height: auto; }

    /* Hamburger nav */
    .hamburger { display: flex; }
    .nav-links {
        position: fixed;
        inset: 64px 16px auto 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 18px;
        background: rgba(11, 14, 20, 0.95);
        backdrop-filter: blur(18px);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        transform: translateY(-12px) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s var(--ease);
    }
    .nav-links.open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links a { padding: 14px 16px; font-size: 1rem; }
    .nav-cta { margin-top: 8px; text-align: center; }

    .hero-cta { flex-direction: column; align-items: flex-start; }
    .hero-meta { gap: 18px; }

    .services-grid,
    .projects-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }
    .devops-stack { grid-template-columns: 1fr; }
    .education { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }

    .form-row { grid-template-columns: 1fr; }
    .case { padding: 24px; }

    .resume-box { padding: 32px 24px; }

    /* Pipeline stacks */
    .pipeline { flex-direction: column; }
    .pipe-arrow {
        transform: rotate(90deg) translateX(-6px);
        margin: 0;
    }
    .pipe-arrow.in-view {
        transform: rotate(90deg) translateX(0);
    }
}

/* Mobile (375) */
@media (max-width: 480px) {
    .container { padding: 0 18px; }
    h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .hero { padding: 110px 0 50px; }
    .terminal-body { padding: 18px; font-size: 0.82rem; }
    .filter-bar { gap: 6px; }
    .filter-btn { padding: 7px 12px; font-size: 0.78rem; }
    .resume-actions { flex-direction: column; width: 100%; }
    .resume-actions .btn { width: 100%; }
    .hero-cta .btn { width: 100%; }
    .toast { right: 12px; left: 12px; max-width: none; }
}

/* Very small phones (320) */
@media (max-width: 360px) {
    body { font-size: 15px; }
    .container { padding: 0 14px; }
    .card, .service-card, .proc-step, .edu-card { padding: 20px; }
    .form, .contact-info { padding: 22px; }
    .nav { padding: 10px 0; }
}

/* ==========================================================================
   HOME PAGE — Bento responsive overrides
   ========================================================================== */

/* Laptop / small desktop (1024) — collapse bento, keep 2-col stats */
@media (max-width: 1024px) {
    .bento-about,
    .featured-row,
    .bento-services,
    .pipeline-frame,
    .cta-grid { grid-template-columns: 1fr; }
    .bento-about .tiles .tall { grid-row: auto; }
    .bento-services .hero-card { grid-column: 1 / -1; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stats-row .stat.feature { grid-column: 1 / -1; }
    .pipeline-frame .lead-text { padding-right: 0; }
}

/* Tablet (768) — single column everywhere */
@media (max-width: 768px) {
    .bento-about .tiles { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr; }
    .stats-row .stat.feature { padding: 22px; }
    .featured-card { padding: 24px; }
    .featured-card .ascii { font-size: 1.8rem; }
    .featured-card h3 { font-size: 1.25rem; }
    .focus-card { padding: 22px; }
    .bento-services { grid-template-columns: 1fr; }
    .bento-services .hero-card { padding: 24px; }
}

/* Phone (480) */
@media (max-width: 480px) {
    .hero-proof { font-size: 0.74rem; gap: 8px 14px; padding-top: 22px; }
    .hero-proof .sep { display: none; }
    .hero-proof > span { display: inline-block; padding: 4px 10px; background: var(--surface);
                          border: 1px solid var(--border); border-radius: 999px; }
    .stat .num { font-size: 1.6rem; }
    .stat { padding: 18px; }
    .stat.feature { padding: 20px; }
    .featured-card .tags span { font-size: 0.68rem; padding: 3px 8px; }
}

/* Very small (360) */
@media (max-width: 360px) {
    .stat.feature { padding: 16px; }
    .featured-card { padding: 18px; }
}