/* ============================================
   推薪客全站响应式框架 v1.0
   2026-05-14
   基础断点：768px(平板/手机分界), 1024px(桌面)
   ============================================ */

/* ===== 手机端 (< 768px) ===== */
@media (max-width: 767px) {
  .hero-section { padding: 80px 0 50px; }
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 16px; margin-bottom: 30px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 300px; }
  .section { padding: 44px 0; }
  .section-title { font-size: 22px; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .role-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 16px; }
  .navbar { height: 50px; }
  .navbar .container { height: 50px; padding: 0 12px; }
  .navbar-brand { font-size: 16px; }
  .navbar-brand img { height: 28px; }
  .navbar > .container > .navbar-actions { display: none; }
  .navbar-toggle { display: flex; align-items: center; justify-content: center; }
  .navbar-links {
    display: none;
    position: fixed; top: 50px; left: 0; right: 0;
    background: var(--bg-card, #ffffff); flex-direction: column;
    padding: 12px 16px 16px; gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--border, #e5e7eb); z-index: 99;
  }
  .navbar-links.active { display: flex; }
  .navbar-links a { padding: 10px 14px; font-size: 15px; width: 100%; border-radius: var(--radius, 8px); }
  .navbar-links .navbar-actions {
    display: flex; gap: 10px; margin-top: 10px;
    padding: 10px 14px 4px; border-top: 1px solid var(--border, #e5e7eb); width: 100%;
  }
  .navbar-links .navbar-actions .btn { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; }
  .portal-header { padding: 24px 16px; }
  .portal-header h1 { font-size: 20px; }
  .portal-header p { font-size: 14px; }
  .portal-grid { grid-template-columns: 1fr; gap: 10px; }
  .portal-grid-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .portal-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .portal-card { padding: 16px; }
  .portal-stat { min-width: 100px; padding: 14px; }
  .portal-stat .number { font-size: 20px; }
  .hero-stats { gap: 10px; }
  .login-card { padding: 28px 20px; }
  .footer .container { padding: 24px 16px; }
  .footer-links { justify-content: center; }
  .search-bar { flex-direction: column; padding: 12px; }
  .search-bar .field { width: 100%; }
  .search-bar .actions { width: 100%; }
  .search-bar .actions .btn { flex: 1; }
  .table-wrap { overflow-x: auto; }
  .table-wrap table { min-width: 600px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left, .toolbar-right { flex-wrap: wrap; }
  .toolbar-right { justify-content: flex-start; }
  .hero-stats { gap: 8px; }
  .portal-stat { min-width: calc(50% - 8px); padding: 12px 8px; }
  .portal-stat .number { font-size: 18px; }
  .portal-stat .label { font-size: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { min-width: 0; width: 100%; text-align: center; }
  .info-row { flex-direction: column; gap: 8px; }
  .info-group { min-width: 0; flex: 1; }
  .form-row { grid-template-columns: 1fr; }
  .content-card { padding: 16px; }
  .page-header { padding: 16px 0; }
  .page-header h1 { font-size: 18px; }
  .portal-actions { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .pagination button { padding: 6px 10px; font-size: 12px; }
  .card { padding: 16px; }
  .empty-state { padding: 40px 16px; }
  .panel-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}

/* ===== 平板端 (768px-1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .search-bar { flex-wrap: wrap; }
  .search-bar .field { flex: 1; min-width: 160px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-header { padding: 30px 20px; }
  .portal-header h1 { font-size: 24px; }
  .container { padding: 0 24px; }
  .hero-section { padding: 100px 0 60px; }
  .hide-tablet { display: none !important; }
}

/* ===== 桌面端 (>= 1024px) ===== */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}