/* ==========================================================================
   p-rnd.css — 研发实力页专属（几何数值取自 05_研发实力.psd，1rem=100px）
   内容区 702-1798（高 10.96rem）；设备图 x239-1682 y1029-1691（1443x662）
   四格：常态「暗罩 + 图标 + 标题」，hover 转蓝、变宽、浮出说明（四格同效）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 外壳校正（与 download / join 一致的「关于我们」系列标准）
      banner：PSD 已把压暗层合进图里，去掉 CSS 叠加遮罩；标题 80px，红块压在字后
   -------------------------------------------------------------------------- */
/* banner 压暗交给 sub.css 的统一遮罩（30.2% 纯黑），素材本身不含压暗与文字 *//* banner 标题块（80px + 红斜块压在字后）统一由 sub.css 定义，本页不再覆写 */

/* banner 与二级导航之间 40px 留白（PSD 二级 641-702） */

.rnd {
  position: relative;
  height: 10.98rem;
  background: #fff;
  overflow: hidden;
}
.rnd .container {
  position: relative;
  height: 100%;
}

/* 区块标题：y821 */
.rnd__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.18rem;
  text-align: center;
  font-size: 0.48rem;
  letter-spacing: 0.01rem;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}

/* 简介：y916，两行居中 */
.rnd__lead {
  position: absolute;
  left: 50%;
  top: 2.06rem;
  transform: translateX(-50%);
  width: 11.2rem;
  text-align: center;
  font-size: 0.18rem;
  line-height: 0.35rem;
  color: #737373;
}

/* --------------------------------------------------------------------------
   1. 设备图带：x239 y1029 1443x662 —— 四格按设计稿宽度用 flex-grow 分配，
      hover 时被指的那格 grow 变大（其余等比收缩），从而「变宽」
   -------------------------------------------------------------------------- */
.rnd__strip {
  position: absolute;
  left: 0.82rem;
  top: 3.29rem;
  width: 14.4rem;
  height: 6.6rem;
  overflow: hidden;
}
.rnd__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.rnd__cells {
  position: absolute;
  inset: 0;
  display: flex;
}

/* 列：常态暗罩 + 图标 + 标题；hover 蓝色底 + 变宽 + 说明浮出 */
.rnd__cell {
  position: relative;
  flex: 0 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
  overflow: hidden;
  background: rgba(18, 18, 18, 0.62);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: flex-grow 0.55s cubic-bezier(0.25, 0.8, 0.3, 1),
              padding-top 0.55s cubic-bezier(0.25, 0.8, 0.3, 1),
              background-color 0.4s ease;
}
/* 分栏白线（3px），跟随格子宽度移动 */
.rnd__cell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.03rem;
  background: rgba(255, 255, 255, 0.24);
  transition: background-color 0.4s ease;
}
.rnd__cell:last-child::after { display: none; }

/* 设计稿实测列宽 480 / 319 / 318 / 320，hover 各加 90px（grow 值已换算） */
.rnd__cell--1 { flex-grow: 4.8; }
.rnd__cell--2 { flex-grow: 3.19; }
.rnd__cell--3 { flex-grow: 3.18; }
.rnd__cell--4 { flex-grow: 3.2; }

.rnd__cell--1:hover,
.rnd__cell--1:focus,
.rnd__cell--1:focus-within { flex-grow: 6.27; }
.rnd__cell--2:hover,
.rnd__cell--2:focus,
.rnd__cell--2:focus-within { flex-grow: 4.43; }
.rnd__cell--3:hover,
.rnd__cell--3:focus,
.rnd__cell--3:focus-within { flex-grow: 4.42; }
.rnd__cell--4:hover,
.rnd__cell--4:focus,
.rnd__cell--4:focus-within { flex-grow: 4.43; }

.rnd__cell:hover,
.rnd__cell:focus,
.rnd__cell:focus-within {
  padding-top: 1.65rem;
  background: rgba(0, 95, 179, 0.92);
}
.rnd__cell:hover::after,
.rnd__cell:focus::after,
.rnd__cell:focus-within::after { background: rgba(255, 255, 255, 0.18); }

/* 图标：PSD 圆 103px，柔光圆底已烘焙进图，透明底可压在照片/蓝底上 */
.rnd__ico {
  display: block;
  width: 1.03rem;
  height: 1.03rem;
  max-width: none;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.rnd__cell:hover .rnd__ico,
.rnd__cell:focus .rnd__ico,
.rnd__cell:focus-within .rnd__ico { transform: scale(1.06); }

/* 标题：图标底 1306 + 34 → 1340×，与 PSD 的 3.87rem 对齐 */
.rnd__cell h3 {
  display: block;
  margin: 0.34rem 0 0;
  text-align: center;
  font-size: 0.24rem;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  transition: font-size 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.rnd__cell:hover h3,
.rnd__cell:focus h3,
.rnd__cell:focus-within h3 { font-size: 0.3rem; }

/* 说明：常态收起，hover 浮出（标题底 341 + 37 → 378，对齐设计稿 3.76rem） */
.rnd__cell p {
  display: block;
  width: min(88%, 3.5rem);
  margin: 0.43rem 0 0;
  text-align: center;
  font-size: 0.16rem;
  line-height: 0.225rem;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(0.08rem);
  transition: opacity 0.4s ease 0.05s,
              transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1),
              margin-top 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.rnd__cell:hover p,
.rnd__cell:focus p,
.rnd__cell:focus-within p {
  margin-top: 0.37rem;
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .rnd { height: auto; padding-block: 0.6rem 0.8rem; }
  .rnd .container { height: auto; }
  .rnd__title,
  .rnd__lead { position: static; transform: none; }
  .rnd__lead { width: min(11.2rem, 92%); margin: 0.35rem auto 0; }
  .rnd__strip {
    position: relative;
    left: auto;
    top: auto;
    margin: 0.5rem auto 0;
    width: min(14.4rem, 96%);
  }
}

/* 无悬停能力的设备（平板）：说明直接展示，避免内容被藏起来 */
@media (hover: none) and (min-width: 769px) {
  .rnd__cell p { opacity: 1; transform: none; margin-top: 0.37rem; }
}

@media (max-width: 768px) {
  .rnd { padding-block: 0.5rem 0.7rem; }
  .rnd__title { font-size: 0.42rem; }
  .rnd__lead { font-size: 0.2rem; line-height: 1.7; }
  .rnd__strip { width: 94%; height: auto; overflow: visible; }
  .rnd__photo { display: none; }
  .rnd__cells {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
  }
  /* 移动端没有 hover，四格统一按「展开态」直接呈现 */
  .rnd__cell,
  .rnd__cell--1,
  .rnd__cell--2,
  .rnd__cell--3,
  .rnd__cell--4 {
    flex: none;
    padding: 0.5rem 0.36rem 0.54rem;
    background: rgba(0, 95, 179, 0.93);
  }
  .rnd__cell::after { display: none; }
  /* 触屏点按会留下 :focus，这里把桌面端的展开态压回卡片式 */
  .rnd__cell:hover,
  .rnd__cell:focus,
  .rnd__cell:focus-within { padding-top: 0.5rem; }
  .rnd__cell h3,
  .rnd__cell:hover h3,
  .rnd__cell:focus h3 { margin-top: 0.24rem; font-size: 0.34rem; }
  .rnd__cell p,
  .rnd__cell:hover p,
  .rnd__cell:focus p {
    width: 100%;
    margin-top: 0.18rem;
    font-size: 0.26rem;
    line-height: 1.6;
    opacity: 1;
    transform: none;
  }
  .rnd__ico { width: 1rem; height: 1rem; }
}