/* ==========================================================================
   RESPONSIVE — 1440 / 1024 / 768 / 576 / 390
   ========================================================================== */

/* ============ 1440px and down (large laptops) ============ */
@media (max-width: 1440px) {
  :root { --container-w: 1120px; }
}

/* ============ 1024px (tablet landscape) ============ */
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .hamburger { display: flex; }

  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-left { order: 2; }
  .hero-right { order: 1; margin-bottom: 1rem; }
  .hero-actions, .hero-socials { justify-content: center; }
  .hero-text { margin-inline: auto; }
  .hero-photo-wrap { width: min(340px, 80%); }

  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-card:nth-child(4), .quick-card:nth-child(5) { grid-column: span 1; }

  .about-grid { grid-template-columns: 1fr; }
  .about-image { max-width: 420px; margin-inline: auto; }

  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .skills-grid { grid-template-columns: 1fr; gap: 3rem; }

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

  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .masonry { columns: 2; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* ============ 768px (tablet portrait) ============ */
@media (max-width: 768px) {
  :root { --section-pad: 4.5rem; }

  .navbar { padding: 1.1rem 0; }

  .nav-menu {
    display: block;
    position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 80%);
    background: var(--c-white);
    box-shadow: -10px 0 40px rgba(31,41,55,0.12);
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    z-index: 999;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu ul { flex-direction: column; gap: 1.6rem; }

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

  .profile-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }

  .project-grid { grid-template-columns: 1fr; }

  .timeline::before { left: 18px; }
  .timeline-item, .timeline-item:nth-child(even) {
    width: 100%; left: 0; padding: 0 0 2.4rem 3rem; text-align: left;
  }
  .timeline-dot, .timeline-item:nth-child(even) .timeline-dot {
    left: 11px; right: auto;
  }

  .masonry { columns: 2; }

  .focus-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ============ 576px (large phones) ============ */
@media (max-width: 576px) {
  .container { padding-inline: 1.25rem; }

  .hero { padding-top: 5.5rem; }
  .badge { font-size: 0.8rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .gcard-1, .gcard-2 { display: none; }

  .quick-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .quick-card { padding: 1.4rem 1rem; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }

  .about-image-frame { aspect-ratio: 1 / 1; }

  .masonry { columns: 1; }

  .contact-form { padding: 1.8rem; }

  .nav-actions .btn-secondary span { display: none; }
  .nav-actions .btn-secondary { padding: 0.7rem; }
}

/* ============ 390px (small phones) ============ */
@media (max-width: 390px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .hero-photo-wrap { width: 88%; }
  .section-title { font-size: 1.7rem; }
  .quote blockquote { font-size: 1.25rem; }
}