/* ============================================================
   DOS2026 — Responsive / Breakpoints
   Mobile-first approach
   Breakpoints: sm 640 | md 768 | lg 1024 | xl 1280
   ============================================================ */

/* ── Tablet and below (< 1024px) ── */
@media (max-width: 1023px) {

  /* Nav */
  .primary-nav,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Mobile nav drawer */
  .mobile-nav {
    display: block;
    position: fixed;
    inset: 72px 0 0 0;
    background-color: var(--color-white);
    overflow-y: auto;
    padding: var(--space-6) var(--container-px);
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-out-expo);
    z-index: var(--z-overlay);
    border-top: 1px solid var(--color-grey-light);
  }

  .mobile-nav.is-open {
    transform: translateX(0);
  }

  .mobile-nav__link {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-blue);
    border-bottom: 1px solid var(--color-grey-light);
    transition: color var(--transition-base);
  }

  .mobile-nav__link:hover { color: var(--color-red); }

  .mobile-nav__sub {
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .mobile-nav__sub a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-base);
    color: var(--color-grey-dark);
    border-bottom: 1px solid var(--color-grey-light);
    transition: color var(--transition-base);
  }

  .mobile-nav__sub a:hover { color: var(--color-red); }

  .mobile-nav__cta {
    margin-top: var(--space-6);
  }

  /* Grids */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero__heading { font-size: clamp(2rem, 5vw, 3.5rem); }

  /* Footer */
  .site-footer__top-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Stats */
  .stats-row { gap: var(--space-8); }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {

  /* Grids go single column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-auto {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero { min-height: 500px; }
  .hero__heading { font-size: clamp(1.75rem, 8vw, 2.75rem); }
  .hero__subheading { font-size: var(--text-base); }

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

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Section headings */
  .section__heading { font-size: var(--text-3xl); }
  .page-hero__heading { font-size: var(--text-4xl); }

  /* CTA banner */
  .cta-banner__heading { font-size: var(--text-3xl); }

  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-banner__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Partners band */
  .partners-band__logos {
    gap: var(--space-8);
  }

  /* Stats */
  .stats-row {
    flex-direction: column;
    gap: var(--space-6);
  }

  /* Mega menu — handled by mobile nav */
  .mega-menu { display: none; }

  /* Testimonial */
  .testimonial { padding: var(--space-6); }

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

  /* Footer */
  .site-footer__phone { font-size: var(--text-2xl); }
  .site-footer__links { flex-direction: column; gap: var(--space-3); }

  /* Solution cards */
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 479px) {

  :root {
    --container-px: 1rem;
    --section-py: 3rem;
  }

  .btn--lg {
    font-size: var(--text-sm);
    padding: 0.875rem 1.5rem;
  }
}

/* ── Large desktop (>= 1280px) ── */
@media (min-width: 1280px) {

  .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ── Two-column split layouts ── */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split-layout--reverse > *:first-child {
  order: 2;
}

.split-layout--reverse > *:last-child {
  order: 1;
}

@media (max-width: 767px) {
  .split-layout,
  .split-layout--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split-layout--reverse > *:first-child,
  .split-layout--reverse > *:last-child {
    order: unset;
  }
}

/* ── Solutions grid (4 col) ── */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1023px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Services archive grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ── Product grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .product-grid { grid-template-columns: 1fr; }
}