/* 手機端專用修復檔案 */

/* 重要：手機端問題修復 */
@media (max-width: 768px) {
  /* 強制修復手機版背景顯示問題 */
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .desktop-bg {
    display: none !important;
  }
  
  .mobile-bg {
    display: block !important;
    background: linear-gradient(135deg, 
      rgba(26,35,126,0.95) 0%, 
      rgba(26,35,126,0.85) 50%, 
      rgba(26,35,126,0.75) 100%
    ) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }
  
  /* 修復標題區域 */
  .hero-container {
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
  }
  
  .hero-content-wrapper {
    align-items: flex-start !important;
    min-height: auto !important;
    padding: 2.5rem 1rem !important;
    z-index: 10 !important;
    position: relative !important;
  }
  
  /* 修復標題區域文字顏色 */
  .hero-title {
    color: white !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    font-size: 2.3rem !important;
    text-align: center !important;
    line-height: 1.25 !important;
    margin-bottom: 1.2rem !important;
    z-index: 10 !important;
    position: relative !important;
  }
  
  .hero-subtitle {
    color: white !important;
    font-size: 1.4rem !important;
    text-align: center !important;
    z-index: 10 !important;
    position: relative !important;
    margin: 1.2rem 0 1rem 0 !important;
  }
  
  .hero-desc {
    color: rgba(255,255,255,0.95) !important;
    font-size: 1.05rem !important;
    text-align: center !important;
    z-index: 10 !important;
    position: relative !important;
    margin: 1rem 0 1.5rem 0 !important;
  }
  
  .hero-slogan {
    color: #ffd600 !important;
    z-index: 10 !important;
    position: relative !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 1.2rem 0 !important;
    font-size: 1.2rem !important;
  }
  
  /* 修復講師區塊溢出問題 */
  .instructor-card-horizontal {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .instructor-photo {
    margin-bottom: 1rem !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .instructor-avatar-horizontal {
    width: 120px !important;
    height: 120px !important;
  }
  
  .instructor-info {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .instructor-name-horizontal {
    font-size: 1.4rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.5rem !important;
  }
  
  .instructor-title-horizontal {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .instructor-credentials {
    text-align: left !important;
    margin: 0 auto !important;
    max-width: 280px !important;
  }
  
  .instructor-credentials li {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.3rem !important;
  }
  
  .instructor-highlight {
    text-align: center !important;
    margin: 1rem 0 !important;
  }
  
  .instructor-highlight p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* 確保所有容器不會超出螢幕寬度 */
  .container {
    max-width: 100% !important;
    margin: 1rem auto !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }
  
  .section {
    padding: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.9rem !important;
  }
  
  .hero-subtitle {
    font-size: 1.2rem !important;
  }
  
  .hero-desc {
    font-size: 1rem !important;
  }
  
  .hero-slogan {
    font-size: 1.1rem !important;
  }
  
  .instructor-avatar-horizontal {
    width: 100px !important;
    height: 100px !important;
  }
  
  .instructor-name-horizontal {
    font-size: 1.2rem !important;
  }
  
  .instructor-credentials {
    max-width: 260px !important;
  }
  
  .instructor-credentials li {
    font-size: 0.85rem !important;
  }
}