/* ==========================================================================
   NIGHTWING — RESPONSIVE
   Mobile-first overrides layered on top of the desktop-default component
   styles above. Verified against 320 / 360 / 375 / 390 / 412 / 430 / 480 /
   768 / 1024 / 1280 / 1440 / 1920 / ultra-wide.
   ========================================================================== */

/* ---- Ultra-wide: cap content, let background breathe -------------------- */
@media (min-width: 1920px) {
  .container, .nav-inner, .hero-inner, .stat-strip { max-width: 1440px; }
}

/* ---- Large desktop / laptop (<=1280px) ----------------------------------- */
@media (max-width: 1280px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

/* ---- Small laptop / large tablet landscape (<=1024px) --------------------- */
@media (max-width: 1024px) {
  .nav-links { gap: var(--sp-5); }

  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-8); text-align: center; }
  .hero-text .hero-sub, .hero-role-line { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-socials { display: flex; justify-content: center; }
  .hero-visual { order: -1; max-width: 320px; }

  .about-grid { grid-template-columns: 1fr; }
  .about-media { position: static; max-width: 420px; margin-inline: auto; width: 100%; }

  .skills-layout { grid-template-columns: 1fr; }
  .skills-intro { position: static; text-align: left; }
  .skill-categories { flex-direction: row; flex-wrap: wrap; }
  .skill-categories .skill-cat-btn { width: auto; flex: 1 1 auto; }

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

  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ---- Tablet portrait (<=768px) --------------------------------------- */
@media (max-width: 768px) {
  :root { --container-pad: 1.25rem; }

  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--color-border); }

  .about-principles { grid-template-columns: 1fr; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  .projects-toolbar { flex-direction: column; align-items: stretch; }
  .search-wrap { min-width: 0; }
  .projects-grid { grid-template-columns: 1fr; }

  .contact-panel { padding: var(--sp-6); }
  .contact-cta-row { flex-direction: column; align-items: stretch; }
  .contact-cta-row .btn { width: 100%; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Large phones (<=480px) -------------------------------------------- */
@media (max-width: 480px) {
  .hero { padding-top: 6rem; }
  .hero-title { letter-spacing: -0.01em; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-float-card { display: none; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { padding: var(--sp-5) var(--sp-3); }
  .stat-num { font-size: 1.5rem; }

  .skills-grid { grid-template-columns: 1fr; }
  .skill-categories { flex-direction: column; }
  .skill-categories .skill-cat-btn { width: 100%; }

  .project-actions { flex-direction: column; }

  .contact-link-card { padding: var(--sp-3) var(--sp-4); }
  .to-top { right: var(--sp-3); bottom: var(--sp-3); width: 42px; height: 42px; }
}

/* ---- Small phones (<=390px, incl. 375 / 360) ----------------------------- */
@media (max-width: 390px) {
  :root { --container-pad: 1rem; }
  .brand-word { font-size: var(--fs-sm); }
  .hero-visual { max-width: 260px; }
  .section-title { font-size: clamp(1.6rem, 8vw, 2rem); }
}

/* ---- Very small phones (<=320px) ------------------------------------------ */
@media (max-width: 320px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-cell { border-right: none !important; border-bottom: 1px solid var(--color-border); }
  .stat-cell:last-child { border-bottom: none; }
  .filter-row { gap: var(--sp-1); }
  .filter-btn { padding: var(--sp-1) var(--sp-3); font-size: 0.68rem; }
}

/* ---- Short / landscape phones — keep hero from overflowing viewport ------ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 6.5rem 3rem; }
  .scroll-cue { display: none; }
}