/* DAJAI.IO — mobile responsive overrides — applied via <link> after all other CSS */
/* Triggers below 900px viewport */

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    font-size: 14px !important;
  }
  body * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Hide playhead cursor + side noise + scanlines on mobile (perf + clarity) */
  .playhead, .playhead-h, .scanlines, .xerox-noise, .vignette,
  .grid-bg, .paint-field { display: none !important; }

  /* Force everything into a single column */
  [style*="grid-template-columns"],
  [style*="display: grid"],
  [style*="display:grid"],
  .grid, .row, .module-bd[style*="grid"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  /* Sections — full width, padded */
  section, .section {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 24px 16px !important;
    margin: 0 !important;
  }

  /* Containers */
  [style*="maxWidth"][style*="1600"],
  [style*="maxWidth"][style*="1400"],
  [style*="maxWidth"][style*="1200"] {
    max-width: 100vw !important;
    padding: 0 12px !important;
  }

  /* Hero / first paint */
  .hero, [class*="hero"] {
    min-height: auto !important;
    height: auto !important;
    padding: 60px 16px 40px !important;
  }

  /* Typography scale-down */
  h1 { font-size: 36px !important; line-height: 1.1 !important; word-break: break-word !important; }
  h2 { font-size: 24px !important; line-height: 1.15 !important; }
  h3 { font-size: 18px !important; }
  [style*="fontSize: 8"], [style*="fontSize:8"],
  [style*="fontSize: 9"], [style*="fontSize: 10"],
  [style*="fontSize: 11"], [style*="fontSize: 12"] {
    font-size: 11px !important;
  }
  [style*="fontSize: 14"], [style*="fontSize: 15"] { font-size: 13px !important; }
  [style*="fontSize: 16"], [style*="fontSize: 17"] { font-size: 14px !important; }
  [style*="fontSize: 18"], [style*="fontSize: 19"], [style*="fontSize: 20"] { font-size: 15px !important; }
  [style*="fontSize: 24"], [style*="fontSize: 28"] { font-size: 18px !important; }
  [style*="fontSize: 32"], [style*="fontSize: 36"], [style*="fontSize: 40"], [style*="fontSize: 48"] { font-size: 26px !important; line-height: 1.1 !important; }
  [style*="fontSize: 56"], [style*="fontSize: 64"], [style*="fontSize: 72"], [style*="fontSize: 96"], [style*="fontSize: 120"], [style*="fontSize: 160"] {
    font-size: 38px !important; line-height: 1 !important;
  }

  /* Tables — make scrollable horizontally with hint */
  table, .table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Catalog row — stack vertically */
  [style*="gridTemplateColumns"][style*="40px 1fr"],
  [style*="gridTemplateColumns: '40px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Buttons — easier tap targets */
  button { min-height: 44px !important; padding: 10px 14px !important; font-size: 13px !important; }

  /* Images full-width */
  img, video { max-width: 100% !important; height: auto !important; }

  /* SVGs — keep aspect, scale to container */
  svg { max-width: 100% !important; height: auto !important; }

  /* Side decoration / dossier wall / out-of-flow stuff — stack */
  [style*="position: absolute"][style*="left: 0"],
  [style*="position: absolute"][style*="right: 0"] {
    position: static !important;
    width: 100% !important;
  }

  /* Fixed elements — keep but constrain */
  [style*="position: fixed"] { max-width: 100vw !important; }

  /* Status bar / top bar */
  .status-bar { font-size: 9px !important; padding: 4px 10px !important; }

  /* Catalog table specific overrides */
  [class*="catalog"] [style*="gridTemplateColumns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  body { font-size: 13px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 20px !important; }
  [style*="fontSize: 56"], [style*="fontSize: 64"], [style*="fontSize: 72"] { font-size: 30px !important; }
}