/* ===== Responsive — Mobile First ===== */
/* Base styles in other files are mobile-first */
/* Breakpoints: sm=480, md=768, lg=1024, xl=1280 */

/* ── 480px+ ── */
@media (min-width: 480px) {
  .hero-title { font-size: var(--text-4xl); }
  .section-title { font-size: var(--text-3xl); }
}

/* ── 768px+ ── */
@media (min-width: 768px) {
  :root { --section-py: var(--sp-20); }

  .nav-menu { display: flex; }
  .nav-toggle { display: none !important; }
  .nav-actions .btn-primary { display: inline-flex; }

  .hero-container { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: var(--text-4xl); }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1.6fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── 1024px+ ── */
@media (min-width: 1024px) {
  .hero-title { font-size: var(--text-5xl); }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 1280px+ ── */
@media (min-width: 1280px) {
  .hero-container { gap: var(--sp-20); }
}

/* ══════════════════════════════════════════
   MOBILE OVERRIDES (max-width queries)
   ══════════════════════════════════════════ */

/* Under 768px */
@media (max-width: 767px) {
  :root {
    --section-py: var(--sp-16);
    --text-5xl: 2.4rem;
    --text-4xl: 2rem;
    --text-3xl: 1.6rem;
  }

  /* Nav */
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-primary { display: none; }
  .logo-sub { display: none; }
  .nav-logo { font-size: var(--text-base); }

  /* Hero: stack vertically */
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding: var(--sp-12) var(--sp-5);
    text-align: center;
  }
  .hero-desc { margin: 0 auto var(--sp-8); }
  .hero-actions { justify-content: center; }
  .hero-metrics { justify-content: center; }
  .hero-badge { font-size: 0.65rem; }

  /* Terminal — reduce size */
  .terminal-body { min-height: 200px; }
  .visual-badges { justify-content: center; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    background: none;
    border: none;
    gap: var(--sp-4);
  }
  .stat-block {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
  }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .about-content .section-title { text-align: center; }
  .about-content .section-tag { text-align: center; }
  .about-certs { justify-content: center; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-info { flex-direction: row; flex-wrap: wrap; gap: var(--sp-5); }
  .info-block { min-width: 140px; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  /* Mega menu — disabled on mobile (using drawer instead) */
  .mega-menu { display: none !important; }

  /* Hero ascii — hide on small screens */
  .hero-ascii { display: none; }

  /* Cursor glow — disable on touch devices */
  .cursor-glow { display: none; }
}

/* Under 480px */
@media (max-width: 479px) {
  .hero-metrics { flex-direction: column; gap: var(--sp-4); }
  .metric-divider { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; gap: var(--sp-2); }
  .about-certs { flex-direction: column; align-items: flex-start; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}