/* ══════════════════════════════════════════════════════════
   TABLET — ≤ 1024px
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
  section { padding: 72px 5% 56px; }

  #profile {
    flex-direction: column;
    text-align: center;
    padding: 52px 5% 48px;
    min-height: fit-content;
    gap: 2rem;
  }
  /* Portrait (4:5 ratio) keeps oval at tablet */
  .section__pic-container { width: 210px; height: 263px; }

  .skills-grid      { grid-template-columns: 1fr 1fr; }
  .experience-grid  { grid-template-columns: 1fr; }
  /* about-stats uses flex-wrap — auto-centers at any chip count */

  .contact-wrapper  { flex-direction: column; }
  .contact-links    { flex: none; width: 100%; }
  .contact-form     { flex: none; width: 100%; }

  .project-card { flex: 0 0 300px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — ≤ 768px
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* Nav */
  #desktop-nav { display: none; }
  #hamburger-nav { display: flex; }

  section { padding: 56px 5% 48px; margin: 0; }

  /* Hero */
  #profile { padding: 40px 5% 40px; gap: 1.6rem; }
  /* Portrait (4:5 ratio) keeps oval on mobile */
  .section__pic-container { width: 172px; height: 215px; }
  .section__text__p2 { font-size: 1.15rem; }
  .hero-tagline { font-size: 0.92rem; }

  .title { font-size: 1.9rem; margin-bottom: 28px; }

  /* About */
  /* about-stats uses flex/wrap — centers automatically at any count */

  /* Skills */
  .skills-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Projects */
  .project-card { flex: 0 0 280px; }

  /* Experience */
  .experience-grid { grid-template-columns: 1fr; gap: 1.2rem; }

  /* Contact */
  .contact-wrapper { gap: 1.2rem; }
  .contact-form { padding: 1.5rem; }
  .contact-links { padding: 1.5rem; }

  /* Buttons — side-by-side, slightly smaller */
  .btn-container { gap: 0.8rem; }
  .btn { padding: 0.7rem 1.3rem; font-size: 0.88rem; }

  /* Footer */
  footer .nav-links { flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════
   SMALL MOBILE — ≤ 480px
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
  #profile { padding: 32px 4% 36px; }
  /* Portrait container — narrower than tall so oval persists */
  .section__pic-container { width: 148px; height: 185px; }

  .title { font-size: 1.65rem; margin-bottom: 20px; }

  /* about-stats auto-centers via flex-wrap */

  .skill-list { grid-template-columns: 1fr 1fr; gap: 0.9rem; }

  .project-card { flex: 0 0 260px; }

  .about-edu-card { flex-direction: column; gap: 0.8rem; }

  .contact-form { padding: 1.2rem; gap: 1rem; }

  /*
   * Hero buttons: keep side-by-side, just shrink padding.
   * Only the contact form submit button goes full-width.
   */
  #profile .btn-container { gap: 0.7rem; }
  #profile .btn { padding: 0.65rem 1.1rem; font-size: 0.85rem; width: auto; }

  /* Contact section submit button goes full-width — correct behaviour */
  .form-submit-btn { width: 100%; }

  footer { padding: 2rem 5%; }
  footer .nav-links { gap: 0.6rem; }
  footer .nav-links a { font-size: 0.82rem; }
}