/* ═══════════════════════════════════════════════════
   mobile.css — All responsive / breakpoint overrides
   ═══════════════════════════════════════════════════ */

/* ── ≤ 900px (tablet + large mobile) ── */
@media (max-width: 900px) {
  /* Layout */
  .about-wrap    { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
  .contact-card  { padding: 32px 28px; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid     { grid-template-columns: 1fr; }
  .blog-modal    { padding: 28px 24px; }
}

/* ── ≤ 768px (mobile background scale) ── */
@media (max-width: 768px) {
  .bg-layer { transform: scale(1.18); transform-origin: top center; }
}

/* ── ≤ 700px (experience stacking) ── */
@media (max-width: 700px) {
  .edu-grid  { grid-template-columns: 1fr; }
  .exp-top   { flex-direction: column; }
}

/* ── ≤ 680px (mobile nav) ── */
@media (max-width: 680px) {
  .nav-ham               { display: flex; }
  .nav-links, .nav-sep   { display: none; }
  .nav-capsule           { padding: 8px 10px 8px 18px; }
}

/* ── ≤ 600px (small mobile) ── */
@media (max-width: 600px) {
  /* Base */
  section  { padding: 44px 5%; }
  footer   { flex-direction: column; gap: 10px; text-align: center; }

  /* Hero */
  .hero-stats  { gap: 8px; }
  .stat-chip   { padding: 10px 14px; }
  .hero-cta    { flex-direction: column; align-items: center; }
  .timeline    { padding-left: 30px; }

  /* Projects / Websites */
  .proj-modal-box   { padding: 28px 20px 24px; }
  .websites-grid    { grid-template-columns: 1fr; }
  .site-preview     { height: 160px; }

  /* Skills — Technical (2 col) */
  .sk-card { width: calc(50% - 8px); flex: 0 0 calc(50% - 8px); }

  /* Skills — Tools (3 col) */
  .tool-card   { width: calc(33.333% - 11px); flex: 0 0 calc(33.333% - 11px); height: auto; min-height: 110px; padding: 14px 8px; gap: 7px; }
  .tool-logo   { width: 36px; height: 36px; }
  .tool-name   { font-size: 10px; }
  .tool-desc   { display: none; }

  /* Skills — Hardware (2 col) */
  .hw-card      { width: calc(50% - 10px); flex: 0 0 calc(50% - 10px); padding: 16px 12px; }
  .hw-img-wrap  { height: 100px; }
  .hw-name      { font-size: 11px; }
  .hw-desc      { font-size: 10px; }
}

/* ── ≤ 400px (tiny screens) ── */
@media (max-width: 400px) {
  .proj-modal-layman { font-size: 13.5px; }
}