/* ============================================================
   霖楓學苑 LF Academy - Mobile-First RWD v2.0
   全面行動端優化 - 適用所有頁面
   ============================================================ */

/* --- Base Mobile Reset --- */
@media (max-width: 768px) {
  html { font-size: 14px; }
  body { padding: 0; overflow-x: hidden; }
  
  /* Navigation */
  .nav-links { display: none; }
  .nav-inner { padding: 10px 14px; }
  .nav-logo { font-size: 16px; }
  
  /* Hero */
  .hero { padding: 100px 16px 60px; }
  .hero h1 { font-size: 22px !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn-hero-primary { width: 100%; text-align: center; }
  
  /* Cards & Grids */
  .grid, .product-grid, .testimonial-grid, 
  .trap-grid, .sc, .result-grid { 
    grid-template-columns: 1fr !important; 
  }
  .tc { grid-template-columns: 1fr !important; }
  
  /* Cards */
  .card, .pb { padding: 16px !important; }
  .day-header { padding: 16px !important; }
  
  /* Typography */
  .cv-title { font-size: 20px !important; }
  .h1 { font-size: 14px !important; }
  
  /* Tables - Scrollable */
  .qt, .et { font-size: 10px; display: block; overflow-x: auto; }
  
  /* Buttons */
  .btn, .btn-blue, .btn-gold, .btn-red, .btn-green { 
    width: 100%; text-align: center; padding: 12px 16px; font-size: 14px; 
  }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px; }
  
  /* Tabs - Horizontal scroll */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { font-size: 10px; padding: 8px 10px; }
  
  /* Launchpad */
  .topbar { padding: 10px 14px; }
  .topbar h1 { font-size: 16px; }
  
  /* Forms */
  input, textarea, select { font-size: 16px !important; padding: 12px !important; }
  
  /* Images */
  img { max-width: 100%; height: auto; }
  
  /* Hide non-essential on mobile */
  .no-mobile { display: none !important; }
}

/* --- Small phones --- */
@media (max-width: 400px) {
  .hero h1 { font-size: 18px !important; }
  .cv-title { font-size: 18px !important; }
  .hero-stats { flex-direction: column; gap: 12px; }
}

/* --- Touch-friendly --- */
@media (hover: none) and (pointer: coarse) {
  .btn, .tab-btn, .trap-chip, a { min-height: 44px; min-width: 44px; }
  .checklist-item .box { width: 28px; height: 28px; }
}

/* --- Print --- */
@media print {
  .no-print, .nav, .topbar, .tabs, .footer { display: none !important; }
  body { font-size: 11px; }
}
