/* =========================================================
   DIEHL — Responsive Overrides
   Mobile-first breakpoints layered on top of style.css and
   components.css. Tested at 1920x1080, 1440x900, 768x1024,
   390x844.
   ========================================================= */

/* ---- Laptop / small desktop (<=1440px) ----------------------- */
@media (max-width: 1440px) {
  .business-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Tablet (<=1024px) ----------------------------------------- */
@media (max-width: 1024px) {
  .business-grid,
  .career-grid,
  .focus-grid { grid-template-columns: repeat(2, 1fr); }

  .feature-grid,
  .stat-grid,
  .region-grid { grid-template-columns: repeat(2, 1fr); }

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

  .split,
  .contact-layout { grid-template-columns: 1fr; }
  .split-media { order: -1; }

  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }

  .hero { min-height: 70vh; }
}

/* ---- Mobile navigation switch (<=900px) -------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--gutter);
    gap: 0.5rem;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a {
    width: 100%;
    padding-block: 0.85rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-border);
  }
  .header-actions .btn-primary { display: none; }
}

/* ---- Mobile (<=640px) --------------------------------------------- */
@media (max-width: 640px) {
  :root { --header-height: 72px; }

  .business-grid,
  .career-grid,
  .focus-grid,
  .feature-grid,
  .stat-grid,
  .region-grid,
  .capability-detail-grid { grid-template-columns: 1fr; }

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

  .footer-top { grid-template-columns: 1fr; row-gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .hero { min-height: 78vh; align-items: flex-end; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .cta-actions,
  .cta-banner .hero-actions { flex-direction: column; }

  .page-header-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}