/* Eagle Vision IT — Responsive Breakpoints
   Mobile-first. Breakpoints: sm 480, md 768, lg 1024, xl 1280,
   plus a nav-specific 1099 (see note below — the nav needs more
   room than the lg breakpoint provides). */

/* ── Mobile nav threshold (≤ 1099px) ─────────────────────
   The desktop nav must fit on one line or it wraps inside the
   fixed 72px bar and collides with the logo. Measured need for
   the six-item menu (Services / Solutions / Our Work / Products
   / About / Contact): logo 172 + menu 509 + actions 235 + 2x32px
   flex gaps + 80px container padding = 1060px.

   Threshold is 1099 rather than 1060 to leave ~40px of slack for
   the system-ui fallback metrics while Inter is still loading —
   a breakpoint set at the exact fitting width wraps during FOUT.

   This replaced an earlier 768px threshold under which every
   width from 769-1101px was broken. The previous six-item menu
   ("What We Do" / "How We Work" / ...) needed 1102px; dropping
   "Home" and grouping the seven service categories into one
   Services dropdown brought the requirement down to 1060, so the
   threshold could come down from 1149 to 1099.

   Scoped to .site-nav deliberately. The drawer's own list is
   also .nav-menu, and an unscoped rule hides it too, leaving the
   mobile drawer with zero visible links. */
@media (max-width: 1099px) {
  .site-nav .nav-menu,
  .site-nav .nav-phone {
    display: none;
  }

  /* Hiding the list alone leaves its <nav> wrapper in the flex row at
     zero width — still costing a 32px gap. At 375px that gap is the
     difference between the row fitting and the toggle being shrunk
     below its 32px icon size, so collapse the wrapper too. */
  .site-nav .nav-inner > nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

/* ── Tablet and below (≤ 1024px) ─────────────────────── */
@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .problem-solution {
    grid-template-columns: 1fr;
  }

  .solution-col .ps-header,
  .solution-col .ps-row {
    border-color: rgba(255,255,255,0.1);
  }

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

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

  .split--reverse { direction: ltr; }

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

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

/* ── Phone layout (≤ 768px) ──────────────────────────────
   Nav rules moved to the 1099px block above. The .hero
   padding below stays at 768px: index.html pairs it with
   @media (max-width: 768px) { .hero__split { padding-block: 0 } }
   to avoid doubling the nav clearance, so the two must keep
   matching breakpoints. */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--nav-height) + var(--space-16)) var(--space-16);
  }

  .hero__stats {
    gap: var(--space-6);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .service-card__list {
    grid-template-columns: 1fr;
  }

  .problem-solution {
    grid-template-columns: 1fr;
  }

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

  .section-header p { font-size: var(--text-base); }

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

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

/* ── Small phones (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
  }

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

  .hero__stat-number { font-size: var(--text-2xl); }

  .card { padding: var(--space-6); }
  .service-card__header { padding: var(--space-5) var(--space-5); }
  .service-card__list { padding: 0 var(--space-5) var(--space-5); }
}

/* ── Wide screens (≥ 1280px) ─────────────────────────── */
@media (min-width: 1280px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Print ───────────────────────────────────────────── */
@media print {
  .site-nav,
  .nav-drawer,
  .hero__bg { display: none; }

  .hero { background-color: var(--color-primary); min-height: auto; }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}