/* Mobile overrides only — desktop layout comes from inline styles and is never touched here.
   Hooks are data-m tokens, e.g. data-m="pad vpad stack". */

[data-m~="only"] { display: none; }

@media (max-width: 900px) {
  [data-m~="pad"]      { padding-left: 20px !important; padding-right: 20px !important; }
  [data-m~="vpad"]     { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-m~="stack"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-m~="two"]      { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  [data-m~="col"]      { flex-direction: column !important; align-items: stretch !important; }
  [data-m~="hide"]     { display: none !important; }
  [data-m~="only"]     { display: flex !important; }
  [data-m~="h1"]       { font-size: 34px !important; }
  [data-m~="h2"]       { font-size: 26px !important; }
  [data-m~="divider"]  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.14) !important; padding: 24px 0 !important; }
  [data-m~="portrait"] { height: 420px !important; min-width: 0 !important; }
  [data-m~="ccol"] { flex-direction: column !important; align-items: center !important; text-align: center !important; }

  /* image-slot sets an explicit pixel width, which pins a grid track open. Let it fill instead. */
  image-slot { width: 100% !important; max-width: 100% !important; }
  [data-m~="stack"] > *, [data-m~="two"] > * { min-width: 0; }
  [data-m~="battery"]  { flex: 0 0 auto !important; width: 100% !important; max-width: 240px !important; }
  [data-m~="nogap"]    { gap: 0 !important; }
  [data-m~="mauto"]    { margin-left: auto !important; margin-right: auto !important; }
}

@media (max-width: 620px) {
  [data-m~="two"] { grid-template-columns: 1fr !important; gap: 20px !important; }
}