/* ================================================================
   RESPONSIVE - mobile-first overrides, no horizontal overflow.
   ================================================================ */

@media (max-width: 1080px) {
  .wrap { padding: 0 28px; }
  :root { --space-xl: 96px; --space-2xl: 128px; }
}

@media (max-width: 1150px) {
  /* nav collapses to hamburger here, not at 900px: 7 links + logo + Resume
     button in one unwrapped flex row measure to roughly 1050-1100px wide,
     so anything narrower than that was clipping/overflowing the fixed nav
     on common tablet widths (iPad landscape is 1024px). */
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-cta.desktop-only { display: none; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 190;
    background: var(--bg);
    display: flex; flex-direction: column;
    padding: 100px 28px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease-in-out);
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a {
    font-family: var(--font-display); font-size: 1.9rem;
    padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .mobile-menu .mm-cta { margin-top: 28px; justify-content: center; }
}

@media (max-width: 900px) {
  .two-col, .three-col, .project-grid, .cert-grid, .skills-grid, .stats-row {
    grid-template-columns: 1fr !important;
  }
  .hero-visual { order: -1; margin-bottom: 32px; }
}

@media (max-width: 640px) {
  :root { --space-lg: 56px; --space-xl: 72px; --space-2xl: 88px; }
  .wrap { padding: 0 20px; }
  section { padding: var(--space-xl) 0; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .timeline-item { grid-template-columns: 1fr !important; gap: 8px !important; }
  .timeline-item .tl-date { order: -1; }
  .filter-row { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .display-1 { font-size: 2.2rem; }
  .btn { padding: 12px 20px; font-size: 0.86rem; }
  .mobile-menu a { font-size: 1.5rem; }
  .mobile-menu { padding: 90px 22px 32px; }
}