/* =========================================
   关于页 PC：Values 内部间距随分辨率缩放
   只改 .about-values，不改其它区块 / H5
   1920：gap 186 / 卡片左右 48
   1440：gap 64 / 卡片左右 32（与现有笔记本稿一致）
   ========================================= */

@media (min-width: 769px) {
  .about-values {
    gap: clamp(64px, calc(64px + (100vw - 1440px) * 122 / 480), 186px);
  }

  .about-values__card {
    padding: 24px clamp(32px, calc(32px + (100vw - 1440px) * 16 / 480), 48px);
    gap: clamp(20px, calc(20px + (100vw - 1440px) * 12 / 480), 32px);
  }

  /* 两行使命文案不换行，并按最长一行水平居中 */
  .about-mission__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: none;
    text-align: center;
    white-space: nowrap;
  }

  .about-mission__text span {
    white-space: nowrap;
  }

  .about-mission__text br {
    display: none;
  }
}

/* =========================================
   关于页 H5（max-width: 768px）
   设计稿 About_mobile 390×2770
   仅影响移动端，不改 PC 样式
   ========================================= */

@media (max-width: 768px) {
  /* ----------------------------------------
     Banner
     ---------------------------------------- */
  .about-banner {
    height: 5rem;
    min-height: 0;
  }

  .about-banner__bg {
    background: none;
    box-shadow: none;
    filter: none;
  }

  .about-banner__title {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.5rem;
    gap: 0.16rem;
  }

  .about-banner__eyebrow {
    font-size: 0.13rem;
    line-height: 0.18rem;
    opacity: 1;
  }

  .about-banner__heading {
    font-size: 0.52rem;
    line-height: 0.6rem;
    font-weight: 700;
  }

  /* ----------------------------------------
     Who / Vision
     ---------------------------------------- */
  .about-who {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
    min-height: 0;
    padding: 0.48rem 0.2rem;
  }

  .about-who__main {
    width: 100%;
    gap: 0.32rem;
  }

  .about-who__eyebrow {
    font-size: 0.16rem;
  }

  .about-who__headline {
    font-size: 0.28rem;
    line-height: 0.36rem;
  }

  .about-who__side {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    gap: 0.48rem;
  }

  .about-who__desc,
  .about-who__vision-text {
    font-size: 0.16rem;
    line-height: 0.26rem;
    color: #7f7f7f;
  }

  .about-who__vision {
    gap: 0.24rem;
  }

  .about-who__vision-label {
    font-size: 0.16rem;
  }

  /* ----------------------------------------
     Mission
     ---------------------------------------- */
  .about-mission {
    height: 3.2rem;
  }

  .about-mission__bg {
    background: none;
    box-shadow: none;
    filter: none;
  }

  .about-mission__overlay {
    display: none;
    background: none;
  }

  .about-mission__content {
    left: 50%;
    top: 50%;
    width: 3.5rem;
    max-width: calc(100% - 0.4rem);
    gap: 0.32rem;
    transform: translate(-50%, -50%);
  }

  .about-mission__eyebrow {
    font-size: 0.16rem;
  }

  .about-mission__text {
    font-size: 0.24rem;
    line-height: 0.3rem;
    font-weight: 500;
  }

  /* ----------------------------------------
     Values
     ---------------------------------------- */
  .about-values {
    flex-direction: column;
    align-items: stretch;
    gap: 0.48rem;
    min-height: 0;
    padding: 0.64rem 0.2rem 0.48rem;
  }

  .about-values__eyebrow {
    font-size: 0.16rem;
    white-space: normal;
  }

  .about-values__cards {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
  }

  .about-values__card {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-height: 1.86rem;
    padding: 0.24rem 0.2rem;
    border-radius: 0;
    cursor: pointer;
  }

  /* 设计稿：未展开项底部横线；展开项与最后一项无底边 */
  .about-values__card:not(.about-values__card--active) {
    border-bottom: 1px solid var(--color-border);
  }

  .about-values__card:not(.about-values__card--active):last-child {
    border-bottom: none;
  }

  .about-values__card--active {
    border-bottom: none;
  }

  /* H5：禁用 PC hover；点击后 :hover 会粘住，active 必须压过 hover */
  .about-values__card:hover {
    background: transparent;
  }

  .about-values__card:hover .about-values__title,
  .about-values__card:hover .about-values__desc {
    color: inherit;
  }

  .about-values__card:hover .about-values__num {
    color: var(--color-grey-third);
  }

  .about-values__card:hover .about-values__icon-img--default {
    display: block;
  }

  .about-values__card:hover .about-values__icon-img--hover {
    display: none;
  }

  .about-values__icon {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.48rem;
    height: 0.48rem;
  }

  .about-values__body {
    width: 100%;
    max-width: 2.96rem;
    gap: 0.32rem;
    padding-right: 0.56rem;
  }

  .about-values__num {
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: var(--color-grey-third);
  }

  .about-values__text {
    gap: 0.12rem;
  }

  .about-values__title {
    font-size: 0.24rem;
    line-height: 0.32rem;
  }

  .about-values__desc {
    font-size: 0.16rem;
    line-height: 0.22rem;
    color: var(--color-black);
  }

  .about-values__card--active,
  .about-values__card--active:hover {
    background: var(--color-black);
  }

  .about-values__card--active .about-values__title,
  .about-values__card--active .about-values__desc,
  .about-values__card--active:hover .about-values__title,
  .about-values__card--active:hover .about-values__desc {
    color: var(--color-white);
  }

  .about-values__card--active .about-values__num,
  .about-values__card--active:hover .about-values__num {
    color: var(--color-grey-third);
  }

  .about-values__card--active .about-values__icon-img--default,
  .about-values__card--active:hover .about-values__icon-img--default {
    display: none;
  }

  .about-values__card--active .about-values__icon-img--hover,
  .about-values__card--active:hover .about-values__icon-img--hover {
    display: block;
  }
}