/* =====================================================================
   Responsive breakpoints — mobile-first overrides for larger screens
   are already the base in style.css; here we collapse grids down for
   small screens.
   ===================================================================== */

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-sidebar { display: none; }
  .admin-main { padding: 18px; }
}

@media (max-width: 600px) {
  .header-inner { padding: 10px 14px; }
  .brand-text small { display: none; }
  .site-nav a { margin-left: 12px; font-size: 0.82rem; }
  .hero { padding: 40px 0 30px; }
  .glass-card { padding: 20px; border-radius: 16px; }
  .steps-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .result-actions .btn { flex: 1 1 100%; }
  .admin-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Large touch targets on mobile */
@media (pointer: coarse) {
  .btn, .photo-tab-btn, input, select, textarea { min-height: 46px; }
}