/* 顶部介绍区域 */
/* 顶部介绍区域 */
.topic-header {
  background: url('/static/images/projectTopic/head-bj.png') no-repeat center center;
  background-size: cover;
  padding: 1px 0 40px;

  .topic-header-content {
    display: flex;
    margin-top: 20px;
  }

  .topic-header-inner {
    margin-right: 50px;
     .title-sub {
        width: 412px;
        display: block;
        margin-bottom: 20px;
        font-family: AppleSystemUIFont;
        font-size: 32px;
        color: #07091A;
        line-height: 42px;
      }
  }

  .topic-header-book {
    img {
      width: 100%;
      border-radius: 6px;
    }
  }

  .topic-status {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    width: fit-content;

    .status-badge {
      display: inline-block;
      padding: 6px 30px;
      border-radius: 16px;
      font-size: 14px;
      color: #ffffff;

      &.ongoing {
        background: linear-gradient( 270deg, #0151FE 0%, #013AFF 33.78%, #0049FF 63.64%, #0182FF 100%);
      }

      &.ended {
        background: linear-gradient( 270deg, #0151FE 0%, #013AFF 33.78%, #0049FF 63.64%, #0182FF 100%);
      }
    }

    .status-desc {
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 16px 0 28px;
      margin-left: -16px;
      font-size: 14px;
      color: #3D3F4D;
      background: radial-gradient(circle 16px at 0 50%, #0049FF 16px, #ffffff 16px);
      border-radius: 0 16px 16px 0;
    }
  }

  .topic-title {
      font-size: 56px;
      background-clip: text;
      margin: 0 0 20px;
      line-height: 1.3;
      display: inline-block;                              /* 让 span 支持背景裁剪 */
      background: linear-gradient(270deg, #C150E5 0%, #2C36FE 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;               /* 强制文字透明 */
      color: transparent;
      margin-bottom: 25px;
  }

  .topic-subtitle {
    font-size: 16px;
    color: #3D3F4D;
    line-height: 24px;
    width: 512px;
  }
}
/* 通用区块 */
.section-block {
  padding: 60px 0px;

  .section-title {
    text-align: center;
    font-size: 40px;
    color: #333333;
    margin-bottom: 35px;
  }
}
/* 关键数据指标 */
.metrics-block{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.data-metrics {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 715px;

  .metric-item {
    flex: 1;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;

    img {
      width: 100%;
      height: auto;
    }
  }
}

/* 项目详情主体区域（参考 topic3 排版） */
.detail-section {
  background: url('/static/images/projectTopic/project-bj.png') no-repeat center center;
  background-size: cover;
  padding: 40px 50px;
  margin-bottom: 0px;

  .section-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }

  .detail-left {
    flex: 1;
  }

  .detail-right {
    flex: 0 0 640px;

    img {
      width: 100%;
      border-radius: 6px;
    }
  }
}

/* 项目详情 */
.detail-item {
  margin-bottom: 40px;

  &:last-child {
    margin-bottom: 0;
  }

  .detail-subtitle-div {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .detail-subtitle {
    font-size: 28px;
    padding: 12px;
    align-items: center;
    display: inline-block;                              /* 让 span 支持背景裁剪 */
    background: linear-gradient(270deg, #C150E5 0%, #2C36FE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;               /* 强制文字透明 */
    color: transparent;

    .subtitle-dot {
      width: 14px;
      height: 14px;
      margin-right: 6px;
      flex-shrink: 0;
    }
  }

  .detail-text {
    p {
      font-size: 16px;
      color: #3D3F4D;
      line-height: 30px;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 主办单位、学术支持、数字合作平台 */
.organizer-section {
  background: url('/static/images/projectTopic/organizer-bj.png') no-repeat center center;
  background-size: cover;
  padding: 60px 0;

  .organizer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
  }

  .organizer-divider {
    width: 1px;
    height: 192px;
    background: #D2CEE0;
  }

  .organizer-item {
    text-align: center;

    .organizer-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 15px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
   
    .organizer-label {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #07091A;
      line-height: 18px;
      margin-bottom: 15px;
    }

    .organizer-name {
      font-weight: 600;
      font-size: 16px;
      color: #2B2B2B;
      line-height: 24px;
      margin: 0;
    }
  }
}

/* 联系方式 */
.contact-section {
  background: url('/static/images/projectTopic/contact-bj.png') no-repeat center center;
  background-size: cover;
  padding: 60px 0;

  .section-title {
    text-align: center;
    font-size: 40px;
    color: #07091A;
    line-height: 40px;
    margin-bottom: 35px;
  }

  .contact-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
  }

  .contact-left {
    display: flex;
    align-items: center;

    .contact-avatar {
      width: 180px;
      height: 180px;
      margin-right: 25px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
      }
    }

    .contact-info {
      h4 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #07091A;
        line-height: 18px;
        margin-bottom: 25px;
      }

      p {
        font-family: AppleSystemUIFont;
        font-size: 16px;
        color: #2B2B2B;
        line-height: 16px;
      }
    }
  }

  .contact-right {
    img {
      width: 180px;
      height: 180px;
      object-fit: contain;
    }
  }
}