/* ============================================
   Xinchuang Page Styles
   信创安全底座页面样式
   ============================================ */

/* ========== Section 1: Challenges 信创需求的复杂度与挑战 ========== */
.xinchuang-challenges .challenges-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.xinchuang-challenges .challenges-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.xinchuang-challenges .content-card {
  grid-column: span 2;
  /* background: #FFFFFF; */
  border-radius: 16px;
  padding: 32px 24px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); */
  transition: all 0.3s ease;
  text-align: left;
  background: linear-gradient(0deg, #EEF2FA, #EEF2FA), linear-gradient(0deg, #FFFFFF, #FFFFFF), #223140;
}

/* 第4个卡片：占据第2-3列 (nth-child(5) 因为 template 是 nth-child(1)) */
.xinchuang-challenges .content-card:nth-child(5) {
  grid-column: 1 / 4;
  
}

/* 第5个卡片：占据第4-5列 */
.xinchuang-challenges .content-card:nth-child(6) {
  grid-column: 4 / 7;
}


.xinchuang-challenges .card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.xinchuang-challenges .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xinchuang-challenges .card-title {
  font-size: 24px;
  font-weight: 600;
  color: #101c2f;
  margin-bottom: 12px;
  line-height: normal;
}

.xinchuang-challenges .card-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
}

/* ========== Section 2: Solutions 信创方案介绍 ========== */
.xinchuang-solutions .solutions-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.xinchuang-solutions .solutions-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.xinchuang-solutions .tab-item,.xinchuang-certifications .cert-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  color: #101C2F;
  white-space: nowrap;
  border-radius: 100px;
  border: 1px solid #D0D8E4;
}

.xinchuang-solutions .tab-item:hover, .xinchuang-certifications .cert-tab-item:hover {
  background: rgba(16, 28, 47, 0.06);
  border: 1px solid rgba(0, 0, 0, 0);
}

.xinchuang-solutions .tab-item.active, .xinchuang-certifications .cert-tab-item.active {
  background: linear-gradient(0deg, #101C2F, #101C2F), linear-gradient(117deg, #2DD4BF -71%, #002E93 41%, #F43F5E 150%), linear-gradient(117deg, #2DD4BF -71%, #124BC7 41%, #F43F5E 150%), #101C2F;
  background-blend-mode: soft-light, normal, normal, normal;
  border-color: transparent;
  color: #FFFFFF;
  /* border: 1px solid #FFFFFF; */
}

.xinchuang-solutions .solutions-content {
  min-height: 500px;
}

.xinchuang-solutions .tab-panel {
  display: none;
}

.xinchuang-solutions .tab-panel.active {
  display: block;
}

/* 田字格布局 */
.xinchuang-solutions .grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

.xinchuang-solutions [data-panel="0"] .grid-cell-img:nth-of-type(4) {
  margin-top: -174px;
}

.xinchuang-solutions [data-panel="1"] .grid-cell-img:nth-of-type(4) {
  margin-top: -176px;
}

#en .xinchuang-solutions [data-panel="0"] .grid-cell-img:nth-of-type(4) {
  margin-top: -178px;
}

#en .xinchuang-solutions [data-panel="1"] .grid-cell-img:nth-of-type(4) {
  margin-top: -178px;
  min-height: 428px;
}
.xinchuang-solutions .grid-cell {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #EEF2FA;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 带图片的格子 */
.xinchuang-solutions .grid-cell-img {
  min-height: 400px;
  overflow: hidden;
}

.xinchuang-solutions .grid-cell-img .cell-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}

.xinchuang-solutions .grid-cell-img:hover .cell-bg-img {
  transform: scale(1.03);
}

.xinchuang-solutions .grid-cell-img .cell-overlay-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 24px;
  background: rgba(238, 242, 250, 0.8);
  backdrop-filter: blur(40px);
  border-radius: 24px;
  margin: 16px;
}

/* 特性卡片格子 */
.xinchuang-solutions .grid-cell-feature {
  background: #EEF2FA;
  border: 1px solid rgba(16, 28, 47, 0.06);
  display: flex;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#cases h2.section-title {
  /* margin-top: 60px; */
}

#en #cases h2.section-title{
  /* margin-top: 90px; */
}

.xinchuang-solutions .grid-cell-feature .feature-card {
  padding: 24px;
  width: 100%;
}

/* 通用卡片样式 */
.xinchuang-solutions .card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
}

.xinchuang-solutions .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xinchuang-solutions .card-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(101deg, #2DD4BF -8%, #2563EB 50%, #F43F5E 107%), linear-gradient(90deg, #3A7CF5 0%, #3C8EF3 34%, #A68AE5 64%, #DD5961 100%), #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 32px;
}

.xinchuang-solutions .card-title {
  font-size: 24px;
  font-weight: 600;
  color: #101C2F;
  margin-bottom: 8px;
  line-height: normal;
}

.xinchuang-solutions .card-desc {
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: #101C2F;
  white-space: pre-line;
}

/* 底部按钮 */
.xinchuang-solutions .solutions-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

/* 使用通用按钮样式 */
.xinchuang-solutions .solutions-buttons .btn-icon {
  width: 20px;
  height: 20px;
  /* margin-left: 8px; */
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: url('/public/images/xinchuang/2.0/btn-download.svg') no-repeat center center;
  background-size: cover;
}

/* btn1: hover 时切换图标 */
/* .xinchuang-solutions .solutions-buttons:hover .btn-icon {
  background: url('/public/images/xinchuang/2.0/btn-download-hover.svg') no-repeat center center;

} */
/* .xinchuang-solutions .solutions-buttons:active .btn-icon {
  background: url('/public/images/xinchuang/2.0/btn-download-active.svg') no-repeat center center;

} */

/* btn2: hover 时图标右上移动 */
/* .xinchuang-solutions .solutions-buttons .xc-btn2:hover .btn-icon {
  transform: translate(3px, -3px);
} */

/* ========== Section 3: Certifications 信创生态适配认证 ========== */
.xinchuang-certifications .certifications-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.xinchuang-certifications .cert-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}


.xinchuang-certifications .cert-content {
  min-height: 300px;
}

.xinchuang-certifications .cert-panel {
  display: none;
}

.xinchuang-certifications .cert-panel.active {
  display: block;
}

.xinchuang-certifications .cert-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.xinchuang-certifications .cert-item {
  /* background: #FFFFFF; */
  
  border-radius: 12px;
  padding: 24px;
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); */
  transition: all 0.3s ease;
}

/* .xinchuang-certifications .cert-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
} */

.xinchuang-certifications .cert-item img {
  max-width: 280px;
  /* max-height: 280px; */
  object-fit: contain;
}

/* 底部说明 */
.xinchuang-certifications .cert-footer {
  margin-top: 48px;
  padding: 48px;
  background: rgba(238, 242, 250, 0.8);
  backdrop-filter: blur(100px);
 border-radius: 24px;
  color: #101C2F;
}
.xinchuang-certifications 
.xinchuang-certifications .cert-footer-title {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 8px;
}
.xinchuang-certifications .section-bg-img {
  height: 84%;
}

.xinchuang-certifications .cert-footer-desc {
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  /* color: rgba(255, 255, 255, 0.8); */
}

/* ========== Section 4: Cases 标杆案例 ========== */
.xinchuang-cases .cases-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.xinchuang-cases .cases-tag {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(105deg, #2DD4BF -8%, #2563EB 50%, #F43F5E 107%);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  /* 移到 section-header 上方 */
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
}

/* 调整 cases section 的 header 为相对定位并预留 tag 空间 */
.xinchuang-cases .section-header {
  position: relative;
  padding-top: 48px;
}

/* 案例卡片 */
.xinchuang-cases .cases-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* margin-bottom: 48px; */
}

.xinchuang-cases .case-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: left;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); */
  transition: all 0.3s ease;
  border: 1px solid #D0D8E4;
}

.xinchuang-cases .case-logo {
  height: 42px;
  margin-bottom: 16px;
}

.xinchuang-cases .case-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.xinchuang-cases .case-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
  display: none; /* 截图中只显示logo不显示标题 */
}

.xinchuang-cases .case-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.7;
}

/* Logo墙 */
.xinchuang-cases .cases-logowall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid #F0F0F0;
}

.xinchuang-cases .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 40px; */
  opacity: 0.7;
  transition: all 0.3s ease;
  /* filter: grayscale(100%); */
}

.xinchuang-cases .logo-item:hover {
  opacity: 1;
  /* filter: grayscale(0%); */
}

.xinchuang-cases .logo-item img {
  max-height: 100%;
  /* max-width: 120px; */
  object-fit: contain;
}
.xinchuang-solutions .solutions-buttons .normal-btn.xc-btn1 {
  gap: 16px;
}

/* ========== Section 5: CTA ========== */
/* .xinchuang-cta 使用 footer-lead 默认样式 */

/* ========== 响应式适配 ========== */
@media screen and (max-width: 1024px) {
  .xinchuang-challenges .challenges-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .xinchuang-challenges .challenge-card {
    grid-column: span 1;
  }
  
  .xinchuang-challenges .challenge-card:nth-child(5),
  .xinchuang-challenges .challenge-card:nth-child(6) {
    grid-column: span 1;
  }
  
  .xinchuang-solutions .grid-layout {
    grid-template-columns: 1fr;
  }
  
  .xinchuang-solutions .grid-cell {
    min-height: 240px;
  }
  
  .xinchuang-cases .cases-cards {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .xinchuang-challenges .challenges-cards {
    grid-template-columns: 1fr;
  }
  
  .xinchuang-challenges .challenge-card,
  .xinchuang-challenges .challenge-card:nth-child(5),
  .xinchuang-challenges .challenge-card:nth-child(6) {
    grid-column: span 1;
  }
  
  .xinchuang-solutions .solutions-tabs {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  
  .xinchuang-solutions .tab-item {
    padding: 12px 24px;
  }
  
  .xinchuang-solutions .solutions-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .xinchuang-solutions .btn-primary,
  .xinchuang-solutions .btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .xinchuang-certifications .cert-tabs {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .xinchuang-certifications .cert-grid {
    gap: 16px;
  }
  
  .xinchuang-certifications .cert-item {
    padding: 16px;
  }
  
  .xinchuang-certifications .cert-item img {
    max-width: 150px;
    max-height: 200px;
  }
  
  .xinchuang-cases .cases-logowall {
    gap: 24px;
  }
  
  .xinchuang-cases .logo-item {
    height: 32px;
  }
}