/* 洞察板块组件 _insight-box 专用样式（concept 页及其它使用该组件的页面引入本文件） */

/* 洞察未来走向 */
.insight-section {
  /* padding: 28px 0; */
  /* background: #f0f0f0; */
}

.insight-section p {
  font-size: var(--insight-title-fs-p);
  color: #1a1a1a;
  padding-top: 40px;
  padding-bottom: 40px;
}

.insight-box {
  display: flex;
  height: 480px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.insight-left {
  flex: 0 0 50%;
  background: #000;
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

.insight-left p {
  font-size: var(--insight-title-fs-p);
  color: #fff;
}

.insight-text {
  position: absolute;
  left: 40px;
  width: calc(50% - 80px);
  bottom: 40px;
  max-height: none;
  overflow: visible;
}

.insight-text p {
  font-size: var(--insight-text-fs-p);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.insight-toggle {
  display: none;
}

.insight-right {
  flex: 1;
}

.insight-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* PC / 移动端图切换：默认显示 PC 图 */
.insight-img-mobile {
  display: none;
}



/* 洞察板块B（.learn-insight-2）：图片完整显示，不裁切 */
/* .learn-insight-2 .insight-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
} */

/* 手机端 */
@media (max-width: 860px) {
  .insight-section {
    padding: 0;
  }

  .insight-section h2 {
    font-size: var(--insight-title-fs-m);
    padding-bottom: 20px;
  }

  .insight-section p {
    font-size: var(--insight-title-fs-m);
    padding: 20px 0;
  }

  .insight-box {
    flex-direction: column;
    height: auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
  }

  .insight-left {
    order: 1;
    flex: none;
    padding: 0;
    background: #000;
  }

  .insight-left p {
    font-size: var(--insight-title-fs-m);
    padding: 16px 20px;
    margin-bottom: 0;
  }

  .insight-right {
    order: 2;
    flex: none;
    height: 480px;
  }

  /* 移动端显示移动端图，隐藏 PC 图 */
  .insight-img-pc {
    display: none;
  }

  .insight-img-mobile {
    display: block;
  }

  .insight-text {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0;
    max-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.8s ease;
    order: 3;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
  }

  .insight-text p {
    padding: 20px 20px 40px;

    font-size: var(--insight-text-fs-m);
  }

  .insight-box.open .insight-text {
    max-height: 480px !important;
  }

  .insight-toggle {
    order: 4;
    display: flex;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #d1c5b0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    /* 未展开时：按钮整体周期性跳动引导点击（keyframes 保留居中位移） */
    animation: insight-bounce 2s ease-in-out infinite;
  }

  .insight-toggle svg {
    /* 旋转过渡独立在 svg 上，点击展开/收起时平滑旋转，不受跳动动画干扰 */
    transition: transform 0.5s;
  }

  .insight-box.open .insight-toggle {
    animation: none;
  }

  .insight-box.open .insight-toggle svg {
    transform: rotate(180deg);
  }

  @keyframes insight-bounce {

    0%,
    65%,
    100% {
      transform: translateX(-50%) translateY(0);
    }

    80% {
      transform: translateX(-50%) translateY(-6px);
    }

    88% {
      transform: translateX(-50%) translateY(2px);
    }

    94% {
      transform: translateX(-50%) translateY(-1.5px);
    }
  }
}