/* PatchPilot mobile responsive fixes (e114) — applied to all customer-facing
   marketing/anon HTML pages via server.js link-injection.

   Scope: only kicks in below 769px so desktop is untouched.
   Goals:
   - Stop horizontal overflow on tablet (iPad portrait, 768px)
   - Bump primary tap targets to >= 44x44
   - Prevent iOS auto-zoom on form inputs (16px font-size floor)
   - Ensure tables/wide grids gracefully scroll or stack
   - Keep hamburger/sidebar usable

   Do NOT redesign — only fix obvious mobile breakage.
*/

@media (max-width: 768px) {
  /* Hard cap body width to viewport width and stop horizontal overflow.
     Most pages don't overflow; pages that do will be clipped to viewport
     and any wide element should be inside a .table-wrap (overflow-x:auto). */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Common nav: hide desktop links earlier (was max-width:760px in some
     pages, missing the iPad 768px breakpoint). */
  nav .nav-links,
  nav .nav-drop-menu {
    display: none !important;
  }

  /* Keep nav-cta usable + visible on tablet. Compact the buttons. */
  nav .nav-cta {
    margin-left: auto !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  nav .nav-cta a {
    font-size: 0.82rem;
    padding: 8px 12px;
  }

  /* Reduce oversize hero h1 (3-4rem on desktop crushes 360-768px viewports) */
  h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word;
  }
  h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }

  /* Tables: anything wider than viewport should be inside a horizontal
     scroller (let the existing .table-wrap or .cmp-table-wrap handle the
     scrolling — don't flatten the table itself or columns collapse). */
  .table-wrap,
  .cmp-table-wrap,
  .compare-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  /* Tap targets: minimum 44x44 on all primary CTAs. */
  a.btn-primary,
  a.btn-fill,
  a.btn-out,
  a.btn-ghost,
  a.btn-cta,
  button.btn-cta,
  button[type='submit'],
  .nav-cta a,
  .cta-row a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Form inputs: prevent iOS auto-zoom (font-size >= 16px) + ensure
     comfortable tap height. */
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
  textarea {
    min-height: 88px;
  }

  /* Footer links: too tightly spaced on mobile — bump tap area. */
  .footer-links a {
    padding: 8px 10px !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Roadmap-specific: shipped grid often has long category labels and
     a 4-col grid that spills past iPad portrait. Force responsive cols
     and let the per-card actions wrap rather than overflow.
     NOTE: at <=420px we further collapse to 1fr (see rule below). */
  .shipped-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pp-hub-actions {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .pp-hub-btn {
    min-height: 32px;
    padding: 4px 10px !important;
  }
  /* Releases hub list: keep cards full-width on tablet portrait. */
  #pp-releases-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter chips: wider tap area. */
  .pp-chip {
    min-height: 36px;
    padding: 7px 14px !important;
  }

  /* Pricing tables: stack 3-col plan grid into 1 column on narrow screens
     so plans aren't squished. */
  .plans-grid,
  .pricing-grid,
  .tier-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Compare verdict grid — force 1 col below 560px is fine, but on iPad
     portrait we want compact 1 col so cards are readable. */
  .verdict-grid {
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Extra-tight phones. */
  h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }
  /* Compact nav-cta: drop "Sign in" text label below 480px? Keep it; just
     ensure both buttons fit. */
  nav .nav-cta {
    gap: 4px !important;
  }
  nav .nav-cta a {
    font-size: 0.78rem;
    padding: 8px 10px;
  }

  /* Make sure body padding doesn't add to overflow. */
  .container,
  .nav-inner,
  .footer-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Roadmap: collapse shipped-grid and not-planned-grid to single column
     at phone width (overrides the 2-col rule from the 768px block above). */
  .shipped-grid,
  .not-planned-grid {
    grid-template-columns: 1fr !important;
  }
}