/* Lightweight mobile-first adjustments that avoid design changes */
img, video, iframe {max-width: 100%; height: auto;}

/* Avoid layout overflow on small screens */
html { overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Common container padding */
[class*="container"], .container {
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

/* Make tables scroll on mobile without breaking layout */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: 100%; border-collapse: collapse; }

/* Generic grid helpers if present */
[class*="row"], [class*="grid"] { display: block; }

@media (max-width: 1024px) {
  nav a { padding: 8px 10px; display: inline-block; }
}

@media (max-width: 768px) {
  /* Stack columns that look like Bootstrap/Tailwind-style names */
  [class*="col-"], [class*="column"], [class*="grid"] > * {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .hide-on-mobile { display: none !important; }
  .stack-on-mobile { display: block !important; }
  nav, .navbar, .menu { flex-wrap: wrap; }
  .hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .hero p { font-size: clamp(1rem, 3.2vw, 1.1rem); }
  .cta, .button, button, input[type="submit"] { 
    padding: 12px 18px; 
    font-size: 1rem; 
    line-height: 1.1; 
  }
  /* Prevent horizontal scroll caused by large fixed widths */
  * { max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  h2 { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
  h3 { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  p, li { font-size: clamp(0.95rem, 4.5vw, 1rem); }
}