/* 
 * Subpage Mobile Optimization CSS
 * 针对所有子页面的移动端适配优化
 */

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

  /* ============================================
     Hero Section (Page Title) Optimization
     ============================================ */
  
  /* Adjust Hero Height and Padding */
  .lrn-started-inner,
  section[style*="height: 650px"],
  section[style*="height: 600px"],
  section[style*="height: 500px"] {
    height: auto !important;
    min-height: auto !important;
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }

  /* Center Hero Content */
  .lrn-started-inner .container > div,
  section[style*="height: 650px"] .container > div {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Center the "Badge" / Logo in Hero */
  .lrn-started-inner div[style*="display: inline-flex"],
  section[style*="height: 650px"] div[style*="display: inline-flex"] {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
  }

  /* Adjust Hero Title Font Size */
  .lrn-started-inner h1,
  section[style*="height: 650px"] h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
  }

  /* Adjust Hero Description Font Size */
  .lrn-started-inner p,
  section[style*="height: 650px"] p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* ============================================
     Card Layout Optimization (2 Columns)
     ============================================ */

  /* 
     Target rows that contain feature cards.
     We use a heuristic: rows inside sections that are NOT the hero section.
     We override the 100% width from common css.
  */
  
  /* For 3-column layouts (col-md-4), make them 2 columns on mobile */
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 {
    width: 50% !important;
    float: left !important;
    padding: 0 8px !important;
    clear: none !important;
    margin-bottom: 20px !important;
  }
  
  /* Fix clearing for 2-column layout */
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4:nth-of-type(2n+1) {
    clear: left !important;
  }

  /* Adjust card padding/height for smaller screens */
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 > div {
    height: auto !important;
    min-height: 200px !important;
  }
  
  /* Adjust card title size */
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 h4 {
    font-size: 16px !important;
  }
  
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ============================================
     Timeline / Roadmap Optimization
     ============================================ */
     
  /* Hide the center line */
  .section .container > div[style*="position: relative"] > div[style*="position: absolute"][style*="width: 3px"] {
    display: none !important;
  }
  
  /* Reset Timeline Rows */
  .section .row[style*="margin-bottom: 60px"] {
    margin-bottom: 30px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Reset Columns in Timeline */
  .section .row[style*="margin-bottom: 60px"] > div[class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
  }
  
  /* Hide empty columns used for spacing */
  .section .row[style*="margin-bottom: 60px"] > div[class*="col-"]:empty {
    display: none !important;
  }
  
  /* Style the Card inside Timeline */
  .section .row[style*="margin-bottom: 60px"] > div > div[style*="background: white"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 4px !important;
    border-right-width: 0 !important; /* Reset if any right border */
    padding: 20px !important;
  }
  
  /* Icon positioning in Timeline */
  .section .row[style*="margin-bottom: 60px"] > div[style*="position: absolute"] {
    position: static !important;
    transform: none !important;
    margin-bottom: 15px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
  }
  
  .section .row[style*="margin-bottom: 60px"] > div[style*="position: absolute"] i {
    font-size: 20px !important;
  }

  /* ============================================
     General Section Spacing
     ============================================ */
  .section {
    padding: 50px 0 !important;
  }
  
  .lrn-titles {
    margin-bottom: 30px !important;
  }

  /* ============================================
     General Section Spacing
     ============================================ */
}

/* Extra small screens adjustments */
@media screen and (max-width: 480px) {
  /* On very small screens, maybe revert to 1 column if content is too squeezed? 
     But user asked for 2 columns. Let's keep 2 columns but ensure padding is small. */
     
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 {
    padding: 0 5px !important;
  }
  
  .section:not(.lrn-started-inner) .row .col-xs-12.col-sm-12.col-md-4 h4 {
    font-size: 14px !important;
  }
}