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

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

  /* ============================================
     Hero Section
     ============================================ */
  .lrn-started-inner {
    min-height: auto !important;
    padding: 100px 0 60px 0 !important;
  }

  .lrn-started-inner h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .lrn-started-inner p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 15px !important;
  }

  /* ============================================
     Certification Programs (Issue 1)
     ============================================ */
  /* Adjust container to stack image and text */
  .wrapper > section:nth-of-type(2) .row:first-child .element-anim-1 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* Fix Image Height */
  .wrapper > section:nth-of-type(2) .row:first-child img {
    height: 220px !important;
    object-fit: cover !important;
  }

  /* Text Container - Make relative and dark background */
  .wrapper > section:nth-of-type(2) .row:first-child div[style*="position: absolute"] {
    position: relative !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Match theme or dark */
    padding: 30px 20px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* Increase Text Size */
  .wrapper > section:nth-of-type(2) .row:first-child h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }

  .wrapper > section:nth-of-type(2) .row:first-child p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* ============================================
     Training Cards (Issue 2)
     ============================================ */
  
  .wrapper > section:nth-of-type(2) .col-md-6 {
    margin-bottom: 20px !important;
  }

  /* Card Container */
  .wrapper > section:nth-of-type(2) .col-md-6 .element-anim-1 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header Section (Gradient part) */
  .wrapper > section:nth-of-type(2) .col-md-6 div[style*="padding: 40px 30px"] {
    padding: 20px 20px !important;
    flex: 0 0 auto !important;
  }

  /* Hide Icon Container */
  .wrapper > section:nth-of-type(2) .col-md-6 div[style*="width: 70px"] {
    display: none !important;
  }

  /* Title Adjustment */
  .wrapper > section:nth-of-type(2) .col-md-6 h4 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    min-height: 52px !important; /* Ensure 2 lines height for consistency */
    display: flex !important;
    align-items: center !important;
  }

  /* Body Section */
  .wrapper > section:nth-of-type(2) .col-md-6 div[style*="padding: 35px 30px"] {
    padding: 20px 20px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Description Text */
  .wrapper > section:nth-of-type(2) .col-md-6 p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
  }

  /* Tags Container */
  .wrapper > section:nth-of-type(2) .col-md-6 div[style*="display: flex"] {
    gap: 8px !important;
  }

  /* Tags */
  .wrapper > section:nth-of-type(2) .col-md-6 span {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

}