/* ========================================================================
   WebPro360 — Responsive overrides
   Mobile-first breakpoints layered on top of inline component styles.
   Targets:  ≤900px (tablet/mobile),  ≤640px (phone)
   ======================================================================== */

/* Prevent horizontal overflow without creating a new scroll container.
   `overflow-x: clip` is the modern replacement for `hidden` and avoids
   iOS Chrome's scrollable-area-below-footer quirks.
   Vertical sizing is handled by the flex-column footer anchor in index.html. */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

/* ─── Containers ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* All inner padding shrinks on mobile */
  [data-wp-container] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ─── NavBar ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-wp-nav-links] { display: none !important; }
  [data-wp-nav-phone] { display: none !important; }
  [data-wp-nav-cta]   { font-size: 13px !important; padding: 9px 14px !important; }
  [data-wp-mobile-toggle] { display: inline-flex !important; }
}

/* Mobile menu drawer */
[data-wp-mobile-menu] {
  position: fixed; inset: 0; background: rgba(7, 20, 38, 0.72);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  display: flex; flex-direction: column; padding: 80px 28px 32px;
  padding-top: max(80px, env(safe-area-inset-top, 0px) + 24px);
  z-index: 100; gap: 4px;
}
[data-wp-mobile-close] {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0px) + 14px);
  right: 20px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-sm);
  color: #fff;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
[data-wp-mobile-close]:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
[data-wp-mobile-menu] a {
  color: #fff; font-size: 22px; font-weight: 500; padding: 16px 0;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-display);
}
[data-wp-mobile-menu] [data-wp-mobile-cta] {
  margin-top: 24px; font-family: var(--font-sans); font-size: 15px;
  background: var(--wp-teal-500); color: #fff; padding: 14px 20px;
  border-radius: var(--r-sm); text-align: center; border: none;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-wp-hero-grid] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  [data-wp-hero-ops] { max-width: 100% !important; }
}
@media (max-width: 640px) {
  [data-wp-hero-stats] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-wp-hero-stats] [data-wp-divider] { display: none !important; }
}

/* ─── Generic 2-col → 1-col ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-wp-2col]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-wp-3col]    { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-wp-4col]    { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  [data-wp-7col]    { grid-template-columns: repeat(3, 1fr) !important; }
  [data-wp-services-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  [data-wp-services-grid] > * { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
  [data-wp-4col]    { grid-template-columns: 1fr !important; }
  [data-wp-7col]    { grid-template-columns: repeat(2, 1fr) !important; }
  [data-wp-services-grid] { grid-template-columns: 1fr !important; }
  [data-wp-services-grid] > * { grid-column: span 1 !important; }
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-wp-footer-grid] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  [data-wp-footer-grid] > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  [data-wp-footer-locations] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  [data-wp-footer-grid] { grid-template-columns: 1fr !important; }
  [data-wp-footer-locations] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Mobile-only utility ───────────────────────────────────────────────── */
[data-wp-mobile-toggle] { display: none; }

/* ─── Logo strip ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-wp-logos] { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 540px) {
  [data-wp-logos] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ─── CTA band ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  [data-wp-cta-band] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
}