/* =========================================================
   ImageToolPro — Responsive Rules
   Mobile-first overrides layered on top of style.css / tools.css
   ========================================================= */

/* ---- Tablet (<=1024px) ---- */
@media (max-width: 1024px) {
  .editor-grid { grid-template-columns: 300px 1fr; gap: 20px; }
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Small tablet / large mobile (<=860px) ---- */
@media (max-width: 860px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }

  .editor-grid { grid-template-columns: 1fr; }
  .settings-panel { position: static; }
  .preview-column { order: 2; }
  .settings-panel { order: 1; }
}

/* ---- Mobile nav (<=760px) ---- */
@media (max-width: 760px) {
  .nav-primary, .nav-account { display: none; }
  .mobile-toggle { display: block; }
  .nav-bar { flex-wrap: wrap; row-gap: 10px; padding: 12px 0; }
}

/* The mobile drawer (#mobileDrawer) is an overlay, not part of the navbar's
   own flex flow, so it never needs to reposition around the logo/toggle —
   see the .mobile-drawer rules in style.css for its styling. */

/* ---- Phones (<=640px) ---- */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  :root { --max-width: 100%; }

  .hero { padding: 30px 0 6px; }
  .hero h1 { font-size: 1.55rem; }
  .hero .subtitle { font-size: 0.92rem; }

  .upload-card { padding: 30px 16px; border-radius: var(--radius); }
  .upload-icon { width: 46px; height: 46px; }
  .upload-select-main { padding: 12px 16px; font-size: 0.92rem; }
  .upload-formats { font-size: 0.78rem; }

  .editor-toolbar { flex-wrap: wrap; gap: 10px; }
  .settings-panel { padding: 16px; }
  .preview-canvas-wrap { min-height: 180px; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .preset-grid { grid-template-columns: 1fr; }

  .features { padding: 40px 0 10px; }
  .features-grid { grid-template-columns: 1fr; gap: 30px; }

  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .collage-layouts { grid-template-columns: repeat(3, 1fr); }
  .meme-text-controls { flex-direction: column; }

  .btn-lg { width: 100%; }
  .action-row .btn { width: 100%; }

  #backToTop { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ---- Very small phones (<=380px) ---- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.35rem; }
  .upload-select-btn { width: 100%; }
  .upload-select-main { flex: 1; }
  .footer-columns { grid-template-columns: 1fr; }
}