/* Connect·IT — global responsive overrides.
   The site is built with inline styles, so these rules use attribute selectors
   + !important to override them at mobile breakpoints. Loaded on every page. */

/* Tablet / large phone: collapse multi-column grids to a single column. */
@media (max-width: 860px) {
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.6fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns:0.85fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Phone. */
@media (max-width: 640px) {
  /* Tighter side gutters everywhere. */
  section { padding-left: 18px !important; padding-right: 18px !important; }

  /* Scale down oversized headings so they don't overflow. */
  h1 { font-size: 33px !important; line-height: 1.12 !important; letter-spacing: -0.6px !important; }
  h2 { font-size: 25px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; }

  /* Stack icon + content cards. */
  [style*="grid-template-columns:auto 1fr"] { grid-template-columns: 1fr !important; }

  /* Flip cards get a bit more height when they're full-width. */
  .flip { height: 320px !important; }

  /* Wide pricing tables: shrink and let them scroll horizontally if needed. */
  .ptable { font-size: 12px !important; }
  .ptable th, .ptable td { padding: 9px 10px !important; white-space: nowrap; }
}

/* Mobile navigation (hamburger). Works with the classes added in SiteNav. */
.nav-burger { display: none; }
@media (max-width: 860px) {
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #dce5f5; cursor: pointer; padding: 8px;
  }
  .nav-links {
    display: none !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    background: rgba(11, 21, 48, 0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 12px 16px 18px; border-bottom: 1px solid rgba(120, 160, 255, 0.16);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  }
  .nav-links.open { display: flex !important; }
  .nav-links > a, .nav-links > div { width: 100%; margin-left: 0 !important; }
}