/* 
 * AI Training & Research Page - Mobile Optimization CSS
 * 针对 ai-training.html 页面的专属移动端适配
 */

@media screen and (max-width: 1024px) {

  /* ============================================
     Hero Section Override
     ============================================ */
  .wrapper > section:first-of-type {
    height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .wrapper > section:first-of-type h1 {
    font-size: 32px !important;
  }

  /* ============================================
     Specialized Research Labs (3 Modules, 1 per row)
     ============================================ */
  .wrapper section:nth-of-type(2) {
    padding: 60px 0 !important;
  }

  .wrapper section:nth-of-type(2) .col-xs-12 {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  /* Ensure cards have proper height/spacing */
  .wrapper section:nth-of-type(2) div[style*="height: 400px"] {
    height: 300px !important; /* Reduce height for mobile */
  }

  /* ============================================
     Customized Training Curriculum (Vertical Stack, No Icons)
     ============================================ */
  .wrapper section:nth-of-type(3) {
    padding: 60px 0 !important;
  }

  /* Hide the center vertical line */
  .wrapper section:nth-of-type(3) > div > div[style*="position: absolute; left: 50%"] {
    display: none !important;
  }

  /* Hide the circular icons (Timeline Nodes) */
  .wrapper section:nth-of-type(3) .row > div[style*="position: absolute"] {
    display: none !important;
  }

  /* Reset Row Layout */
  .wrapper section:nth-of-type(3) .row {
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reset Columns */
  .wrapper section:nth-of-type(3) .col-xs-12 {
    width: 100% !important;
    padding: 0 !important; /* Remove padding-left/right: 60px */
    text-align: left !important; /* Force left alignment for all text */
  }

  /* Hide empty columns (simple heuristic: if it has no children or text, but here we know structure) */
  /* Actually, since we stack them, the empty divs will just take 0 height usually, or we can hide them if we could target them. */
  /* But simpler: The content divs have style="background: white...". We ensure those look good. */
  
  .wrapper section:nth-of-type(3) div[style*="background: white"] {
    margin-bottom: 15px !important;
    padding: 25px 20px !important;
  }

  /* ============================================
     Platform Performance Metrics (2 Rows x 2 Columns)
     ============================================ */
  .wrapper section:nth-of-type(4) {
    padding: 60px 0 !important;
  }

  .wrapper section:nth-of-type(4) .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  /* Force 50% width */
  .wrapper section:nth-of-type(4) .col-xs-12 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
  }

  /* Adjust Card Styling */
  .wrapper section:nth-of-type(4) div[style*="background: rgba(255, 255, 255, 0.7)"] {
    padding: 25px 15px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Adjust Icon Circle */
  .wrapper section:nth-of-type(4) div[style*="width: 80px"] {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 15px !important;
  }

  .wrapper section:nth-of-type(4) i {
    font-size: 28px !important;
  }

  /* Adjust Number Font Size */
  .wrapper section:nth-of-type(4) h3 {
    font-size: 28px !important;
    margin-bottom: 5px !important;
  }

  /* Adjust Text Font Size */
  .wrapper section:nth-of-type(4) p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}