/* 
 * HPC & Scientific Computing Page - Mobile Optimization CSS
 * 针对 hpc-computing.html 页面的专属移动端适配
 */

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

  /* ============================================
     Header & Navigation Fix (Issue 1)
     ============================================ */
  .lrn-header .lrn-navbar .container .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .lrn-navbar .col-xs-6 {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 10px 15px !important;
  }

  .lrn-navbar .col-xs-6:first-child {
    flex: 1 !important;
  }

  .lrn-navbar .col-xs-6:last-child {
    flex: 0 0 60px !important;
  }

  .lrn-logo {
    text-align: left !important;
  }

  .lrn-logo img {
    max-height: 35px !important;
    width: auto !important;
  }

  .lrn-navbar .align-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .lrn-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 30px !important;
    height: 30px !important;
    position: relative !important;
    z-index: 999 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .lrn-menu-btn span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #333 !important;
    margin: 3px 0 !important;
    transition: all 0.3s !important;
  }

  /* ============================================
     Hero Section (Issue 2)
     ============================================ */
  .wrapper > section:first-of-type {
    height: auto !important;
    padding: 120px 0 80px 0 !important;
    background: url('../image/solutions/3/hpc1.jpg') center center / cover no-repeat !important;
    position: relative !important;
  }

  /* Overlay for readability */
  .wrapper > section:first-of-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 60, 0.75); /* Dark blue overlay */
    z-index: 1;
  }

  /* Left Panel (Text) */
  .wrapper > section:first-of-type > div:first-of-type {
    position: relative !important;
    width: 100% !important;
    padding: 0 20px !important;
    text-align: center !important;
    z-index: 2 !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    display: block !important;
  }

  .wrapper > section:first-of-type > div:first-of-type > div {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Hide Right Panel (Image div) */
  .wrapper > section:first-of-type > div:last-of-type {
    display: none !important;
  }

  /* Text Adjustments */
  .wrapper > section:first-of-type h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
  }

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

  /* Metrics Bar */
  .wrapper > section:first-of-type div[style*="margin-top: 40px"] {
    margin-top: 30px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
  }

  .wrapper > section:first-of-type div[style*="margin-top: 40px"] > div {
    text-align: center !important;
  }

  .wrapper > section:first-of-type div[style*="font-size: 36px"] {
    font-size: 28px !important;
  }

  /* ============================================
     Computing Resource Matrix (Issue 3)
     ============================================ */
  .wrapper section:nth-of-type(2) {
    padding: 60px 0 !important;
  }

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

  .wrapper section:nth-of-type(2) div[style*="height: 280px"] {
    height: auto !important;
    min-height: 160px !important; /* Reduced height */
    padding: 25px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important; /* Center align items */
  }

  /* Hide Icon Container (The "Image") */
  .wrapper section:nth-of-type(2) div[style*="width: 60px"] {
    display: none !important;
  }

  /* Text Alignment */
  .wrapper section:nth-of-type(2) h4 {
    text-align: center !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  .wrapper section:nth-of-type(2) p {
    text-align: center !important;
    font-size: 13px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
  }

  .wrapper section:nth-of-type(2) div[style*="display: flex"] {
    justify-content: center !important;
  }

  /* ============================================
     Workload Library (2x2 Grid, Hide Images)
     ============================================ */
  .wrapper section:nth-of-type(3) {
    padding: 50px 0 !important;
  }

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

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

  /* Hide only the third card */
  .wrapper section:nth-of-type(3) .col-xs-12:nth-child(3) {
    display: none !important;
  }

  /* Card adjustments */
  .wrapper section:nth-of-type(3) div[style*="min-height: 500px"] {
    min-height: auto !important;
    height: auto !important;
  }

  /* Hide image container */
  .wrapper section:nth-of-type(3) div[style*="height: 220px"] {
    display: none !important;
  }

  /* Adjust padding */
  .wrapper section:nth-of-type(3) div[style*="padding: 35px 30px"] {
    padding: 20px 15px !important;
  }

  .wrapper section:nth-of-type(3) h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  .wrapper section:nth-of-type(3) p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  /* Tags */
  .wrapper section:nth-of-type(3) div[style*="display: flex"] {
    justify-content: center !important;
  }

  .wrapper section:nth-of-type(3) span {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* ============================================
     Intelligent Resource Management (Issue 4)
     ============================================ */
  .wrapper section:nth-of-type(4) {
    padding: 50px 0 !important;
  }

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

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

  /* Force 3 columns per row */
  .wrapper section:nth-of-type(4) .col-xs-12 {
    width: 33.33% !important;
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    padding: 0 5px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Hide Arrows */
  .wrapper section:nth-of-type(4) .col-md-1 {
    display: none !important;
  }

  /* Adjust content size for small columns */
  .wrapper section:nth-of-type(4) div[style*="width: 60px"] {
    width: 45px !important;
    height: 45px !important;
    margin-bottom: 10px !important;
  }
  
  .wrapper section:nth-of-type(4) div[style*="width: 60px"] i {
    font-size: 22px !important;
  }

  .wrapper section:nth-of-type(4) h6 {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    height: 30px !important; /* Fixed height for alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .wrapper section:nth-of-type(4) p {
    display: none !important; /* Hide description to fit grid */
  }

  /* ============================================
     Certifications (Issue 5)
     ============================================ */
  .wrapper section:nth-of-type(5) {
    padding: 50px 0 !important;
  }

  /* Badges: 2 rows 2 columns */
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
  }

  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
    display: flex !important;
  }

  .wrapper section:nth-of-type(5) .row:nth-of-type(2) div[style*="padding: 35px 25px"] {
    padding: 20px 10px !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 15px !important;
    box-shadow: none !important; /* Remove default shadow for cleaner look with bg */
  }

  /* Hide icons */
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6 > div > div:first-child {
    display: none !important;
  }

  /* Add background colors to cards */
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6:nth-child(1) > div {
    background: rgba(102, 126, 234, 0.08) !important; /* Light Purple */
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
  }
  
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6:nth-child(2) > div {
    background: rgba(245, 87, 108, 0.08) !important; /* Light Pink */
    border: 1px solid rgba(245, 87, 108, 0.2) !important;
  }
  
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6:nth-child(3) > div {
    background: rgba(79, 172, 254, 0.08) !important; /* Light Blue */
    border: 1px solid rgba(79, 172, 254, 0.2) !important;
  }
  
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) .col-xs-6:nth-child(4) > div {
    background: rgba(132, 250, 176, 0.08) !important; /* Light Green */
    border: 1px solid rgba(132, 250, 176, 0.2) !important;
  }

  /* Text adjustments */
  .wrapper section:nth-of-type(5) .row:nth-of-type(2) h6 {
    font-size: 14px !important;
    margin-bottom: 5px !important;
    color: #333 !important;
  }

  .wrapper section:nth-of-type(5) .row:nth-of-type(2) p {
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.3 !important;
  }

  /* Adjust text */
  .wrapper section:nth-of-type(5) .row:first-of-type h6 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .wrapper section:nth-of-type(5) .row:first-of-type p {
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* Security Features (Multi...) */
  .wrapper section:nth-of-type(5) .row:last-of-type {
    margin-top: 20px !important;
  }

  .wrapper section:nth-of-type(5) .row:last-of-type .col-xs-12 {
    margin-bottom: 15px !important;
  }

  /* Hide icons - Stronger Selector */
  .wrapper section:nth-of-type(5) .row:last-of-type .col-xs-12 > div > div:first-child {
    display: none !important;
  }

  /* Adjust text container */
  .wrapper section:nth-of-type(5) .row:last-of-type div[style*="display: flex"] {
    display: block !important;
    text-align: center !important;
    padding: 15px !important;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    gap: 0 !important;
  }

  .wrapper section:nth-of-type(5) .row:last-of-type h6 {
    font-size: 15px !important;
    margin-bottom: 5px !important;
  }

  .wrapper section:nth-of-type(5) .row:last-of-type p {
    font-size: 13px !important;
  }

}