/* 科研方向页只覆盖当前页面，桌面尺寸跟随公共脚本按 1920 像素画布等比缩放。 */
.research-direction-main { width: 1620px; margin: 0 auto; padding: 60px 0 66px; }
html.is-pc .research-direction-page .inner-site-nav .nav-list > li.active a { color: #fff; }

/* 六组内容使用同一双列结构，反向组仅交换列位置，保持标题在手机端的阅读顺序。 */
.research-direction-group { display: grid; grid-template-columns: repeat(2, 780px); column-gap: 60px; align-items: center; min-height: 180px; }
.research-direction-visual { position: relative; width: 780px; height: 180px; }
.research-direction-visual > img { width: 100%; height: 100%; object-fit: cover; }
.research-direction-visual h2 { position: absolute; top: 40px; right: 80px; width: 560px; height: 100px; margin: 0; padding: 0 40px; display: flex; align-items: center; justify-content: flex-end; color: #fff; font-size: 26px; font-weight: 400; line-height: 36px; background: linear-gradient(90deg, rgba(255, 143, 0, 0), #ff8f00); }
.research-direction-group--reverse .research-direction-visual { grid-column: 2; grid-row: 1; }
.research-direction-group--reverse .research-direction-visual h2 { right: auto; left: 80px; justify-content: flex-start; background: linear-gradient(90deg, #ff8f00, rgba(255, 143, 0, 0)); }

/* 圆点沿用设计稿的两个 SVG 图层，条目间距为 20 像素。 */
.research-direction-topics { margin: 0 0 0 -14px; padding: 0; display: grid; gap: 20px; list-style: none; font-size: 20px; line-height: 28px; }
.research-direction-topics li { position: relative; padding-left: 40px; }
.research-direction-topics li::before { position: absolute; top: 4px; left: 0; width: 20px; height: 20px; content: ""; background: url("../images/research-direction-bullet-dot.svg") center / 6px 6px no-repeat, url("../images/research-direction-bullet-ring.svg") center / 20px 20px no-repeat; }
.research-direction-group--reverse .research-direction-topics { grid-column: 1; grid-row: 1; justify-self: end; width: max-content; margin: 0 -20px 0 0; }
.research-direction-topics--columns { grid-template-columns: 460px 307px; grid-template-rows: repeat(4, 28px); grid-auto-flow: column; column-gap: 33px; }
.research-direction-connector { width: 1620px; height: 29px; margin: 40px 0; }

/* 悬停动效只改变视觉位置，不影响原有图文尺寸和排版；配图放大后裁切在原区域内。 */
.research-direction-visual { overflow: hidden; transition: transform .25s ease; }
.research-direction-visual > img { transition: transform .35s ease; }
.research-direction-topics li { transition: color .2s ease, transform .2s ease; }
.research-direction-topics li::before { transition: transform .2s ease; }
/* 仅在支持鼠标悬停的桌面设备启用，避免触屏点击后保留悬停状态。 */
@media (hover: hover) {
  html.is-pc .research-direction-visual:hover { transform: translateY(-4px); }
  html.is-pc .research-direction-visual:hover > img { transform: scale(1.025); }
  html.is-pc .research-direction-topics li:hover { color: var(--blue); transform: translateX(4px); }
  html.is-pc .research-direction-topics li:hover::before { transform: scale(1.15); }
}
/* 尊重系统减少动态效果的设置，保留文字变色反馈并关闭位移和缩放。 */
@media (prefers-reduced-motion: reduce) {
  .research-direction-visual,
  .research-direction-visual > img,
  .research-direction-topics li,
  .research-direction-topics li::before { transition: none; }
  html.is-pc .research-direction-visual:hover,
  html.is-pc .research-direction-visual:hover > img,
  html.is-pc .research-direction-topics li:hover,
  html.is-pc .research-direction-topics li:hover::before { transform: none; }
}

/* 公共页脚增加栏目蓝色分隔线，内部布局与新闻列表页完全复用。 */
.research-direction-page .site-footer { border-top: 6px solid var(--blue); }

/* 手机端正文纵向排列，二级栏目导航复用 lanmunav.css 的横向滚动样式。 */
html.is-mobile .research-direction-main { width: auto; margin: 0 16px; padding: 32px 0 40px; }
html.is-mobile .research-direction-group { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
/* 配图保留原稿比例，橙色标题在小屏上缩小并增加圆角，避免长标题被裁切。 */
html.is-mobile .research-direction-visual { width: 100%; height: auto; aspect-ratio: 780 / 180; }
html.is-mobile .research-direction-visual h2 { top: 12px; right: 38px; left: auto; width: 280px; height: calc(100% - 24px); padding: 0 14px; border-radius: 8px; font-size: 18px; line-height: 26px; }
html.is-mobile .research-direction-group--reverse .research-direction-visual h2 { right: auto; left: 38px; }
html.is-mobile .research-direction-topics,
html.is-mobile .research-direction-group--reverse .research-direction-topics { width: 100%; margin: 22px 0 0; display: grid; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 14px; font-size: 16px; line-height: 26px; }
html.is-mobile .research-direction-topics li { padding-left: 30px; overflow-wrap: anywhere; }
html.is-mobile .research-direction-topics li::before { top: 3px; }
html.is-mobile .research-direction-connector { display: none; }
html.is-mobile .research-direction-group + .research-direction-connector + .research-direction-group { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
html.is-mobile .research-direction-page .site-footer { border-top-width: 4px; }