/* 
 * Data Center Page Specific Mobile Responsive CSS
 * 数据中心页面移动端适配样式
 * 需配合 mobile-responsive-common.css 使用
 */

/* ============================================
   Hero Section - 首屏优化
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* Hero Section 高度调整 */
  .wrapper > section:first-child {
    min-height: auto !important;
    padding: 80px 0 60px 0 !important;
  }
  
  /* Hero 小标题 */
  .wrapper > section:first-child div[style*="letter-spacing: 2px"] {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 15px !important;
  }
  
  /* Hero 主标题 */
  .wrapper > section:first-child h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
  }
  
  /* Hero 描述文字 */
  .wrapper > section:first-child p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Hero 右侧数据面板容器 */
  .wrapper > section:first-child .col-xs-12.col-sm-12.col-md-6:last-child {
    margin-top: 40px !important;
  }
  
  /* 数据面板背景 */
  .wrapper > section:first-child div[style*="backdrop-filter: blur"] {
    padding: 25px !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 15px !important;
  }
  
  /* 数据面板网格 - 保持2x2布局 */
  .wrapper > section:first-child div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 15px !important; /* 行间距20px, 列间距15px */
  }
  
  /* 数据面板中的大文字 */
  .wrapper > section:first-child div[style*="font-size: 42px"] {
    font-size: 28px !important; /* 从24px增加到28px,更醒目 */
    margin-bottom: 8px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }
  
  /* 数据面板中的小文字 */
  .wrapper > section:first-child div[style*="rgba(255,255,255,0.7)"] {
    font-size: 12px !important; /* 从11px增加到12px */
    line-height: 1.4 !important;
    opacity: 0.9 !important;
  }
  
  /* 数据面板每个单元格 - 添加内边距避免粘连 */
  .wrapper > section:first-child div[style*="text-align: center"] {
    padding: 12px 8px !important;
  }
}

/* ============================================
   Three Pillars Section - 三大支柱区块
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 区块标题 */
  .wrapper > section:nth-child(2) {
    padding: 60px 0 !important;
  }
  
  .wrapper > section:nth-child(2) .lrn-titles {
    margin-bottom: 40px !important;
  }
  
  .wrapper > section:nth-child(2) .lrn-subtitle {
    font-size: 12px !important;
    margin-bottom: 15px !important;
  }
  
  .wrapper > section:nth-child(2) .lrn-title,
  .wrapper > section:nth-child(2) h3 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  
  /* 每个支柱的间距 */
  .wrapper > section:nth-child(2) .row {
    margin-bottom: 50px !important;
    flex-direction: column !important; /* 强制上下排列 */
    align-items: stretch !important; /* 确保子元素对齐 */
  }
  
  .wrapper > section:nth-child(2) .row:last-child {
    margin-bottom: 0 !important;
  }
  
  /* 图片列容器 - 确保对齐 */
  .wrapper > section:nth-child(2) .col-xs-12.col-sm-12.col-md-6 {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* 图片容器 */
  .wrapper > section:nth-child(2) img {
    width: 100% !important;
    border-radius: 12px !important;
    margin-bottom: 30px !important;
    display: block !important; /* 移除inline间距 */
  }
  
  /* 文字内容区域 - 移除padding */
  .wrapper > section:nth-child(2) div[style*="padding-left: 50px"],
  .wrapper > section:nth-child(2) div[style*="padding-right: 50px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* 图标和标题容器 - 移动端隐藏图标 */
  .wrapper > section:nth-child(2) div[style*="display: flex"][style*="align-items: center"] {
    margin-bottom: 20px !important;
  }
  
  /* 隐藏图标圆形背景 */
  .wrapper > section:nth-child(2) div[style*="width: 60px"][style*="height: 60px"][style*="display: flex"] {
    display: none !important;
  }
  
  /* 图标 */
  .wrapper > section:nth-child(2) div[style*="width: 60px"] i {
    font-size: 26px !important;
  }
  
  /* 子标题 h4 - 移动端样式 */
  .wrapper > section:nth-child(2) h4[style*="font-size"][style*="margin: 0"] {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 列表项 */
  .wrapper > section:nth-child(2) ul {
    margin-top: 20px !important;
  }
  
  .wrapper > section:nth-child(2) li {
    margin-bottom: 18px !important;
  }
  
  .wrapper > section:nth-child(2) li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* 列表图标 */
  .wrapper > section:nth-child(2) li i {
    font-size: 20px !important;
    margin-right: 12px !important;
  }
  
  /* 列表主文字 */
  .wrapper > section:nth-child(2) li div[style*="font-weight: 600"] {
    font-size: 15px !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
  }
  
  /* 列表副文字 */
  .wrapper > section:nth-child(2) li div[style*="color: #718096"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================
   Core Performance Metrics - 性能指标区块
   ============================================ */

/* 桌面端和移动端通用 - 卡片间距控制 */
.wrapper > section:nth-child(3) .row > .col-xs-6.col-sm-6 {
  margin-bottom: 20px;
}

.wrapper > section:nth-child(3) .row > .col-xs-6.col-sm-6:nth-child(n+3) {
  margin-bottom: 0; /* 后两个卡片无底边距 */
}

@media screen and (max-width: 1024px) {
  
  .wrapper > section:nth-child(3) {
    padding: 60px 0 !important;
  }
  
  .wrapper > section:nth-child(3) .lrn-titles {
    margin-bottom: 40px !important;
  }
  
  .wrapper > section:nth-child(3) .lrn-subtitle {
    font-size: 10px !important; /* 缩小字体确保完整显示 */
    letter-spacing: 1px !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    color: white !important; /* 改为白色 */
    opacity: 0.9 !important;
  }
  
  .wrapper > section:nth-child(3) .lrn-title,
  .wrapper > section:nth-child(3) h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  /* PUE仪表盘区域 */
  .wrapper > section:nth-child(3) .col-xs-12.col-sm-12.col-md-6:first-child {
    margin-bottom: 40px !important;
  }
  
  /* PUE圆圈容器 */
  .wrapper > section:nth-child(3) div[style*="width: 300px"][style*="height: 300px"] {
    width: 240px !important;
    height: 240px !important;
    backdrop-filter: none !important;
    border-width: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Elite文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 72px"] {
    font-size: 52px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  
  /* PUE Rating文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 18px"][style*="margin-top: 10px"] {
    font-size: 15px !important;
    margin-top: 12px !important;
    text-align: center !important;
  }
  
  /* Industry-leading文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 14px"][style*="margin-top: 5px"] {
    font-size: 12px !important;
    text-align: center !important;
  }
  
  /* PUE描述文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 18px"][style*="margin-top"] {
    font-size: 15px !important;
    margin-top: 15px !important;
  }
  
  /* 卡片容器 - 2行2列布局 */
  .wrapper > section:nth-child(3) .row > .col-xs-6 {
    width: 50% !important;
    padding: 0 6px !important;
    margin-bottom: 12px !important;
  }
  
  .wrapper > section:nth-child(3) .row > .col-xs-6:nth-child(n+3) {
    margin-bottom: 0 !important;
  }
  
  /* 单个数据卡片 - 紧凑样式 */
  .wrapper > section:nth-child(3) .col-xs-6 > div > div[style*="background: rgba(255,255,255,0.15)"] {
    padding: 15px 10px !important;
    border-radius: 10px !important;
    text-align: center !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 卡片图标 */
  .wrapper > section:nth-child(3) div[style*="background: rgba(255,255,255,0.15)"] i {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  
  /* 卡片中的数字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 36px"],
  .wrapper > section:nth-child(3) div[style*="font-size: 32px"] {
    font-size: 18px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  
  /* 卡片中的标签文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 13px"],
  .wrapper > section:nth-child(3) div[style*="font-size: 12px"] {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* ============================================
   Timeline CTA Section - 时间轴区块
   ============================================ */

@media screen and (max-width: 1024px) {
  
  .wrapper > section:nth-child(4) {
    padding: 60px 0 !important;
  }
  
  .wrapper > section:nth-child(4) .lrn-titles {
    margin-bottom: 40px !important;
  }
  
  .wrapper > section:nth-child(4) .lrn-subtitle {
    font-size: 12px !important;
  }
  
  .wrapper > section:nth-child(4) .lrn-title,
  .wrapper > section:nth-child(4) h3 {
    font-size: 28px !important;
  }
  
  /* 时间轴卡片 - 移动端2列布局 */
  .wrapper > section:nth-child(4) .col-xs-12.col-sm-6 {
    width: 50% !important;
    float: left !important;
    padding: 0 10px !important;
    margin-bottom: 25px !important;
  }
  
  /* 图标圆形背景 - 确保图标居中对齐 */
  .wrapper > section:nth-child(4) div[style*="width: 80px"][style*="height: 80px"] {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 图标大小 */
  .wrapper > section:nth-child(4) div[style*="width: 80px"] i {
    font-size: 32px !important;
    line-height: 1 !important;
  }
  
  /* 标题 */
  .wrapper > section:nth-child(4) h5 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }
  
  /* 描述文字 */
  .wrapper > section:nth-child(4) p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  /* 描述文字 */
  .wrapper > section:nth-child(4) div[style*="font-size: 14px"][style*="line-height"],
  .wrapper > section:nth-child(4) div[style*="font-size: 13px"][style*="line-height"] {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   手机端专属 (< 768px)
   ============================================ */

@media screen and (max-width: 767px) {
  
  /* Hero 主标题进一步缩小 */
  .wrapper > section:first-child h1 {
    font-size: 26px !important;
  }
  
  /* Hero 描述文字 */
  .wrapper > section:first-child p {
    font-size: 15px !important;
  }
  
  /* 数据面板保持2列,但缩小字体 */
  .wrapper > section:first-child div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important; /* 保持2列 */
    gap: 15px 10px !important; /* 减小列间距 */
  }
  
  /* 数据面板文字缩小 */
  .wrapper > section:first-child div[style*="font-size: 42px"] {
    font-size: 22px !important; /* 从28px缩小到22px */
  }
  
  .wrapper > section:first-child div[style*="rgba(255,255,255,0.7)"] {
    font-size: 11px !important;
  }
  
  /* 数据面板单元格内边距 */
  .wrapper > section:first-child div[style*="text-align: center"] {
    padding: 10px 5px !important;
  }
  
  /* 三大支柱标题 */
  .wrapper > section:nth-child(2) h3 {
    font-size: 24px !important;
  }
  
  .wrapper > section:nth-child(2) h4 {
    font-size: 20px !important;
  }
  
  /* Elite圆圈 - 手机端进一步缩小 */
  .wrapper > section:nth-child(3) div[style*="width: 300px"][style*="height: 300px"] {
    width: 200px !important;
    height: 200px !important;
    border-width: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Elite文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 72px"] {
    font-size: 42px !important;
    text-align: center !important;
  }
  
  .wrapper > section:nth-child(3) div[style*="font-size: 18px"][style*="margin-top: 10px"] {
    font-size: 14px !important;
    text-align: center !important;
  }
  
  .wrapper > section:nth-child(3) div[style*="font-size: 14px"][style*="margin-top: 5px"] {
    font-size: 11px !important;
    text-align: center !important;
  }
  
  /* 卡片数字和文字 */
  .wrapper > section:nth-child(3) div[style*="font-size: 36px"],
  .wrapper > section:nth-child(3) div[style*="font-size: 32px"] {
    font-size: 18px !important;
  }
  
  .wrapper > section:nth-child(3) div[style*="background: rgba(255,255,255,0.15)"] i {
    font-size: 24px !important;
  }
  
  /* 时间轴卡片内边距 */
  .wrapper > section:nth-child(4) div[style*="padding: 30px"],
  .wrapper > section:nth-child(4) div[style*="padding: 25px"] {
    padding: 20px !important;
  }
}