/* ============================================================
   rnd-reflow.css — 研发页「配方与创新能力」板块重构
   A. 左图右文 50/50 通栏（.rnd-5050）
   B. 白色数字条通栏（.rnd-band--stats，4 格合并边框条 + 计数跳动）
   C. 核心技术灰色通栏（.rnd-band--tech，居中标题 + 3 张加大白卡、悬停浮动）
   scoped：仅 rnd-draft.html 引用，不污染全站 style.css
   复用 hero-reflow.css 的 .rf-kb（Ken Burns，进视区微放大）
   v=20260905-2
============================================================ */

/* 收紧 section 原生上下 padding，保证通栏齐边 */
#rnd{padding-block:0}
#rnd .page-foot{margin-top:var(--s-10);padding-bottom:var(--s-10)}

/* ---------- A. 左图右文 50/50 ---------- */
.rnd-5050{display:grid;grid-template-columns:1fr;background:#fff;overflow:hidden}
.rnd-5050__media{position:relative;overflow:hidden;min-height:380px}
/* 缩放层：悬停整层放大（Ken Burns 在内层 .rf-kb 独立动画，互不冲突） */
.rnd-5050__zoom{position:absolute;inset:0;transform:scale(1);transition:transform .7s ease;will-change:transform}
.rnd-5050__media:hover .rnd-5050__zoom{transform:scale(1.05)}
/* 图内侧暗渐变（靠文字一侧 = 右侧） */
.rnd-5050__shade{
  position:absolute;top:0;bottom:0;right:0;width:80px;z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.10),transparent);
}
.rnd-5050__text{display:flex;flex-direction:column;justify-content:center;padding:56px 32px}
@media(min-width:1024px){
  .rnd-5050{grid-template-columns:1fr 1fr;min-height:760px}
  .rnd-5050__media{min-height:0}
  .rnd-5050__shade{width:112px}
  .rnd-5050__text{padding:96px 72px}
}

/* ---------- B. 白色数字条通栏（4 格合并边框条） ---------- */
.rnd-band--stats{background:#fff;overflow:hidden}
.rnd-band--stats .rnd-band__inner{
  max-width:1472px;margin:0 auto;padding:72px 32px;display:block;
}
.rnd-stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;
  border:1px solid #eee4ec;border-radius:14px;
  overflow:hidden;
}
.stat-cell{position:relative;padding:46px 20px;text-align:center}
/* 格间竖分隔线（首格无） */
.stat-cell + .stat-cell::before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;
  width:1px;background:#eee4ec;
}
.stat-cell__num{
  font-family:'Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em;
  color:#DA1884;font-variant-numeric:tabular-nums;
}
.stat-cell__num .suf{font-size:.55em;font-weight:600;margin-left:2px}
.stat-cell__label{margin-top:12px;font-size:.92rem;color:#6b6470}

/* ---------- C. 核心技术灰色通栏（居中标题 + 3 张加大白卡） ---------- */
.rnd-band--tech{background:#F8F8F8;overflow:hidden}
.rnd-band--tech .rnd-band__inner{
  max-width:1472px;margin:0 auto;padding:80px 32px 88px;display:block;
}
.rnd-band__title{
  text-align:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;line-height:1.2;
  color:#1a1a1a;margin:0;
}
/* 品牌色短下划线 */
.rnd-band__title::after{
  content:"";display:block;width:44px;height:4px;border-radius:2px;
  background:#DA1884;margin:16px auto 0;
}
.rnd-tech-cards{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rnd-tech-card{
  background:#fff;
  border:1px solid #efe6ee;border-radius:14px;
  padding:42px 36px;
  transform:translateY(0);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
/* 悬停浮动：上浮 + 柔和投影 + 边框过渡 */
.rnd-tech-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(26,26,26,.10);
  border-color:rgba(218,24,132,.35);
}
.rnd-tech-card__eyebrow{
  display:block;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#DA1884;
}
.rnd-tech-card h3{
  margin:12px 0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.3rem;font-weight:700;color:#1a1a1a;
}
.rnd-tech-card p{margin:0;font-size:.95rem;line-height:1.8;color:#6b6470}

/* ---------- 响应式 ---------- */
@media(max-width:1023px){
  .rnd-stats-strip{grid-template-columns:repeat(2,1fr)}
  /* 2×2：第二行加顶分隔线，行首格去竖线 */
  .stat-cell:nth-child(n+3){border-top:1px solid #eee4ec}
  .stat-cell:nth-child(3)::before{display:none}
  .rnd-band--tech .rnd-band__inner{padding:60px 24px 66px}
  .rnd-tech-cards{grid-template-columns:1fr;gap:16px;margin-top:32px}
}
@media(max-width:768px){
  .rnd-5050__text{padding:48px 20px}
  .rnd-band--stats .rnd-band__inner{padding:44px 20px}
  .stat-cell{padding:32px 14px}
  .rnd-band--tech .rnd-band__inner{padding:48px 20px 54px}
  .rnd-tech-card{padding:30px 24px}
}
@media(prefers-reduced-motion:reduce){
  .rnd-5050__zoom{transition:none}
  .rnd-5050__media:hover .rnd-5050__zoom{transform:none}
  .rnd-tech-card,.rnd-tech-card:hover{transform:none;transition:none}
}

/* ---------- 手机/平板 ≤1023px：文上图下（2026-09-15） ----------
   原移动端为「图上文下」，且 #rnd 清零 padding 导致 rf-5050 的图片与本块图片
   无缝拼接（真机截图实锤 1444=1444）。改文上图下后阅读节奏：
   Hero → rf 文 → rf 图 → 本块文 → 本块图，任意两图之间有文字隔断。
   桌面 ≥1024px 左图右文布局不受影响（order 仅在此断点内生效）。 */
@media (max-width: 1023px) {
  .rnd-5050__text { order: 1; }
  .rnd-5050__media { order: 2; }
}