/* =============================================================
   LUMORA — Responsive overrides
   ============================================================= */

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 768px) {
  .section    { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .card-pad   { padding: 22px; }
  .calc-card  { padding: 28px; border-radius: 28px; }
  .result-panel { padding: 28px 20px; border-radius: 28px; }
  .compat-grid { grid-template-columns: 1fr; }
  .mulank-traits { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .calc-card { padding: 22px; }
  .strike-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .strike-letters .ltr { width: 32px; height: 32px; font-size: 15px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .flames-row { gap: 6px; }
  .flames-letter { padding: 14px 4px; }
  .flames-letter small { font-size: 9px; }
}

/* Mobile typography breathing room */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .nav-inner { gap: 12px; }
  .brand { font-size: 17px; }
}