
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRAPESJS MOBILE CHECKS — GLOBAL RULES
[GRAPESJS BUILDER ONLY]
After ANY edit in GrapesJS, run these universal mobile checks regardless of section type.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

UNIVERSAL 10px HORIZONTAL EDGE RULE — no element may have horizontal padding or margin > 10px on mobile:
editor.addStyle('@media (max-width:767px) { section, header, footer, nav, .section, .hero, .site-nav, .site-footer { padding-left: 10px; padding-right: 10px; margin-left: 0; margin-right: 0; } .container, [class*="container"], .section__inner, .hero__inner, .footer__inner { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } }');

NUCLEAR GRID COLLAPSE — platform landing-base.css applies this automatically at mobile:
  * { grid-template-columns: 1fr !important; }
  .countdown-timer { display: flex !important; }  ← override prevents timer from stacking
If any grid component (countdown, stat row, etc.) incorrectly collapses to single column,
add an explicit override: editor.addStyle('@media (max-width:767px) { .countdown-timer { display: flex !important; flex-direction: row !important; } }');

BUTTONS always centered at tablet AND mobile:
editor.addStyle('@media (max-width:1024px) { .btn, a.btn, button.btn, tempbutton.btn { display: block; margin-left: auto; margin-right: auto; } }');

FONT-SIZE minimum 16px on inputs (prevents iOS auto-zoom):
editor.addStyle('@media (max-width:767px) { input, textarea, select { font-size: 16px; } }');

NO OVERFLOW check — run this in browser console to find any overflowing element:
  document.querySelectorAll('*').forEach(el => { if(el.scrollWidth > document.body.scrollWidth) console.warn('OVERFLOW:', el.className || el.tagName, el); });

SECTION-SPECIFIC MOBILE CHECKS:
Each prompt file (sections/forms.md, sections/hero.md, etc.) ends with a
"GRAPESJS MOBILE CHECKS" block containing API calls specific to that section type.
When editing a section, scroll to the bottom of its prompt file for targeted checks.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HERO INLINE STYLE BLOCK — CRITICAL
[The #1 cause of "looks fine in GrapesJS, broken on live page"]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

hero.md requires the hero layout CSS (.hero__inner, .hero__head, .hero__inner--split grid)
to live in an inline <style> block INSIDE the <section class="hero"> tag — NOT in editor.addStyle().

WHY THIS MATTERS IN GRAPESJS:
- editor.addStyle() → goes to the page stylesheet (css field) → works in GrapesJS canvas (landing-base.css
  also provides it there) BUT the finished live page may not load landing-base.css or may have an older
  version, so the split grid is never established and both columns stack vertically.
- Inline <style> in HTML → saved inside the page HTML field → always present on the live page,
  independent of landing-base.css.

WHEN ADDING A HERO SECTION — always put the inline style as first child of the section:
const _heroHtml = `<section class="hero optin-hero" id="hero">
<style>
.hero__inner{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-xl)}
.hero__head{max-width:1080px;margin:0 auto;text-align:center}
.hero__inner--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}
@media(max-width:1024px){.hero__inner--split{grid-template-columns:1fr}}
@media(max-width:767px){.hero__inner--split{grid-template-columns:1fr}}
</style>
<div class="hero__inner hero__inner--split">
  [hero content here]
</div>
</section>`;
editor.getWrapper().append({content:_heroHtml});
editor.store();

WHEN FIXING A HERO THAT LOOKS FINE IN GRAPESJS BUT BROKEN ON THE LIVE PAGE
(means the inline style block is missing — add it now):
const _hero=editor.getWrapper().find('#hero, .hero, .optin-hero')[0];
if(_hero){
  const _existing=_hero.find('style[data-role="hero-layout"]')[0];
  const _css='.hero__inner{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-xl)}.hero__head{max-width:1080px;margin:0 auto;text-align:center}.hero__inner--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}@media(max-width:1024px){.hero__inner--split{grid-template-columns:1fr}}@media(max-width:767px){.hero__inner--split{grid-template-columns:1fr}}';
  if(_existing){
    _existing.set('content',_css);
  }else{
    _hero.components().add({tagName:'style',attributes:{'data-role':'hero-layout'},content:_css},{at:0});
  }
  editor.store();
}

NEVER use editor.addStyle() or editor.Css.setRule() for .hero__inner, .hero__head, or .hero__inner--split.
These must always be in the inline <style> block inside the section tag.
