/* ============================================================
   SOAF — responsive.css
   Mobile-first responsive breakpoints
   ============================================================ */

/* ── Tablet: max 1024px ── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-orb-wrap { display: none; }
  .hero-content { max-width: 100%; padding: 80px 0 60px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  .facility-detail-layout { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; }
  .about-orb-wrap { display: none; }
  .contact-layout { grid-template-columns: 1fr; }

  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .facility-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-row { grid-template-columns: 1fr; }
  .request-detail-layout { grid-template-columns: 1fr; }
}

/* ── Mobile: max 768px ── */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }

  /* Navbar */
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero home page */
  .home-hero-wrap { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 36px; }
  .hero-orb-wrap  { display: none; }
  .hero-title     { font-size: 1.9rem; }
  .hero-subtitle  { font-size: 0.95rem; }
  .hero-cta       { flex-direction: column; }
  .hero-cta .btn  { width: 100%; justify-content: center; }
  .hero-search-wrap { max-width: 100%; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-number { font-size: 1.7rem; }

  /* How */
  .how-grid { grid-template-columns: 1fr; }
  /* Keep home page how-grid at 3 cols until 600px breakpoint (handled in main.css) */
  /* Do NOT override .home-section-card .how-grid here — main.css handles it at 600px */

  /* Featured */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Auth */
  .auth-card { padding: 28px 20px; }
  .register-type-grid { grid-template-columns: 1fr; }

  /* Dashboard */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .dashboard-main { margin-left: 0; }
  .dashboard-topbar { padding: 0 16px; }
  .dashboard-content { padding: 16px; }

  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .facility-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .platform-overview-grid { grid-template-columns: 1fr; }
  .pending-grid { grid-template-columns: 1fr; }

  /* Forms */
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; gap: 10px; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Tables */
  .soaf-table { font-size: 0.82rem; }
  .soaf-table th, .soaf-table td { padding: 10px 10px; }

  /* Step progress */
  .step-label { display: none; }

  /* Listing */
  .listing-grid { grid-template-columns: 1fr; }
  .filter-bar-inner { flex-direction: column; align-items: stretch; }
  .filter-search { min-width: unset; }

  /* Content key row */
  .content-key-row { grid-template-columns: 1fr; }

  /* Settings */
  .settings-row { grid-template-columns: 1fr; }

  /* Admin layout */
  .admin-layout .dashboard-main { margin-left: 0; }
}

/* ── Small Mobile: max 480px ── */
@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }

  .hero-title { font-size: 1.6rem; }
  .home-stat-num { font-size: 1.5rem; }
  .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 1.5rem; }

  .auth-card { padding: 24px 16px; }
  .modal-box { padding: 24px 16px; }

  .grid-4 { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
}

/* -- Admin stat grid responsive -- */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Sidebar overlay on mobile ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,31,60,0.5);
  z-index: 199;
}
@media (max-width: 768px) {
  .sidebar-overlay.show { display: block; }
}

/* ── Mobile topbar hamburger for dashboard ── */
.dashboard-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--grey-100);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  font-size: 1rem;
}
@media (max-width: 768px) {
  .dashboard-hamburger { display: flex; }
}

/* ── Filter Search Input (admin list pages) ── */
.filter-search-input {
  padding: 7px 12px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--grey-200);
  font-size: 0.88rem;
  font-family: var(--font-body);
  outline: none;
  transition: var(--transition);
  background: var(--white);
  color: var(--grey-800);
}
.filter-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(23,184,212,0.10);
}

/* ── Topbar actions wrap on small screens ── */
@media (max-width: 768px) {
  .topbar-actions { gap: 6px; flex-wrap: wrap; }
  .topbar-actions .filter-search-input { width: 140px !important; }
  .topbar-actions .form-select { width: 110px !important; }
}