/* tool-pages.css — responsive overrides for /tools/* pages.
   Applies on top of /styles.css. Targets mobile viewport issues only.
   Cascade: any inline style="..." values override these where conflict; the
   selectors below use [style*="..."] attribute matchers + !important to
   reach inline styles where needed (mobile-narrow grids especially). */

/* ──────────────────────────────────────────────────────────────────
   Mobile: ≤ 760px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Hero + section padding compresses on mobile */
  section.hero,
  section[style*="padding: 100px 0"] {
    padding: 56px 0 32px !important;
  }
  section[style*="padding: 60px 0"] {
    padding: 36px 0 !important;
  }
  section[style*="padding: 60px 0 100px"],
  section[style*="padding: 60px 0 80px"] {
    padding: 36px 0 56px !important;
  }
  section[style*="padding: 40px 0 60px"] {
    padding: 28px 0 36px !important;
  }

  /* Hero h1 fits narrow viewports */
  .hero h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.15 !important;
  }
  .hero .sub.hero-sub-lg {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.55 !important;
  }

  /* Two-column and three-column grids stack */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Auto-fit grids: tighten the minmax so cards expand into the full width
     instead of staying in awkwardly narrow columns at, say, 360px viewport */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Animated demo iframes — reduce min-height + add a viewport-relative cap.
     The animations are designed at 760px wide; below that, content reflows
     inside the iframe but the fixed height becomes too tall relative to the
     narrowed content. We let the iframe shrink. */
  iframe[src*="/animations/"] {
    height: 600px !important;
  }
  /* Phones specifically: animations compress further. The min-height keeps
     enough room for the longest beat (full receipt JSON output). */
  @media (max-width: 480px) {
    iframe[src*="/animations/"] {
      height: 520px !important;
    }
  }

  /* Code blocks: ensure horizontal scroll instead of overflow-clip on phones */
  pre {
    font-size: 11px !important;
    line-height: 1.5 !important;
    padding: 14px 16px !important;
  }
  pre code {
    white-space: pre !important;
  }

  /* Tables → horizontal scroll wrapper. Most of our tables are inside
     <section>/<div>; the table itself overflows on phones. */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Cards (the ones inside grids) lose some padding so they fit */
  div[style*="padding: 28px"] { padding: 20px !important; }
  div[style*="padding: 24px"] { padding: 18px !important; }

  /* Buttons stack vertically on mobile when in .actions row */
  .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .actions .btn {
    text-align: center !important;
  }

  /* CTA blocks at the bottom of each page — "Start a pilot" + secondary CTA
     side-by-side becomes stacked. The site uses inline margin-left: 16px on
     the secondary which doesn't make sense stacked. */
  a.btn.secondary[style*="margin-left: 16px"] {
    margin-left: 0 !important;
    margin-top: 12px !important;
  }

  /* "Live demo" eyebrow + back-link to /tools — keep readable */
  a[href="/tools"][style*="margin-bottom: 32px"] {
    margin-bottom: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Small phones: ≤ 480px
   Tightens further; many of the rules above already cascaded. This block
   handles the items that need EXTRA compression at iPhone-mini scale.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  body { padding: 0 !important; }

  /* Container is on the narrow side already; ensure no horizontal scrollbar
     creeps in via inline padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Cards become more compact */
  div[style*="background: var(--bg-paper)"][style*="padding"] {
    padding: 16px !important;
  }

  /* Pre blocks — ensure the code is readable, not microscopic */
  pre {
    font-size: 10.5px !important;
    padding: 12px 14px !important;
  }

  /* Section heading sizes */
  .section-h {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
  }
  .section-lede {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Iframe-safety: prevent horizontal overflow regardless of viewport.
   This applies at all widths.
   ────────────────────────────────────────────────────────────────── */
iframe[src*="/animations/"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Long unbroken strings (URLs, hash digests) in body copy can cause
   horizontal scroll on mobile. Apply word-break to common text containers. */
@media (max-width: 760px) {
  .section-lede,
  p,
  li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* But NOT to code blocks — those should still scroll horizontally */
  pre, pre code, code {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
  }
}