/* ============================================
   AURONIX — Responsive Stylesheet
   responsive.css
   ============================================ */

/* ---- 1400px Large Screen Reset --- */
@media (max-width: 1400px) {
  .nav-inner { margin-left: 0; }
  .btn-nav { margin-right: 0; }
}

/* ---- 1200px Container clamp --- */
@media (max-width: 1260px) {
  .container { padding: 0 24px; }
  .hero-home-grid { gap: 40px; }
  .about-grid { gap: 48px; }
  .enquiry-grid { gap: 48px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
  .process-steps { grid-template-columns: repeat(5,1fr); gap: 8px; }
  .step-desc { font-size: 0.72rem; padding: 0 4px; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 992px Laptops / Small Desktops --- */
@media (max-width: 992px) {
  :root { --nav-height: 72px; }

  /* Nav */
  .nav-links, .btn-nav { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero Slider */
  .hero-title {
    font-size: 48px;
  }

  .hero-subtext {
    font-size: 16px;
    padding: 0 20px;
  }

  /* Industries */
  .industries-inner { justify-content: center; gap: 24px; }

  /* About preview */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-badge-box { right: 12px; }

  /* Services preview */
  .services-header { flex-direction: column; align-items: flex-start; }
  .services-grid { grid-template-columns: repeat(2,1fr); }

  /* Process */
  .process-steps {
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
  }

  .process-steps::before { display: none; }

  /* Projects */
  .projects-grid {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .project-card-lg { grid-column: span 2; }
  .project-card-sm { grid-column: span 1; }

  /* Enquiry */
  .enquiry-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-bottom { flex-direction: column; text-align: center; }

  /* About page */
  .about-cta-box {
    flex-direction: column;
    padding: 48px 36px;
    text-align: center;
  }

  .team-bento { grid-template-columns: repeat(2,1fr); }
  .team-card-wide { grid-column: span 2; }

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

  /* Services spec grid steps from 4 to 2 columns */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { padding: 36px 28px; }

  /* Contact page */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Grids */
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .offices-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ---- 768px Tablets --- */
@media (max-width: 768px) {

  /* Typography scale */
  .hero-title {
    font-size: 36px;
  }
  .section-title { font-size: clamp(1.7rem,5vw,2.1rem); }
  .section-title-white { font-size: clamp(1.7rem,5vw,2.1rem); }
  .page-hero h1  { font-size: clamp(2.2rem,7vw,3rem); }

  /* Navbar Adjustment */
  .navbar {
    padding: 0 20px;
    height: 70px;
  }

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

  /* Process steps */
  .process-steps { grid-template-columns: repeat(2,1fr); gap: 28px; }

  /* Projects cards */
  .projects-grid { display: flex; flex-direction: column; }
  .project-card { height: 280px; }

  /* Form rows */
  .form-row { grid-template-columns: 1fr; }

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

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  /* Services spec grid — single column */
  .svc-grid { grid-template-columns: 1fr; }

  /* Team */
  .team-bento { grid-template-columns: 1fr; }
  .team-card-wide { grid-column: span 1; }
  .team-card { height: 320px; }

  /* Enquiry form box */
  .enquiry-form-box { padding: 32px 24px; }

  /* CTA */
  .cta-section { padding: 72px 0; }

  /* Page hero */
  .page-hero { min-height: 440px; }
  .page-hero-content { padding: 60px 0; }
  .page-hero-img { display: none; }

  .about-cta-box { padding: 40px 28px; }

  /* Grids & Hero */
  .capabilities-grid { grid-template-columns: 1fr; gap: 24px; }
  .offices-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-title br { display: none; }
}

/* ---- 576px Mobile --- */
@media (max-width: 576px) {

  :root { --nav-height: 64px; }

  .container { padding: 0 16px; }

  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtext {
    font-size: 14px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  /* Industries strip */
  .industries-inner {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
  }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .stat-item-num { font-size: 2.2rem; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; gap: 24px; max-width: 280px; margin: 0 auto; }

  /* Projects */
  .project-card { height: 240px; }

  /* Footer */
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* Success popup */
  .success-popup { right: 16px; left: 16px; max-width: unset; }

  /* About badge box */
  .about-badge-box { right: 0; bottom: -16px; padding: 16px 20px; }
  .about-badge-box .num { font-size: 1.8rem; }

  /* Page hero */
  .page-hero { min-height: 380px; }

  /* CTA section */
  .btn-cta { width: 100%; justify-content: center; }

  /* Mobile nav */
  .mobile-nav { width: 85vw; padding: 90px 28px 36px; }

  /* Enquiry form box */
  .enquiry-form-box { padding: 28px 18px; }

  /* Contact cta btn */
  .about-cta-box { flex-direction: column; align-items: stretch; padding: 32px 24px; gap: 32px; }

  /* Map section */
  .map-section { height: 330px; }

  /* Card paddings */
  .service-card, .capability-card, .svc-card { padding: 28px 20px; }
}

/* ---- 480px Small Mobile --- */
@media (max-width: 480px) {
  .industries-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .phone-input-group {
    flex-direction: column;
    gap: 8px;
  }
  .phone-code-select, .phone-num-input {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ---- 360px Smallest Mobile --- */
@media (max-width: 360px) {
  .industries-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}