/* ============================================================
   Innovation IT — Responsive overrides (mobile + tablet)
   The site is built with inline styles; these !important rules
   collapse the fixed multi-column grids, scale hero type and
   tighten padding at small widths. Attribute selectors match the
   exact inline grid-template-columns strings React emits.
   ============================================================ */

/* ---------- Header: hamburger menu ---------- */
.iit-hdr-burger { display: none; }
.iit-hdr-mobile { display: none; }

@media (max-width: 860px) {
  .iit-hdr-nav { display: none !important; }
  .iit-hdr-actions { display: none !important; }
  .iit-hdr-burger { display: inline-flex !important; margin-left: auto !important; }
  .iit-hdr-mobile.open { display: flex !important; }
}

/* ============================================================
   TABLET  (≤ 960px)
   ============================================================ */
@media (max-width: 960px) {
  /* hero / content splits → single column */
  [style*="1.05fr 0.95fr"],
  [style*="1.1fr 0.9fr"],
  [style*="0.9fr 1.1fr"],
  [style*="1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* 3-up & 4-up card grids → 2 columns */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* footer 4-col → 2-col */
  [style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  /* tame hero type a notch */
  h1 { font-size: 42px !important; }
}

/* ============================================================
   PHONE  (≤ 620px)
   ============================================================ */
@media (max-width: 620px) {
  /* every two-column split → single column */
  [style*="1.05fr 0.95fr"],
  [style*="1.1fr 0.9fr"],
  [style*="0.9fr 1.1fr"],
  [style*="1.6fr 1fr"],
  [style*="232px 1fr"],
  [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-up cards → single column */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-up (stats, process, portfolio, cameras) → stay 2-up, reads well */
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* footer → 2-col link blocks */
  [style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* headings */
  h1 { font-size: clamp(28px, 8.5vw, 36px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(23px, 6vw, 28px) !important; }

  /* collapse oversized hero vertical padding */
  [style*="92px 28px 104px"] { padding: 46px 20px 52px !important; }
  [style*="64px 28px 72px"]  { padding: 40px 20px 44px !important; }
  [style*="60px 28px 64px"]  { padding: 40px 20px 44px !important; }
  [style*="60px 28px 52px"]  { padding: 40px 20px 36px !important; }
  [style*="40px 28px 76px"]  { padding: 28px 20px 48px !important; }

  /* CTA banners: stack + shrink padding */
  [style*="padding: 52px 52px"],
  [style*="padding: 48px 52px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 30px 24px !important;
    gap: 22px !important;
  }

  /* button rows wrap instead of overflowing */
  [style*="display: flex"][style*="gap: 14px"] { flex-wrap: wrap !important; }

  /* footer copyright bar stacks + centers */
  footer > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* trim section side padding a touch on small phones */
  [style*="px 28px"] { }
}

@media (max-width: 400px) {
  /* 4-up grids → single column on very small phones */
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}