/* ====================================================================
   Wander360° — global mobile safety net
   Loaded LAST on every page so it can correct overflow and a few
   multi-column blocks without touching each template's own CSS.
   ==================================================================== */

/* 1) Stop horizontal overflow — the main cause of "cut off" content */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Media and embeds never exceed their container */
img, svg, video, iframe, canvas, embed, object { max-width: 100%; }
img, video { height: auto; }

/* 3) Long words, URLs and mono coordinates wrap instead of widening the page */
p, li, h1, h2, h3, h4, h5, a, span, td, th, dd, dt, blockquote, figcaption, label, input, textarea {
  overflow-wrap: break-word;
}
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------- phones / small tablets ---------- */
@media (max-width: 768px) {
  /* flex & grid children that refuse to shrink force overflow — let them shrink */
  body * { min-width: 0; }

  /* wide tables scroll horizontally instead of stretching the layout */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* keep big display headings inside the screen */
  h1 { font-size: clamp(1.9rem, 7.5vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* consistent, comfortable side gutters everywhere */
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* footer link groups sit two-up (instead of one tall left-aligned stack)
     so they fill the width on phones and small tablets */
  .foot-top { grid-template-columns: 1fr 1fr !important; gap: 28px 22px; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* common multi-column grids collapse to one clean column */
  .feat-grid, .itin-grid, .sgrid, .bgrid, .com-grid,
  .budget-cards, .budget-break, .intel-grid,
  .feature-grid, .card-grid, .pricing-grid,
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* footer: keep the link groups in two columns so they fill the width
     instead of stacking into one tall list down the left edge */
  .foot-top { grid-template-columns: 1fr 1fr !important; gap: 24px 18px; }

  /* facts bar: stack so the call-to-action goes full width instead of off-screen */
  .facts .wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .facts .cta { margin-left: 0; width: 100%; text-align: center; }

  /* make primary buttons full-width & tappable where they tend to get clipped */
  .btn-primary, .cta-btn, .plan-clear, .submit-btn { width: 100%; }

  /* modals / cookie / dialogs stay within the viewport */
  .cookie, .cookie-modal, .modal, .sheet, .dialog {
    left: 12px !important; right: 12px !important; max-width: calc(100vw - 24px);
  }

  /* tighten oversized vertical padding so sections aren't a full screen each */
  section { padding-top: 0; }
}

/* ---------- very small phones ---------- */
@media (max-width: 380px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(1.6rem, 8vw, 2.3rem); }
}