/* === Responsive Fixes (generic + non-intrusive) === */
html { scroll-behavior: smooth; }
img, video, iframe, canvas { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
section, header, footer { overflow: hidden; }
body { overflow-x: hidden; }

/* Common container padding on phones */
[class*="container"], .container, .wrapper, .content { padding-left: 16px; padding-right: 16px; }

/* Grids / rows: allow wrap on small screens */
.row, .rows, .flex, [class*="row"], [class*="flex"] { flex-wrap: wrap; }

/* Columns never exceed viewport */
[class*="col-"], [class*="column"], .column, .columns { max-width: 100% !important; }

/* Break fixed layouts into 1-col on small screens */
@media (max-width: 992px) {
  .grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .grid-6, .grid-5, .grid-4, .grid-3, .grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .stack-sm > * { width: 100% !important; }
  [style*="width:"] { max-width: 100% !important; }
}

/* Images within fixed-width wrappers */
.responsive-media { position: relative; width: 100%; height: auto; overflow: hidden; }
.responsive-media > img, .responsive-media > iframe { width: 100%; height: auto; display: block; }

/* Navigation toggle helper */
.nav-toggle { display: none; background: none; border: 0; font-size: 1.1rem; }
@media (max-width: 992px) {
  nav ul { display: none; flex-direction: column; gap: 12px; }
  nav ul.open { display: flex; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
}


/* === V2: Alignment & heading no-break helpers === */
h1, h2, h3, h4, h5, h6 { word-break: keep-all; hyphens: auto; }
.nowrap, .no-break { white-space: normal; word-break: keep-all; }
.va-center { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.split-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px){
  .split-col { grid-template-columns: 1fr; }
}

/* Avoid vertical letter stacking on narrow columns */
[class*="col"] h2, [class*="col"] h3 { line-height: 1.2; }