/* Responsive/mobile layer for the flattened DivMagic export, which shipped with
   ZERO media queries and fixed multi-column CSS grids. Kept deliberately minimal
   and SAFE: only structural fixes (collapse grids, wrap flex, kill horizontal
   overflow). No font-size hacks — attribute-matching font sizes is fragile and
   was blowing up small text. Headings stay as designed; long words just wrap. */

html, body { overflow-x: hidden !important; max-width: 100vw; }
img, video, canvas, picture { max-width: 100%; height: auto; }
svg { max-width: 100%; }

@media (max-width: 820px) {
  /* Collapse every multi-column grid to a single column on small screens. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Let flex rows wrap instead of running off the right edge. */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }
  /* Nothing may force the page wider than the viewport. */
  [style*="min-width"] { min-width: 0 !important; }
  /* Break long words/headings instead of overflowing. */
  * { overflow-wrap: break-word; word-break: break-word; }
}

/* Keep the fixed cookie banner within the viewport. */
#bt-cookie-fix, [style*="position: fixed"] { max-width: 100vw; }