/* ============================================================
   RESPONSIVE — All breakpoints in one place
   ============================================================ */

/* ── Tablet (≤ 860px) ───────────────────────────────────────── */
@media (max-width: 860px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .stack-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Mobile (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --nav-height: 54px;
  }

  /* Hero stacks vertically, photo above text */
  .hero {
    padding: var(--space-10) 0 var(--space-10);
  }

  .hero-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .hero-bio {
    max-width: 100%;
  }

  .profile-photo {
    width: 120px;
    height: 120px;
  }

  /* Experience: date/location wraps under company */
  .exp-top {
    flex-direction: column;
    gap: 2px;
  }

  .exp-sub {
    flex-direction: column;
    gap: 0;
  }

  .exp-date,
  .exp-location {
    font-size: var(--text-xs);
  }

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

  /* Hobbies: 3 columns on mobile */
  .hobbies-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Education coursework padding */
  .edu-coursework {
    padding-left: 0;
    margin-top: var(--space-3);
  }

  /* Footer stacks */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ── Very small (≤ 380px) ───────────────────────────────────── */
@media (max-width: 380px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }

  .hero-cta-links {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .nav,
  .hero-cta-links,
  .project-links,
  .footer-links {
    display: none;
  }

  body {
    font-size: 12px;
    color: #000;
  }

  .hero {
    padding: 0 0 24px;
  }

  .project-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}