/* ==========================================================================
   KSPTech — Responsive Rules
   Mobile-first overrides layered on top of style.css
   ========================================================================== */

/* ---------- ≤1280px : tighten container, scale 4-col grids to 3 ---------- */
@media (max-width: 1280px) {
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤1024px : tablets ---------- */
@media (max-width: 1024px) {
  :root { --space-24: 4.5rem; --space-32: 6rem; }

  .nav-links { gap: var(--space-6); }
  .hero .container { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .hero-copy p { max-width: none; }

  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split-visual { order: -1; }

  .card-grid, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }

  .process-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-12); }
  .process-track::before { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }

  .service-detail { grid-template-columns: 1fr; gap: var(--space-8); }
  .service-detail:nth-of-type(even) .service-detail-visual { order: -1; }

  .mission-vision { grid-template-columns: 1fr; }
}

/* ---------- ≤768px : mobile ---------- */
@media (max-width: 768px) {
  :root { --nav-h: 72px; --nav-h-scrolled: 60px; --space-24: 3.5rem; }

  .container { padding-inline: var(--space-4); }

  .nav-links { display: none; }
  .nav-right .btn-primary { display: none; }
  .hamburger { display: flex; }

  .hero { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-16); }
  .hero-copy h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .float-card { display: none; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .stat .stat-number { font-size: var(--fs-3xl); }

  .section-head h2 { font-size: var(--fs-3xl); }
  .card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }

  .process-track { grid-template-columns: 1fr; }

  .cta-section h2 { font-size: var(--fs-3xl); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: 1; }

  .job-card { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .job-card .btn { width: 100%; }

  .page-hero { padding-top: calc(var(--nav-h) + var(--space-10)); padding-bottom: var(--space-10); }
  .page-hero h1 { max-width: none; }

  .filter-bar { gap: var(--space-2); }
  .filter-btn { padding: 0.5rem 1rem; font-size: var(--fs-xs); }

  .modal { padding: var(--space-6); max-height: 90vh; }
}

/* ---------- ≤425px : small phones ---------- */
@media (max-width: 425px) {
  .logo { font-size: 1.25rem; }
  .logo small { display: none; }

  .hero-copy h1 { font-size: 1.9rem; }
  .hero-copy p { font-size: var(--fs-base); }

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

  .section { padding-block: var(--space-16); }
  .section-head { margin-bottom: var(--space-10); }

  .service-card, .job-card, .info-card { padding: var(--space-6); }

  .error-code { font-size: 4.5rem; }

  .mobile-menu a { font-size: var(--fs-2xl); }
}

/* ---------- ≤375px / 320px : extra-small ---------- */
@media (max-width: 375px) {
  .container { padding-inline: var(--space-3); }
  .btn { padding: 0.8rem 1.4rem; font-size: var(--fs-xs); }
  .hero-copy h1 { font-size: 1.7rem; }
  .tech-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Landscape phones (short viewport) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mobile-menu { justify-content: flex-start; overflow-y: auto; padding-top: calc(var(--nav-h) + var(--space-4)); }
  .mobile-menu a { font-size: var(--fs-xl); padding: var(--space-2) 0; }
}