/* ============================================
   Med Res & Stats — Shared Responsive Styles
   Tablet (≤1024px) + Mobile (≤768px) + Small (≤480px)
   ============================================ */

/* ── Tablet: ≤1024px ─────────────────────── */
@media (max-width: 1024px) {
  body { min-width: 0 !important; }

  /* Topbar: hide on tablet, too many items */
  .topbar { display: none; }

  /* Header no longer sticky below topbar */
  .header { top: 0; }

  /* Header inner padding */
  .header-inner {
    padding: 0 16px;
    flex-wrap: wrap;
  }

  /* Logo shrink */
  .logo { padding: 10px 0; }
  .logo-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 6px; }
  .logo-text { font-size: 15px; }
  .logo-text small { font-size: 10px; }

  /* Nav: horizontal scroll */
  .main-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: flex;
    gap: 0;
  }
  .main-nav a {
    padding: 12px 10px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .main-nav a.active::after { left: 10px; right: 10px; }

  /* All sections get side padding */
  .section, .hero-inner, .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero */
  .hero-inner { padding-top: 36px !important; padding-bottom: 40px !important; }
  .hero h1 { font-size: 24px; }

  /* Footer columns wrap */
  .footer-links {
    flex-wrap: wrap;
    gap: 24px;
    padding: 28px 16px;
  }
  .footer-col { flex: 1 1 44%; min-width: 140px; }
  .footer-bottom { padding: 16px; font-size: 12px; }

  /* Stats row */
  .stats-row { flex-wrap: wrap; margin: -20px 16px 24px; }
  .stat-item { flex: 1 1 48%; }

  /* Auth modal */
  .modal-card { width: 94vw; max-height: 85vh; }
  .modal-body { padding: 20px; }
}

/* ── Mobile: ≤768px ──────────────────────── */
@media (max-width: 768px) {
  /* Hero */
  .hero h1 { font-size: 22px; }
  .hero p { font-size: 14px; }
  .hero-inner { grid-template-columns: 1fr; gap: 20px; }

  /* Category grid: 2-3 cols */
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-card { padding: 18px 8px 14px; }
  .cat-icon { font-size: 24px; }

  /* Filter bar */
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-bar .flabel { width: 100%; }
  .filter-select { flex: 1; min-width: 90px; font-size: 12px; }
  .result-count { width: 100%; text-align: left; margin-left: 0 !important; }

  /* Course cards / tutor cards: single column */
  .tutor-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Leaderboard */
  .podium { flex-direction: column; }
  .podium-card { min-height: auto; }
  .lb-row { flex-wrap: wrap; gap: 8px; padding: 12px 10px; }

  /* Resource grid */
  .res-grid { grid-template-columns: 1fr; gap: 12px; }

  /* View toggle */
  .view-toggle { display: none; }

  /* Sort bar */
  .sort-bar { flex-wrap: wrap; gap: 4px; }
  .sort-btn { font-size: 11px; padding: 4px 10px; }

  /* Keyword chips */
  .kchip-row { gap: 4px; }
  .kchip { font-size: 11px; padding: 3px 8px; }

  /* Footer columns */
  .footer-col { flex: 1 1 100%; }

  /* Testing badge */
  #testing-badge { font-size: 10px; padding: 4px 30px; top: 80px; left: -35px; }
}

/* ── Small mobile: ≤480px ────────────────── */
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { flex: 1 1 100%; }
  .hero h1 { font-size: 20px; }
  .hero-search { font-size: 13px; padding: 10px 14px; }
  .hero-search-btn { padding: 10px 16px; font-size: 13px; }

  .header-inner { gap: 8px; }
  .logo-text { font-size: 14px; }
  .main-nav a { padding: 10px 8px; font-size: 12px; }

  .modal-card { max-width: 98vw; border-radius: 12px; }
  .modal-body { padding: 16px; }

  .footer-links { gap: 16px; }
  .footer-col h4 { font-size: 14px; }
  .footer-col a { font-size: 12px; }

  #testing-badge { font-size: 9px; padding: 3px 24px; top: 60px; left: -38px; }
}