/* ==========================================================================
   responsive.css — breakpoints layered on top of the base (desktop) styles
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1180px) {
  .hero-title { font-size: var(--fs-2xl); }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav.is-open { display: flex; }

  .editor-grid { grid-template-columns: 1fr; }
  .options-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }

  .hero-stats { flex-wrap: wrap; justify-content: center; row-gap: var(--space-4); }
  .hero-stat-divider { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .header-inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .brand-name { font-size: var(--fs-base); }
  .header-actions { gap: var(--space-2); margin-left: auto; }
  .theme-switch { display: none; }

  .hero { padding: var(--space-6) var(--space-4) var(--space-5); }
  .hero-title { font-size: var(--fs-xl); }
  .hero-subtitle { font-size: var(--fs-sm); }
  .eyebrow { font-size: 10px; padding: var(--space-2) var(--space-3); }

  .dashboard { padding: 0 var(--space-4) var(--space-6); gap: var(--space-4); }

  .toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .toolbar-left, .toolbar-right { justify-content: space-between; }
  .btn-kbd { display: none; }

  .panel { padding: var(--space-4); }
  .editor-textarea, .dropzone, .editor-output-wrap .editor-textarea { min-height: 200px; }

  .checkbox-grid { grid-template-columns: 1fr; }
  .search-replace-bar { flex-direction: column; }
  .export-dropdown { margin-left: 0; width: 100%; }
  .export-dropdown .btn { width: 100%; justify-content: center; }
  .export-menu { left: 0; right: 0; width: 100%; }

  .panel-footer--actions { flex-direction: column; align-items: stretch; }
  .panel-footer--actions .btn { width: 100%; justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { flex-direction: column; align-items: flex-start; }

  .toast-container { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: var(--fs-lg); }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: var(--space-5) var(--space-4); }
  .editor-textarea { min-height: 140px; }
}

/* ---------- No horizontal scroll guard ---------- */
html, body { max-width: 100%; overflow-x: hidden; }