/* ==========================================================================
   MenQor Holdings — responsive.css
   Mobile-first: style.css holds the smallest-phone base. Every rule below
   is a min-width override layered on top as the viewport grows. No
   animation code (see animations.css). No property is redeclared with the
   same value as style.css — only new breakpoint-specific values.
   ========================================================================== */

/* ==========================================================================
   1. Large Phones — 480px+
   ========================================================================== */
@media (min-width: 480px) {
  .container,
  .nav__inner,
  .hero,
  .about-preview, .vision, .innovation, .industries,
  .featured-projects, .global-presence, .news-preview, .careers-teaser,
  .site-footer {
    padding-inline: var(--space-4);
  }
}

/* ==========================================================================
   2. Tablets — 768px+
   ========================================================================== */
@media (min-width: 768px) {
  .industries__grid,
  .projects__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .stats__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .footer__legal { grid-column: 1 / -1; }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   3. Laptops — 1024px+
   Nav switches here (not 768px) — 7 links + logo + CTA don't comfortably
   fit one row until this width at this type scale.
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --space-7: 8rem; }

  .hero { padding-inline: var(--space-6); }
  .timeline { max-width: 720px; }
  .industry-card, .project-card { padding: var(--space-5); }

  .nav__toggle { display: none; }
  .nav__menu {
    position: static;
    inset: auto;
    flex-direction: row;
    gap: 1.25rem; /* tighter than --space-3 — needed for 7 links + logo + CTA to fit at this width */
    background: none;
    backdrop-filter: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==========================================================================
   4. Desktops — 1280px+
   ========================================================================== */
@media (min-width: 1280px) {
  .industries__grid,
  .projects__grid {
    gap: var(--space-4);
  }
  .nav__menu { gap: var(--space-3); } /* more room opens up — relax back to standard gap */
}

/* ==========================================================================
   5. Ultra-wide — 1600px+
   Content stays centered and capped rather than stretching edge to edge —
   one custom-property change cascades to every section that references it.
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --container-max: 1400px;
    --space-7: 10rem;
  }
  .hero__content { max-width: 900px; }
}