/* ============================================================
   SWIFTLAUNCH — SITE-WIDE RESPONSIVE SAFETY NET
   This file is loaded at the end of every page so that on mobile/tablet
   no content overflows or appears broken.
   ============================================================ */

/* Universal box-sizing taake padding/border se width na barhe */
*, *::before, *::after {
  box-sizing: border-box;
}

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

/* Images, videos, iframes kabhi bhi container se bahar na jayen */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Tables should scroll horizontally on small screens, not break */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* Make bare fixed-width containers flexible */
.container, .wrapper, .section, section {
  
}

/* Grids/flex rows should stack below on small screens */
@media (max-width: 768px) {
  .row, .grid, .flex-row, .cards-row, .card-grid,
  [class*="-grid"], [class*="-row"] {
    flex-wrap: wrap !important;
  }

  h1 { font-size: clamp(24px, 6vw, 36px) !important; }
  h2 { font-size: clamp(20px, 5vw, 28px) !important; }
  h3 { font-size: clamp(18px, 4.5vw, 24px) !important; }
  p, li, span, a, label { font-size: clamp(14px, 3.5vw, 16px); }

  /* Form fields poori width le lein mobile par */
  input, textarea, select, button {
    max-width: 100%;
  }

  /* Reduce extra padding so content does not get squeezed */
  .hero, .banner, .page-head, header, .header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(22px, 7vw, 30px) !important; }
  h2 { font-size: clamp(18px, 6vw, 24px) !important; }

  .container, .wrapper, .content, main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}