/* EMA responsive overrides — mobile adaptation for the desktop-first
   inline-styled pages (Home, EMA Kit).
   Inline styles lose to !important stylesheet rules, and attribute-substring
   selectors let us key off the serialized inline values without touching
   every component. All rules are scoped to small screens. */

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }

  /* 1 · Stack every multi-column grid; release explicit spans */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="grid-row"] { grid-row: auto !important; }
  /* …but keep gutter rows (MOD 01 · title) side by side */
  [style*="grid-template-columns: 60px"] { grid-template-columns: 60px 1fr !important; }

  /* 2 · Section gutters: 56/80px → 20px */
  [style*="padding: 96px 56px"]      { padding: 64px 20px !important; }
  [style*="padding: 120px 56px"]     { padding: 64px 20px !important; }
  [style*="padding: 88px 56px"]      { padding: 56px 20px !important; }
  [style*="padding: 56px 56px 64px"] { padding: 40px 20px 48px !important; }
  [style*="padding: 40px 56px"]      { padding: 32px 20px !important; }
  [style*="padding: 96px 80px 56px"] { padding: 56px 20px 40px !important; }
  [style*="padding: 20px 40px"]      { padding: 12px 16px !important; }

  /* 3 · Display type scales down */
  h1 { font-size: clamp(40px, 13vw, 56px) !important; }
  h2 { font-size: clamp(28px, 8.5vw, 40px) !important; }

  /* 4 · Nav: links collapse into the burger menu (audit: mobile had no navigation) */
  .ema-nav-links { display: none !important; }
  .ema-nav-burger { display: block !important; }
  .ema-nav img[alt="Energy Makers Academy"] { height: 15px !important; }

  /* 4b · Large Gellix numerals (hero stats, price) scale down */
  [style*="font: 700 44px"] { font-size: 32px !important; }

  /* 5 · CTA / stat rows wrap; fixed-width buttons release */
  [style*="gap: 12px"][style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="gap: 28px"][style*="display: flex"] { flex-wrap: wrap !important; }
  a[style*="width: 240px"], a[style*="width: 209px"] { width: auto !important; padding: 0 20px !important; }

  /* 6 · Fixed-width cards (code editor) shrink to fit */
  [style*="width: 460px"] { width: auto !important; max-width: 100% !important; }

  /* 7 · Tall 4:5 heroes relax to 4:3 when stacked full-width */
  [style*="aspect-ratio: 4 / 5"] { aspect-ratio: 4 / 3 !important; }

  /* 8 · Stacked hero (Home Stacked): wordmark → photo → copy */
  .hero-sk-grid { gap: 28px !important; }
  .hero-sk-left { display: contents; }
  .hero-sk-mark { order: 1; }
  .hero-sk-media { order: 2; }
  .hero-sk-copy { order: 3; }
  .hero-sk-copy > h1 { margin-top: 0 !important; }
}