/* Tablet: stack text -> live preview -> photo/gallery/download ---------- */
@media (max-width: 900px) {
  .editor-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      'text'
      'preview'
      'extras';
  }
  .preview-panel { position: static; }
  .canvas-wrapper { max-width: 420px; margin: 0 auto; }
}

/* Mobile: controls/text on top, live preview below --------------- */
@media (max-width: 600px) {
  .hero-section { padding: 44px 16px 70px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .privacy-strip { display: none; }

  .editor-container { padding: 0 14px 30px; gap: 18px; }
  .controls-panel { padding: 18px; border-radius: 16px; gap: 14px; }

  .canvas-wrapper { max-width: 100%; }

  .action-buttons .btn { padding: 12px 8px; font-size: 13px; gap: 5px; white-space: nowrap; }

  .template-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 320px; }

  .toolbar-row { gap: 5px; }
  .align-btn, .format-btn { width: 28px; height: 28px; font-size: 12px; }
  .swatch-trigger { height: 28px; padding: 0 6px 0 7px; font-size: 11px; gap: 3px; }
  .swatch-dot { width: 11px; height: 11px; }

  .modal-box { padding: 28px 20px 22px; }
  .guide-steps li { gap: 10px; }

  .install-pwa-card { padding: 20px; }
  .install-pwa-card .btn { width: 100%; }

  .footer-inner { flex-direction: column; }
  .footer-links { gap: 22px; }
}

@media (max-width: 380px) {
  .template-grid { grid-template-columns: repeat(3, 1fr); }
}