/* 
 * Computing Platforms Page - Mobile Optimization CSS
 * 针对 computing-platforms.html 页面的专属移动端适配
 */

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

  /* ============================================
     Hero Section Override
     ============================================ */
  
  /* Adjust Hero Padding & Content Alignment */
  .wrapper > section:first-of-type {
    padding: 80px 0 60px 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .wrapper > section:first-of-type .row {
    display: flex;
    flex-direction: column;
  }

  /* Hide the empty spacer column on mobile */
  .wrapper > section:first-of-type .col-xs-12.col-sm-12.col-md-4.col-lg-4 {
    display: none !important;
  }

  /* Make content box full width */
  .wrapper > section:first-of-type .col-xs-12.col-sm-12.col-md-8.col-lg-8 {
    width: 100% !important;
  }

  /* Adjust padding and text for the hero content box */
  .wrapper > section:first-of-type div[style*="background: rgba(0,0,0,0.6)"] {
    padding: 30px 20px !important;
    text-align: center;
  }

  .wrapper > section:first-of-type h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .wrapper > section:first-of-type p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ============================================
     Feature Cards Section (Four Pillars)
     ============================================ */
  
  .wrapper section:nth-of-type(2) {
    padding: 60px 0 !important;
  }

  .wrapper section:nth-of-type(2) .lrn-titles {
    margin-bottom: 40px !important;
  }

  /* Make cards full width on mobile */
  .wrapper section:nth-of-type(2) .col-xs-12.col-sm-12.col-md-6.col-lg-6 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Target the gradient cards */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] {
    padding: 30px 25px !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Header inside the card (Icon + Title) */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] > div[style*="display: flex"] {
    margin-bottom: 20px !important;
    align-items: center !important; /* Center align vertically */
  }

  /* Icon container - HIDDEN */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] > div[style*="display: flex"] > div[style*="width: 60px"] {
    display: none !important;
  }

  /* Icon size */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] i {
    font-size: 26px !important;
  }

  /* Title inside the card */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] h4 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Description text */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
  }

  /* List items */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] ul li {
    margin-bottom: 15px !important;
    align-items: flex-start !important;
  }

  /* Check icon in list */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] ul li i {
    font-size: 20px !important;
    margin-right: 12px !important;
    margin-top: 3px !important;
  }

  /* Text in list */
  .wrapper section:nth-of-type(2) div[style*="background: linear-gradient"] ul li div {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }



  /* ============================================
     Performance Metrics Section
     ============================================ */
  
  .wrapper section:nth-of-type(4) .col-xs-12.col-sm-6.col-md-4 {
    width: 100% !important;
  }

  .wrapper section:nth-of-type(4) div[style*="background: linear-gradient"] {
    padding: 30px 25px !important;
  }

  .wrapper section:nth-of-type(4) div[style*="font-size: 42px"] {
    font-size: 36px !important;
  }
}