/* ==========================================================================
   RESPONSIVE.CSS — mobile-first breakpoint overrides
   ========================================================================== */

/* ============ Tablets & small laptops (<= 1024px) ============ */
@media (max-width: 1024px) {
  :root { --section-pad: 90px; }

  .skills__grid { grid-template-columns: repeat(2, 1fr); }
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* ============ Tablets (<= 860px) ============ */
@media (max-width: 860px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    top: 64px; right: 0;
    height: calc(100vh - 64px);
    width: min(78vw, 320px);
    background: rgba(11, 18, 32, 0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 28px;
    gap: 24px;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link--cta { align-self: flex-start; }

  .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__summary { margin-left: auto; margin-right: auto; }
  .hero__actions, .hero__meta { justify-content: center; }
  .hero__role { justify-content: center; }
  .hero__portrait { order: -1; }
  .hero__portrait-frame { width: 180px; height: 180px; }

  .about__grid { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: 1fr; }
  .projects__grid { grid-template-columns: 1fr; }

  .resume__inner { flex-direction: column; text-align: center; }
  .resume__actions { justify-content: center; }
}

/* ============ Phones (<= 560px) ============ */
@media (max-width: 560px) {
  :root { --section-pad: 64px; }

  .nav__inner { padding: 16px 20px; }
  .hero { padding: 120px 20px 60px; }
  .section { padding: var(--section-pad) 20px; }

  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }

  .timeline { padding-left: 22px; }
  .timeline__marker { left: -22px; }
  .timeline__card { padding: 22px; }

  .pipeline__node { width: 130px; }

  .resume__inner { padding: 32px 24px; }
  .contact__form { padding: 24px; }

  .footer__inner { flex-direction: column; text-align: center; }
  .footer__social { justify-content: center; }
}