/*
 * peeryx-v119-responsive.css
 * Mobile-first responsive audit fixes.
 * Breakpoints: 480 | 640 | 768 | 900 | 1024 | 1160 | 1280 | 1440 | 1920
 */

/* ==========================================================================
   §0 — GLOBAL BASE: prevent horizontal overflow on every element
   ========================================================================== */

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* ==========================================================================
   §1 — CONTAINER: responsive width & padding
   ========================================================================== */

html body .container,
html body .pxv93-container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   §2 — HEADER: mobile fixes that v118 overrides may break
   ========================================================================== */

/* At ≤1160px v113 already hides .desktop-nav (specificity 0,2,2 > v118 0,1,2).
   We only need to fix the header-inner height constraint at mobile. */
@media (max-width: 1160px) {
  html body .header-inner {
    height: auto !important;
    min-height: 58px !important;
  }

  /* Make sure header actions stay compact */
  html body .header-actions {
    gap: 6px !important;
  }
}

@media (max-width: 640px) {
  html body .header-inner {
    padding-inline: 12px !important;
    min-height: 54px !important;
  }

  html body .brand-name {
    font-size: 14px !important;
  }

  html body .brand-sub {
    display: none !important;
  }

  html body .btn-register,
  html body .cta-register {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   §3 — HERO SECTION: padding + grid at all breakpoints
   ========================================================================== */

@media (max-width: 900px) {
  html body .pxv93-hero-grid {
    grid-template-columns: 1fr !important;
    padding-top: 56px !important;
    padding-bottom: 48px !important;
    gap: 36px !important;
  }

  html body .pxv93-hero-copy {
    max-width: 100% !important;
  }

  html body .px-hero-panel {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  html body .pxv93-hero-grid {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
    gap: 28px !important;
  }

  html body .pxv93-hero-copy h1 {
    font-size: clamp(26px, 8vw, 40px) !important;
  }

  html body .pxv93-lead {
    font-size: 15px !important;
  }

  html body .pxv93-text {
    font-size: 13.5px !important;
  }

  html body .pxv93-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  html body .pxv93-btn.pxv93-primary,
  html body .pxv93-btn.pxv93-ghost {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .pxv93-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
}

@media (max-width: 400px) {
  html body .pxv93-hero-copy h1 {
    font-size: clamp(22px, 7.5vw, 32px) !important;
  }

  html body .pxv93-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   §4 — HERO PANEL (px-hero-panel) at small screens
   ========================================================================== */

@media (max-width: 640px) {
  html body .px-hero-panel {
    border-radius: 14px !important;
  }

  html body .px-hp-flow {
    gap: 6px !important;
    padding: 18px 14px 14px !important;
  }

  html body .px-hp-conn {
    display: none !important;
  }

  html body .px-hn-internet,
  html body .px-hn-client {
    padding: 10px 12px !important;
    min-width: 64px !important;
  }

  html body .px-hn-core {
    padding: 12px 14px !important;
    min-width: 72px !important;
  }

  html body .px-hpm-row {
    grid-template-columns: 96px 1fr 72px !important;
    gap: 8px !important;
  }

  html body .px-hp-metrics {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
}

@media (max-width: 380px) {
  html body .px-hp-flow {
    flex-direction: column !important;
    align-items: center !important;
  }

  html body .px-hn-internet,
  html body .px-hn-core,
  html body .px-hn-client {
    width: 100% !important;
    min-width: unset !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
  }

  html body .px-hpm-row {
    grid-template-columns: 80px 1fr 60px !important;
    font-size: 9px !important;
  }
}

/* ==========================================================================
   §5 — SECTION PADDING: reduce at mobile
   ========================================================================== */

@media (max-width: 640px) {
  html body .pxv93-how,
  html body .pxv93-solutions,
  html body .pxv93-modes,
  html body .pxv93-why,
  html body .pxv93-usecases,
  html body .pxv93-dashboard,
  html body .pxv93-pillars,
  html body .pxv93-expertise,
  html body .pxv93-infra,
  html body .pxv93-cta,
  html body .pxv93-faq,
  html body .pxv93-blog,
  html body .pxv93-articles,
  html body .pxv93-partners,
  html body .pxv93-plain,
  html body .pxv93-benefits {
    padding: 56px 0 !important;
  }
}

@media (max-width: 400px) {
  html body .pxv93-how,
  html body .pxv93-solutions,
  html body .pxv93-modes,
  html body .pxv93-why,
  html body .pxv93-usecases,
  html body .pxv93-dashboard,
  html body .pxv93-pillars,
  html body .pxv93-expertise,
  html body .pxv93-infra,
  html body .pxv93-cta,
  html body .pxv93-faq,
  html body .pxv93-blog,
  html body .pxv93-articles,
  html body .pxv93-partners,
  html body .pxv93-plain,
  html body .pxv93-benefits {
    padding: 44px 0 !important;
  }
}

/* ==========================================================================
   §6 — SECTION HEADS: typography at mobile
   ========================================================================== */

@media (max-width: 640px) {
  html body .pxv93-section-head h2,
  html body .pxv93-head h2,
  html body .section-head h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
  }

  html body .pxv93-section-head p,
  html body .pxv93-head > p,
  html body .section-head > p {
    font-size: 14px !important;
  }

  html body .pxv93-section-head,
  html body .pxv93-head,
  html body .section-head {
    margin-bottom: 36px !important;
  }
}

/* ==========================================================================
   §7 — HOME GRIDS: breakpoints for ALL pxv93 grids
   ========================================================================== */

/* How grid: 2 col → 1 col at 900px (v113 handles 760px; add 900px too) */
@media (max-width: 900px) {
  html body .pxv93-home .pxv93-how-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body .pxv93-home .pxv93-expertise-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .pxv93-home .pxv93-how-grid .pxv93-dashboard,
  html body .pxv93-home .pxv93-how-grid .pxv93-arch {
    order: 2 !important;
  }

  html body .pxv93-home .pxv93-how-grid .pxv93-pillars {
    order: 1 !important;
  }
}

@media (max-width: 640px) {
  html body .pxv93-home .pxv93-expertise-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-solutions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  html body .pxv93-modes-grid {
    grid-template-columns: 1fr !important;
  }

  /* Benefits grid */
  html body .pxv93-benefits {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  html body .pxv93-solutions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   §8 — SOLUTION / MODE / USECASE CARDS
   ========================================================================== */

@media (max-width: 640px) {
  html body .pxv93-solution,
  html body .pxv93-mode-card,
  html body .pxv93-uc-card {
    padding: 20px 18px !important;
  }

  html body .pxv93-mode-card {
    flex-direction: column !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   §9 — INFRA + CTA + FAQ
   ========================================================================== */

@media (max-width: 768px) {
  html body .pxv93-infra-card {
    flex-direction: column !important;
    gap: 24px !important;
  }

  html body .pxv93-infra-copy {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  html body .pxv93-cta-card {
    padding: 28px 20px !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }

  html body .pxv93-faq-list {
    gap: 8px !important;
  }

  html body .pxv93-faq-item summary {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
}

/* ==========================================================================
   §10 — DASHBOARD (pxv93-dashboard)
   ========================================================================== */

@media (max-width: 900px) {
  html body .pxv93-dash-main {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  html body .pxv93-dash-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  html body .pxv93-dash-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   §11 — ARCH FLOW (pxv93-arch-flow)
   ========================================================================== */

@media (max-width: 640px) {
  html body .pxv93-arch-flow {
    gap: 0 !important;
  }

  html body .pxv93-arch-step {
    padding: 14px 16px !important;
  }
}

/* ==========================================================================
   §12 — FOOTER PARTNER RAIL
   Bug: v95-bundle sets grid-template-columns:repeat(3,1fr) !important with
   specificity (0,2,0) which blocks all responsive media queries.
   Fix: override with higher specificity + !important inside media query.
   ========================================================================== */

@media (max-width: 900px) {
  html body .site-footer .footer-partner-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  html body .site-footer .footer-partner-rail {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body .footer-partner-card {
    padding: 16px !important;
  }

  html body .footer-partner-copy {
    gap: 6px !important;
  }
}

/* ==========================================================================
   §13 — FOOTER GRID (footer-grid-rich)
   v95 sets 4-col layout; collapses at 1024px → 1col already via low-spec
   media query. Add high-spec override to ensure it works.
   ========================================================================== */

@media (max-width: 1024px) {
  html body .site-footer .footer-grid,
  html body .site-footer .footer-grid-rich {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
  }
}

@media (max-width: 600px) {
  html body .site-footer .footer-grid,
  html body .site-footer .footer-grid-rich {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html body .footer-brand-block {
    max-width: 100% !important;
  }

  html body .footer-contact-block {
    padding-top: 0 !important;
  }

  html body .site-footer .footer-legal-strip {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   §14 — FOOTER PARTNERS HEAD
   ========================================================================== */

@media (max-width: 768px) {
  html body .footer-partners-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  html body .footer-partners-head h2 {
    font-size: clamp(18px, 5vw, 26px) !important;
  }
}

/* ==========================================================================
   §15 — GENERAL SITE SECTIONS (section, section-alt)
   ========================================================================== */

@media (max-width: 640px) {
  html body .section,
  html body .section-alt {
    padding: 56px 0 !important;
  }

  html body .hero-subpage {
    padding: 64px 0 48px !important;
    min-height: auto !important;
  }

  html body .cta-band {
    padding: 48px 0 !important;
  }
}

@media (max-width: 400px) {
  html body .section,
  html body .section-alt {
    padding: 44px 0 !important;
  }
}

/* ==========================================================================
   §16 — CARDS: general glass-card, blog-card, etc.
   ========================================================================== */

@media (max-width: 640px) {
  html body .glass-card {
    padding: 20px 18px !important;
  }

  html body .card-grid,
  html body .resource-card-grid,
  html body .blog-insights-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   §17 — SUBPAGE HEROES: general responsive
   ========================================================================== */

@media (max-width: 768px) {
  html body .hero-subpage h1,
  html body .hero .hero-title {
    font-size: clamp(26px, 7vw, 42px) !important;
  }

  html body .hero-subpage .lead,
  html body .hero .hero-lead {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  html body .hero-subpage h1,
  html body .hero .hero-title {
    font-size: clamp(22px, 7.5vw, 32px) !important;
  }
}

/* ==========================================================================
   §18 — TYPOGRAPHY: global responsive scaling
   ========================================================================== */

@media (max-width: 640px) {
  html body h1 { font-size: clamp(22px, 7.5vw, 38px) !important; }
  html body h2 { font-size: clamp(18px, 5.5vw, 28px) !important; }
  html body h3 { font-size: clamp(15px, 4.5vw, 20px) !important; }
}

@media (max-width: 400px) {
  html body h1 { font-size: clamp(20px, 7vw, 30px) !important; }
  html body h2 { font-size: clamp(17px, 5vw, 24px) !important; }
}

/* ==========================================================================
   §19 — BUTTONS: touch targets + wrapping
   ========================================================================== */

@media (max-width: 640px) {
  html body .hero-ctas,
  html body .btn-group,
  html body .cta-buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Min touch target: 44px */
  html body a.btn,
  html body button.btn,
  html body .btn-primary,
  html body .btn-outline,
  html body .btn-ghost {
    min-height: 44px !important;
    padding-block: 10px !important;
  }
}

/* ==========================================================================
   §20 — FORMS: full-width on mobile
   ========================================================================== */

@media (max-width: 640px) {
  html body .contact-form input,
  html body .contact-form select,
  html body .contact-form textarea,
  html body form input,
  html body form select,
  html body form textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  html body .form-row,
  html body .form-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  html body form button[type="submit"],
  html body .contact-form .btn-submit {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   §21 — MODALS & POPUPS
   ========================================================================== */

@media (max-width: 640px) {
  html body .modal,
  html body .popup,
  html body .overlay-panel {
    width: calc(100vw - 32px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 16px !important;
  }
}

/* ==========================================================================
   §22 — TRANSIT PAGE (transit-hero-grid-v81)
   ========================================================================== */

@media (max-width: 768px) {
  html body .transit-hero-grid-v81 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html body .transit-visual-grid-v81 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  html body .transit-visual-grid-v81 {
    grid-template-columns: 1fr !important;
  }

  html body .transit-proof-strip-v81 {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   §23 — FOOTPRINT MAP: responsive container
   ========================================================================== */

@media (max-width: 768px) {
  html body .footprint-map-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body .footprint-map {
    min-width: 480px !important;
  }
}

/* ==========================================================================
   §24 — BLOG PAGE: responsive grid
   ========================================================================== */

@media (max-width: 900px) {
  html body .blog-index-shell {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  html body .blog-insights-grid {
    grid-template-columns: 1fr !important;
  }

  html body .blog-home-card {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   §25 — PRICING / PRICING CARDS
   ========================================================================== */

@media (max-width: 900px) {
  html body .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  html body .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pricing-card {
    padding: 24px 20px !important;
  }
}

/* ==========================================================================
   §26 — TABLET LAYOUT (768px - 1024px)
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  html body .pxv93-hero-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-solutions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .pxv93-why-grid,
  html body .pxv93-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   §27 — ULTRA-WIDE (1920px+)
   ========================================================================== */

@media (min-width: 1920px) {
  html body .container,
  html body .pxv93-container {
    max-width: 1440px !important;
  }

  html body .pxv93-hero-copy h1 {
    font-size: 62px !important;
  }
}

/* ==========================================================================
   §28 — PREVENT OVERFLOW: fix any stray fixed-width elements
   ========================================================================== */

@media (max-width: 640px) {
  /* Tables: horizontal scroll instead of overflow */
  html body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Pre/code blocks */
  html body pre {
    overflow-x: auto !important;
    white-space: pre !important;
    max-width: 100% !important;
  }

  /* Iframes */
  html body iframe {
    max-width: 100% !important;
  }
}