/* ============================================================
   About-R&D — R&D Capabilities（tab 切换模式）
   Figma: #596:34387 (1920×1440) + tab 容器 #596:34390 @(208,388) 1712×944
   4 tab（360×48：编号+标题+顶部线 4px 绿）；内容面板 1712×775 @(0,169)：
   背景大图 + 文字卡 660×416 @(60,308)（蓝块 660×360 + 照片 601×416 + 白箭头 32×32 + 标题 40/56）
   4 面板背景图：1=bfafb715(675ae7) 2=c781af63(AAA) 3=a0608487(BBB) 4=5368b471(71bad4)
   全部坐标按 1920 基准换算 vw/百分比，min(vw,px) 封顶
   ============================================================ */

.ard-cap {
  background: var(--color-white);
  padding: 120px 0 140px;
}

.ard-cap__title {
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 24px;
  padding: 0;
  margin-left: 10.83%;   /* 208/1920 */
}

.ard-cap__desc {
  max-width: 84.375%;    /* 1620/1920 */
  font-size: min(1.875rem, 1.667vw);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin: 0 0 64px;
  margin-left: 10.83%;   /* 208/1920 */
}

/* ---------- tab 行（4×360 + gap 30 = 1530 宽） ---------- */

.ard-cap__tabs {
  display: flex;
  gap: 32px;
  margin-left: 10.83%;   /* 208/1920 */
  width: 79.6875%;       /* 1530/1920 */
}

.ard-cap__tab {
  position: relative;
  flex: 1;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--color-text-muted);
  font: inherit;
  color: var(--color-text-muted);
  text-align: left;
  transition: border-color var(--duration-base, 0.3s) var(--ease-base, ease);
}

.ard-cap__tab::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--duration-base, 0.3s) var(--ease-base, ease);
}

.ard-cap__tab.is-active {
  border-top-color: var(--color-secondary);
  border-top-width: 4px;
}

.ard-cap__tab.is-active::after {
  display: none;
}

.ard-cap__tab-num {
  font-size: clamp(1.25rem, 0.48vw + 1.14rem, 2rem);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(153, 153, 153, 0.5);
  min-width: 42px;
}

.ard-cap__tab.is-active .ard-cap__tab-num {
  color: rgba(168, 206, 80, 0.5);
}

.ard-cap__tab-label {
  font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-text-muted);
}

.ard-cap__tab.is-active .ard-cap__tab-label {
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- 内容面板 1712×775 @ (208, 388+169) ---------- */

.ard-cap__panels {
  position: relative;
  margin-left: 10.83%;   /* 208/1920 */
  width: 89.17%;         /* 1712/1920 */
  aspect-ratio: 1712 / 775;   /* 面板高度（此前缺失导致图不可见） */
  margin-top: 120px;
}

.ard-cap__panel {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow, 0.5s) var(--ease-standard, ease) 0s, visibility 0s linear var(--duration-slow, 0.5s);
  background: var(--color-placeholder);
}

.ard-cap__panel.is-active {
  position: absolute;   /* 保持 absolute（inset 0 相对 panels，否则高度塌陷为 0） */
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-slow, 0.5s) var(--ease-standard, ease) 0s;
}

/* 蓝色卡片出现：fade in + 从左侧滑入（只动画 transform/opacity） */
.ard-cap__panel.is-active .ard-cap__card {
  animation: ard-cap-card-in var(--duration-slow, 0.5s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) 0s forwards;
}

@keyframes ard-cap-card-in {
  from { opacity: 0; transform: translateX(calc(var(--translate-xl, 2rem) * -2.5)); }
  to   { opacity: 1; transform: translateX(0); }
}

.ard-cap__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字卡：660×416 @ (60,308) */
.ard-cap__card {
  position: absolute;
  left: 3.5%;
  top: 39.7%;
  width: 660px;
  height: 416px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 86px 46px 0;   /* 顶部留白 86px（蓝块 top 56 + 内边距 30）, 左右 46px */
  box-sizing: border-box;
}

/* 蓝色卡背景 */
.ard-cap__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 56px;
  width: 660px;
  height: 360px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* 六边形箭头 → 设计稿白色箭头 32×32 @ (552,337) 相对卡片 */
.ard-cap__card-arrow {
  position: absolute;
  left: 83.64%;          /* 552/660 */
  top: 81.01%;           /* 337/416 */
  width: 4.85%;          /* 32/660 */
  aspect-ratio: 32 / 32;
  object-fit: fill;      /* 24×20 SVG 拉伸填满 32×32 容器 */
  display: block;
  z-index: 1;
}

.ard-cap__card-title {
  font-size: min(2rem, 1.667vw);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
}

.ard-cap__card-line {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: min(24px, 1.25vw) 0 0;
  flex-shrink: 0;
}

.ard-cap__card-desc {
  font-size: min(1.25rem, 1.042vw);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
  margin: min(24px, 1.25vw) 0 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1440px) {
  .ard-cap {
    padding: 100px 0 120px;
  }
  .ard-cap__title,
  .ard-cap__desc,
  .ard-cap__tabs,
  .ard-cap__panels {
    margin-left: var(--container-padding);
  }
  .ard-cap__desc {
    max-width: 100%;          /* 覆盖 PC 84.375%，避免灰色描述被限制在窄宽内 */
  }
  .ard-cap__tab-label {
    font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  }
}

@media (max-width: 1024px) {
  .ard-cap__tabs {
    flex-wrap: wrap;
    gap: 12px;
    width: calc(100% - 2 * var(--container-padding));
  }
  .ard-cap__tab {
    flex: 1 1 45%;
  }
  .ard-cap__panels {
    aspect-ratio: auto;
    height: 620px;
  }
  .ard-cap__card {
    width: 90%;
    left: 5%;
  }
  .ard-cap__card::before,
  .ard-cap__card-photo {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .ard-cap {
    padding: 64px 0 80px;
  }
  .ard-cap__title,
  .ard-cap__desc,
  .ard-cap__tabs,
  .ard-cap__panels {
    margin-left: var(--container-padding);
  }
  .ard-cap__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    text-align: center;
  }
  .ard-cap__desc {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);
    text-align: center;              /* 移动端灰色描述左右居中 */
  }
  .ard-cap__tab {
    flex: 1 1 100%;
    height: 44px;
  }
  .ard-cap__tab-num {
    font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
    min-width: 32px;
  }
  .ard-cap__tab-label {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);
  }
  .ard-cap__panels {
    margin-top: 0;
    height: auto;
  }
  /* 移动端手风琴：每个 panel 跟随对应 tab（JS 重排 DOM），互斥展开（仅 .is-active 显示） */
  .ard-cap__panel {
    position: relative;    /* 覆盖 absolute，作为内部 card 定位基准 */
    inset: auto;
    display: none;         /* 默认收起 */
    flex: 0 0 100%;        /* tabs 为 flex 容器，panel 占满整行（与标题同宽） */
    width: 100%;
    height: 360px;
    margin: 8px 0 24px;    /* 紧贴标题下方 */
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .ard-cap__panel.is-active {
    position: relative;  /* 覆盖 PC 的 absolute（特异性更高，必须同级别覆盖），恢复文档流占位 */
    display: block;
  }
  /* 展开动效：淡入 + 上滑（keyframes 复用 animations.css 词汇，duration/easing 用 token） */
  .ard-cap__panel.is-entering {
    animation: slide-up var(--duration-base, 0.3s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) forwards;
  }
  /* 收起动效：淡出（JS 在动画结束后移除 is-collapsing，面板随之 display:none 收起） */
  .ard-cap__panel.is-collapsing {
    display: block;      /* 动画期间仍占位，避免下方内容跳动 */
    animation: fade-out var(--duration-base, 0.3s) var(--ease-standard, ease) forwards;
  }
  .ard-cap__card {
    height: 220px;
    top: auto;
    bottom: 24px;
    padding: 54px 32px 0;   /* 蓝块 top 34 + 内边距 20 */
  }
  .ard-cap__card::before {
    top: 34px;
    height: 186px;
  }
  .ard-cap__card-title {
    font-size: clamp(0.9375rem, 0.28vw + 0.87rem, 1.375rem);
    line-height: 1.4;
  }
  .ard-cap__card-desc {
    font-size: clamp(0.875rem, 0.04vw + 0.87rem, 0.9375rem);
    line-height: 1.6;
  }
  .ard-cap__card-arrow {
    width: 32px;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (max-width: 576px) {
  .ard-cap__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ard-cap__panel,
  .ard-cap__card {
    transition: none !important;
    animation: none !important;
  }
}