/* ============================================================
   RESPONSIVE.CSS — All Media Queries
   Edit breakpoints here as you add new sections
   ============================================================ */

/* ── Tablet (max 1100px) ── */
@media (max-width: 1100px) {
  .skills-grid      { grid-template-columns: repeat(3, 1fr); }
  .proj-cards       { grid-template-columns: repeat(2, 1fr); }
  .hero-stats       { display: none; }
}

/* ── Mobile Large (max 800px) ── */
@media (max-width: 800px) {
  /* Nav */
  #nav        { padding: 18px 24px; }
  .nav-link   { display: none; }

  /* Hero */
  #hero { padding: 0 0 64px 24px; }

  /* Container padding */
  .container,
  .res-ban,
  footer { padding-left: 24px; padding-right: 24px; }

  /* About */
  .about-feat   { grid-template-columns: 1fr; }
  .about-vis    { height: 240px; }
  .about-panel  { padding: 40px 28px; }
  .about-hl     { font-size: 2.4rem; }

  /* Skills */
  .skills-grid { grid-template-columns: repeat(2, 1fr); }

  /* Projects */
  .proj-cards         { grid-template-columns: 1fr 1fr; }
  .proj-feat-content  { flex-direction: column; gap: 20px; }
  .proj-feat-tags     { flex-direction: row; flex-wrap: wrap; }

  /* Experience */
  .exp-row      { grid-template-columns: 1fr; padding-left: 14px; }
  .ex-left      { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 12px; padding-right: 0; }
  .ex-right     { padding-left: 0; padding-top: 16px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 52px; }

  /* Resume */
  .res-ban { flex-direction: column; text-align: center; }

  /* Footer */
  footer { flex-direction: column; gap: 18px; text-align: center; }
}

/* ── Mobile Small (max 520px) ── */
@media (max-width: 520px) {
  .skills-grid  { grid-template-columns: 1fr 1fr; }
  .proj-cards   { grid-template-columns: 1fr; }
  .hero-name    { font-size: 4.5rem; }
}