/* ============================================================================
 * RESPONSIVE — all viewport-dependent rules.
 *
 * Loaded LAST so it can override component CSS without specificity hacks.
 *
 * Breakpoints:
 *   ≤ 1024px  tablet — collapse nav to hamburger, single-column grids
 *   ≤  640px  mobile — tighten paddings, smaller fonts
 *   ≤  400px  small mobile — extreme tightening
 * ==========================================================================*/


/* ============================================================================
 * ≤ 1024px  — TABLET: hide desktop nav, switch to single-column layouts
 * ==========================================================================*/
@media (max-width: 1024px) {

  /* Nav: hide desktop links, show hamburger */
  .nav-links { display: none !important; }
  .menu-btn  { display: inline-flex !important; }

  /* Push hero socials down so they don't sit under the nav */
  .hero-socials { top: auto; bottom: 28px; right: 28px; }

  /* Stack about layout */
  .about        { grid-template-columns: 1fr; gap: 40px; }
  .avatar-stack { flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; }

  /* Single-column grids */
  .skill-grid,
  .proj-grid,
  .research-grid,
  .edu-grid    { grid-template-columns: 1fr; }

  /* About stats: 3-up → 2-up */
  .about-stats { grid-template-columns: 1fr 1fr; }

  /* Section spacing */
  section       { padding: 80px 0; }
  .section-head { margin-bottom: 40px; }
}


/* ============================================================================
 * ≤ 640px  — MOBILE: tighten paddings, scale down hero, single-column stats
 * ==========================================================================*/
@media (max-width: 640px) {

  /* Outer padding */
  .wrap { padding: 0 20px; }

  /* Nav: smaller height, brand name shrinks */
  .nav-inner { height: 60px; }
  .brand     { font-size: 14.5px; }
  .brand-mark { width: 26px; height: 26px; font-size: 12px; }
  .mobile-menu { inset: 60px 0 auto 0; padding: 12px 20px 20px; }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 110px 0 70px;
  }
  .hero h1 {
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.05;
    margin-bottom: 14px;
  }
  .hero-role { font-size: 17px; margin-bottom: 14px; }
  .hero-tag  { font-size: 15.5px; margin-bottom: 28px; }
  .hero-eyebrow {
    font-size: 11.5px;
    margin-bottom: 22px;
    padding: 5px 11px 5px 7px;
  }

  /* Hero CTAs: full-width buttons stack vertically */
  .hero-cta {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Hero meta line: stack vertically */
  .hero-meta {
    margin-top: 32px;
    flex-direction: column;
    gap: 10px;
    font-size: 12.5px;
  }

  /* Hero socials: hide on small screens to keep things clean
     (LinkedIn / GitHub / email all reachable via the contact section) */
  .hero-socials { display: none; }

  /* Hide the scroll hint — too cluttered on mobile */
  .scroll-hint { display: none; }

  /* Avatar smaller and stacked horizontally on mobile */
  .avatar-stack { gap: 16px; }
  .avatar { width: 110px; height: 110px; font-size: 36px; border-width: 2px; }

  /* About copy size */
  .about p { font-size: 15.5px; line-height: 1.7; }

  /* About stats: single column */
  .about-stats { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .stat { padding: 14px 16px; }
  .stat .v { font-size: 22px; }

  /* Section heads */
  .section-head h2 { font-size: clamp(24px, 6.4vw, 32px); }
  .section-head p  { font-size: 15px; }

  /* Section padding */
  section { padding: 64px 0; }

  /* Skill cards */
  .skill-card { padding: 22px; }
  .skill-card h3 { font-size: 15.5px; }

  /* Project cards */
  .proj { padding: 22px 22px 18px; }
  .proj h3 { font-size: 17.5px; }
  .proj-pills { max-width: 60%; }

  /* Research cards */
  .research { padding: 24px; }
  .research h3 { font-size: 19px; }
  .research-meta { font-size: 12.5px; }
  .research p { font-size: 14.5px; }

  /* Timeline: tighter indent */
  .timeline { padding-left: 22px; }
  .tl-item  { padding: 0 0 32px 14px; }
  .tl-item::before { left: -28px; }
  .tl-item h3 { font-size: 16.5px; }

  /* Education cards */
  .edu { padding: 22px; }
  .edu h3 { font-size: 17px; }

  /* Contact card */
  .contact-card {
    padding: 44px 22px;
    border-radius: 14px;
  }
  .contact-card h2 { font-size: clamp(24px, 6.4vw, 34px); }
  .contact-card p  { font-size: 15px; }
  .contact-actions { flex-direction: column; gap: 10px; }
  .contact-actions .btn { width: 100%; justify-content: center; }

  /* Footer: stack vertically */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 32px 0 48px;
    font-size: 12.5px;
  }

  /* Back-to-top: smaller, tighter to the corner */
  .top-btn {
    right: 18px; bottom: 18px;
    width: 40px; height: 40px;
  }
}


/* ============================================================================
 * ≤ 400px  — SMALL MOBILE: extreme tightening for the iPhone SE / Galaxy A
 * ==========================================================================*/
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }

  .brand-mark { width: 24px; height: 24px; font-size: 11px; }
  .brand      { font-size: 13.5px; gap: 8px; }

  .hero h1 { font-size: clamp(32px, 9.5vw, 44px); }

  .stat .v   { font-size: 20px; }
  .proj h3   { font-size: 16.5px; }
  .skill-card { padding: 20px; }
}