/* ═══════════════════════════════════════════════════════════════════════ */
/*  WAVE-GG37 — Urgent mobile improvements                                 */
/*                                                                          */
/*  Targeted mobile fixes across all pages. Loaded after sx-nav.css and    */
/*  wave-gg35-stripe.css so it can override their mobile behaviour.        */
/*                                                                          */
/*  · Anti-horizontal-scroll guard on body/html                            */
/*  · Stripe showcase tabs → horizontal scroll on tight widths             */
/*  · Code block readable on mobile (smaller font, contained overflow)     */
/*  · Live event feed: stack value below event row at <480px               */
/*  · KPI grid: tighter on tiny screens                                    */
/*  · 44px touch target enforced sitewide on mobile                        */
/*  · Mesh gradient animation paused on mobile (battery + perf)            */
/*  · Sticky CTA bar bottom padding to prevent content occlusion           */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─ 1. Global horizontal-scroll guard. The #1 most common mobile bug. ── */
html, body {
  max-width: 100vw;
  overflow-x: clip;          /* `clip` doesn't create a scroll container */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ─ 2. Responsive media — images, video, iframes ─────────────────────── */
img, video, iframe, object, embed, canvas, svg {
  max-width: 100%;
  height: auto;
}
/* SVG icons inside flex containers should keep their declared height */
.ec-btn svg, button svg, .sx-nav svg, [class*="-icon"] svg {
  height: revert;
  width: revert;
}

/* ─ 3. 44px minimum touch target — accessibility + mobile-usability ──── */
@media (max-width: 768px) {
  a.ec-btn, button.ec-btn, .ec-btn,
  .ec-final-cta-primary, .ec-final-cta-ghost,
  .ec-sticky-cta-btn,
  .ec-stripe-tab,
  .ec-stripe-link,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ─ 4. Sticky bottom CTA — reserve space so content isn't hidden under it ─ */
@media (max-width: 768px) {
  body {
    padding-bottom: 72px;    /* sticky-cta is ~64px tall + 8px breathing room */
  }
}

/* ─────────────────────────────────────────────────────────────────────── */
/*  WAVE-GG35 Stripe-tier showcase — mobile improvements                  */
/* ─────────────────────────────────────────────────────────────────────── */

/* Tighter section padding on mobile */
@media (max-width: 600px) {
  .ec-stripe-showcase {
    padding: 56px 16px 72px;
  }
  .ec-stripe-title {
    font-size: clamp(28px, 7vw, 36px);
    margin-bottom: 14px;
  }
  .ec-stripe-sub {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 36px;
  }
  .ec-stripe-eyebrow { margin-bottom: 12px; }
}

/* Tabs row: horizontally scrollable on narrow viewports (no wrap, no clip) */
@media (max-width: 640px) {
  .ec-stripe-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;                          /* Firefox */
    -ms-overflow-style: none;                       /* IE/Edge legacy */
    margin-right: -16px;                            /* bleed to viewport edge */
    padding-right: 16px;
    width: calc(100% + 16px);
    -webkit-overflow-scrolling: touch;
  }
  .ec-stripe-tabs::-webkit-scrollbar { display: none; }
  .ec-stripe-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Code block: smaller, readable, contained overflow */
@media (max-width: 600px) {
  .ec-stripe-code {
    padding: 16px 14px;
    font-size: 11.5px;
    line-height: 1.55;
    border-radius: 12px;
  }
  .ec-stripe-code-header {
    font-size: 10.5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .ec-stripe-code pre {
    /* allow horizontal scroll for long lines instead of cramping */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mockup browser frame: tighten padding */
@media (max-width: 600px) {
  .ec-stripe-mock-body { padding: 18px; min-height: auto; }
  .ec-stripe-mock-chrome { padding: 10px 14px; }
  .ec-stripe-mock-url { font-size: 11px; padding: 4px 10px; }
}

/* KPI grid: stays 2-up, tighter padding */
@media (max-width: 480px) {
  .ec-stripe-kpi {
    padding: 11px 12px;
  }
  .ec-stripe-kpi-value {
    font-size: 18px;
  }
  .ec-stripe-kpi-label {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .ec-stripe-kpi-grid {
    gap: 8px;
  }
}

/* Event feed: at very tight widths, stack the value below the event */
@media (max-width: 420px) {
  .ec-stripe-feed-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 10px 0;
  }
  .ec-stripe-feed-time   { grid-row: 1 / 2; }
  .ec-stripe-feed-event  { grid-row: 1 / 2; }
  .ec-stripe-feed-value  {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    text-align: left;
    font-size: 12px;
  }
}

/* Bullets: align to top, smaller checkmark on tight screens */
@media (max-width: 480px) {
  .ec-stripe-bullets li {
    font-size: 14px;
    gap: 10px;
  }
  .ec-stripe-bullets li::before {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-size: 12px, cover;
  }
}

/* "Inline learn more" link: ensure tappable */
@media (max-width: 768px) {
  .ec-stripe-link {
    padding: 8px 0;
  }
}

/* ─ 5. Mesh gradient animation: pause on mobile (battery + perf) ──────── */
@media (max-width: 768px) {
  .ec-stripe-showcase::before {
    animation: none;
  }
}

/* ─ 6. Reduced motion respect (paired with above) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─ 7. Form inputs on mobile: prevent iOS zoom on focus (min 16px font) ─ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: max(16px, 1em);                      /* iOS zooms <16px on focus */
  }
}

/* ─ 8. Body text minimum size on mobile ──────────────────────────────── */
@media (max-width: 480px) {
  body {
    font-size: 16px;                                /* was 17px — slight shrink for narrow screens */
  }
}

/* ─ 9. Section anchor offset (compensates for sticky nav when jumping) ─ */
@media (max-width: 768px) {
  [id]:not(html):not(body) {
    scroll-margin-top: 80px;                        /* nav is 64px + 16px breathing */
  }
}