/* ================================================================
   RESPONSIVE.CSS — Mobile-first responsive design
   ================================================================ */

/* ── TABLET (≤ 900px) ── */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }

  .hero { padding: 110px 0 70px; }
  .hero-badges { display: none; }
  .hero h1 { letter-spacing: -2px; }
  .hero-stats { gap: 24px; margin-top: 44px; padding-top: 36px; }
  .stat-num { font-size: 28px; }

  section { padding: 72px 0; }
  .section-title { margin-bottom: 40px; }

  .timeline-item { padding: 28px 28px 28px 32px; }

  .skills-grid   { grid-template-columns: 1fr 1fr; }
  .arch-grid     { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .learning-grid { grid-template-columns: 1fr 1fr; }
  .edu-grid      { grid-template-columns: 1fr 1fr; }

  .contact-links { gap: 10px; }
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {

  /* ── Mobile Nav ── */
  .hamburger {
    display: flex;
    z-index: 700;
    position: relative;
  }

  /* Slide-in drawer */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: min(300px, 85vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #0b1018;
    border-left: 1px solid var(--border);
    height: 100vh;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    padding: 96px 28px 40px;
    transition: right 0.35s cubic-bezier(.22,1,.36,1);
    z-index: 9950;
    list-style: none;
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  }
  .nav-links.open { right: 0; }

  /* Every list item full-width */
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  /* Remove border from last item (Resume button) */
  .nav-links li:last-child { border-bottom: none; }

  /* All nav links */
  .nav-link {
    display: block;
    padding: 16px 0;
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--text);
    width: 100%;
  }
  .nav-link:hover { color: var(--accent); }
  .nav-link::after { display: none; }

  /* Resume button inside drawer */
  .nav-links .btn-sm {
    display: inline-flex;
    margin-top: 24px;
    font-size: 12px;
    padding: 10px 20px;
  }

  /* Cursor — hide on touch */
  .cursor, .cursor-ring { display: none; }

  /* ── Hero ── */
  .hero { padding: 100px 0 64px; }
  .hero h1 {
    font-size: clamp(36px, 11vw, 56px);
    letter-spacing: -2px;
  }
  .hero-sub { font-size: 13px; margin: 20px 0 32px; }
  .hero-cta { gap: 10px; }
  .btn { padding: 12px 22px; font-size: 11px; }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: 36px;
    padding-top: 28px;
  }
  .stat-divider { display: none; }
  .stat-num { font-size: 26px; }
  .stat-label { font-size: 10px; }

  .scroll-hint { display: none; }

  /* ── Layout ── */
  .container { padding: 0 18px; }
  section { padding: 60px 0; }
  .section-title {
    font-size: clamp(24px, 7vw, 34px);
    letter-spacing: -1px;
    margin-bottom: 32px;
  }

  /* ── Timeline ── */
  .timeline-item {
    padding: 22px 20px 22px 24px;
  }
  .tl-top { flex-direction: column; gap: 8px; }
  .tl-meta { text-align: left; }
  .tl-role { font-size: 17px; }
  .tl-bullets li { font-size: 12px; }

  /* ── Skills ── */
  .skills-grid { grid-template-columns: 1fr; gap: 14px; }
  .skill-card { padding: 22px; }

  /* ── Architecture ── */
  .arch-grid { grid-template-columns: 1fr; gap: 14px; }
  .arch-card { padding: 24px; }
  .arch-title { font-size: 16px; }
  .arch-node { font-size: 10px; }

  /* ── Projects ── */
  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-card { padding: 24px; }
  .project-num { font-size: 36px; }
  .project-title { font-size: 16px; }
  .project-featured-label {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
  }

  /* ── Learning ── */
  .learning-grid { grid-template-columns: 1fr; gap: 14px; }
  .learning-card { padding: 24px; }

  /* ── Education ── */
  .edu-grid { grid-template-columns: 1fr; gap: 14px; }
  .edu-card { padding: 24px; }

  /* ── Contact ── */
  .contact-title {
    font-size: clamp(26px, 8vw, 40px);
    letter-spacing: -1.5px;
  }
  .contact-links { flex-direction: column; align-items: stretch; }
  .contact-link {
    padding: 14px 18px;
    font-size: 12px;
    justify-content: flex-start;
  }

  /* ── Footer ── */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* ── SMALL MOBILE (≤ 380px) ── */
@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .hero-cta { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 16px 20px; }
}

/* ── LARGE DESKTOP (≥ 1280px) ── */
@media (min-width: 1280px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
  .learning-grid { grid-template-columns: repeat(3, 1fr); }
  .arch-grid     { grid-template-columns: repeat(3, 1fr); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-content > * { opacity: 1; transform: none; }
  .tech-badge { opacity: 1; }
}

/* ── PRINT ── */
@media print {
  nav, .scroll-hint, .cursor, .cursor-ring,
  .blob, .grid-bg, .hero-badges { display: none !important; }
  body { background: white; color: black; }
  section { padding: 24px 0; }
}