/* =========================================================
   RESPONSIVE.CSS
   Mobile-first overrides. Base rules in style.css already
   work down to small phones; this file tunes the breakpoints
   where spacing, nav and grids need to adapt.
   ========================================================= */

/* ---------- Tablet and below (<= 860px) ---------- */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .menu-toggle { display: flex; }

  .app {
    padding: var(--space-10) var(--space-4) var(--space-16);
  }

  .generator {
    padding: var(--space-8) var(--space-6) var(--space-6);
  }
}

/* ---------- Mobile (<= 560px) ---------- */
@media (max-width: 560px) {
  .site-header__inner { padding: 0 var(--space-4); }

  .generator {
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .generator__title { font-size: var(--fs-xl); }
  .generator__subtitle { font-size: var(--fs-sm); }

  .type-switcher__btn span { display: none; }

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

  .actions {
    flex-wrap: wrap;
  }

  .btn--primary { flex: 1 1 100%; order: 1; }
  .btn--secondary { flex: 1 1 calc(100% - 3.5rem); order: 2; }
  .btn--outline { order: 3; }

  .preview__frame { width: 180px; height: 180px; }
  .preview__frame canvas,
  .preview__frame img { width: 150px; height: 150px; }
}

/* ---------- Small phones (<= 380px) ---------- */
@media (max-width: 380px) {
  .brand__name { font-size: var(--fs-sm); }
  .generator__title { font-size: 1.5rem; }
  .type-switcher { grid-template-columns: repeat(4, 1fr); }
  .type-switcher__btn { font-size: 0.625rem; padding: var(--space-2) 2px; }
}

/* ---------- Large desktop refinement (>= 1440px) ---------- */
@media (min-width: 1440px) {
  .app { padding-top: var(--space-20); }
}