/*
Theme Name:  RoboScience
Description: 公司官网主题，Twenty Twenty-Four 的子主题。所有二次开发只在这里做，不碰主题本体；
             如果某个需求必须改主题本体才能实现，说明主题选错了——换主题，而不是改它。
Author:      软件部
Template:    twentytwentyfour
Version:     0.2.0
Text Domain: roboscience
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
*/

/* 字体栈在 theme.json 和这里各写一份：theme.json 那份编辑器用，这份前台兜底。
   两处必须一致，否则 PR 在后台看到的换行和前台不一样。
/* **拉丁字体放在中文字体前面**，顺序照原站（那是 Bootstrap 的默认栈）。
   反过来写（中文字体在前）会让拉丁字母和**中文引号**都由中文字体渲染：
   实测同一串「“仿真+视频”」中文字体在前是 135.5px，拉丁在前是 109.3px——
   差 24%，正文的换行位置整个跟原站对不上。
   中文字体仍然列在后面，保证中文汉字落到无衬线上（TT4 默认是衬线 Cardo，中文很怪）。 */
:root {
  --rbs-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
              "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
              "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-button__link,
.wp-block-navigation {
  font-family: var(--rbs-sans);
}

/* 中文正文行高比英文要松一点才好读 */
body {
  line-height: 1.85;
}

/* 页头导航：TT4 会把链接色套成 contrast（深色），压在黑底上几乎看不见。
   navigation 块的 style.elements.link 在部分场景不生效，这里直接钉死。 */
.wp-site-blocks > header .wp-block-navigation a,
.wp-site-blocks > header .wp-block-navigation a:hover,
.wp-site-blocks > header p a {
  color: #ffffff;
}
/* 顶级导航项移上去，原站**什么都不变**——不加下划线、不变色、不变淡
   （`scripts/probe_nav_win.py` 实测：三项 hover 前后 computed style 一模一样）。
   TT4 默认给链接的 hover 加下划线，这里关掉。
   唯一的反馈是「联系我们」底下掉出来的二级菜单。 */
.wp-site-blocks > header .wp-block-navigation a:hover {
  text-decoration: none;
}

/* 二级菜单：原站只有「联系我们」有，里面是招贤纳士 / 业务合作。
   实测（`scripts/probe_nav_win.py`，鼠标真移上去才看得到这东西）：
   纯黑盒子 `ul.p_level2Box` 紧贴页头下沿（y=80，页头正好 80 高），
   上下内边距 15px，两项各 112×35，字 15px/400 白色、左右内边距 20px，
   平时 `opacity: 0.6`，移到某一项上变 1，过渡 0.3s。

   核心区块自带 `min-width: 200px` 和一圈浅色描边，都要盖掉。

   第三条选择器盖的是**点下去那一刻**：链接拿到焦点，核心那条 `:focus-within` 规则
   （带两个 `:not()`，比上面两条多一个类）把宽度改回 `auto` + `min-width: 200px`，
   跳转前菜单会被拉到 200 宽（09-18 用户点 REX G1 看到的，那项平时 112 宽）。
   所以这条要把核心的两个 `:not()` 原样带上，再多出前面的 `.wp-site-blocks > header`。 */
@media (min-width: 601px) {
  .wp-site-blocks > header .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
  .wp-site-blocks > header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .wp-site-blocks > header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
    /* 和页头同一个黑（原站二级菜单也是纯黑）。导航区块会把「抽屉底色」那个属性
       一并盖到二级菜单上，色板类带 `!important`，真正生效的是那一条；
       这里写同色，谁赢结果都一样。 */
    background-color: #000000;
    border: none;
    border-radius: 0;
    width: max-content;
    min-width: 112px; /* 中文两项 112 够，英文 Cooperation 更宽，让内容自己撑 */
    left: -20px;      /* 抵掉下面那 20px 的左内边距，二级的字和一级的字对齐 */
    top: 100%;
    /* 盒子从**菜单项底边**就开始，不是从页头底边开始，中间那段用内边距垫出来：
       页头 80 高、导航项底边在 55，中间差 25px。盒子要是从 80 才画，
       鼠标从菜单项往下走会先掉进那 25px 的空档，hover 断掉、菜单当场就收了。
       从 55 开始的那一截压在同样是黑色的页头上，看不出来。
       15 + 25 = 40，于是文字起点落在 95、盒子底边落在 180，和原站一致。 */
    padding: 40px 0 15px;
    /* 原站是**由上往下长出来**的：`scripts/probe_anim_win.py` 逐帧量到
       高度从 0 长到 100px 用了约 200ms，期间内容被裁住，
       透明度全程是 1（没有渐显）；**鼠标一移开是瞬间收掉的，没有收起动画**。
       所以只给展开一条过渡，收起不给。

       动的是 `clip-path`，不是高度。两条路都试过：
       - `height` 动不了：核心区块开合用的是 `height: 0` ↔ `height: auto`，auto 没法过渡；
       - 改用 `max-height` 实测**开头会跳一下**：盒子有 55px 的上下内边距，
         内边距压不掉，`max-height: 0` 的时候盒子仍有 55px 高，
         一移上去先蹦出 30px 再开始长。
       `clip-path` 是按盒子自己的百分比裁的，内边距一起裁，从 0 长起；
       而且**盒子多高都不用改数值**，PR 加一条不会被裁掉。
       核心自带的那点 `opacity .1s` 渐显也在这里按住：原站不渐显。 */
    clip-path: inset(0 0 80% 0);
    opacity: 1;
    transition: none;
  }
  /* 关着的时候裁掉 80% 而不是 100%：盒子总高 125px，露出来的那 20%（25px）
     正好是压在黑色页头后面的那一截，看不见，**动画一开始就直接从页头下沿往下长**。
     裁到 100% 的话，前 50ms 都花在页头后面，移上去会先愣一下再出来。
     于是 0.2s 跑完的就是看得见的那 100px，和原站量到的一致。
     原站的曲线是 ease 一类，我们用线性——只露出整段行程的一截时，
     线性最接近匀速，套 ease 反而会一头快一头慢。
     `:focus-within` 带着两个 `:not()`，和上面那条第三个选择器一样强，靠写在后面赢；
     少了它们，拿到焦点时上面那条的 80% 裁切会赢，菜单反而收起来。 */
  .wp-site-blocks > header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .wp-site-blocks > header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.2s linear;
  }
  /* 选择器要压得住核心区块自己那条（它给二级菜单项写死了 `.5em 1em` 的内边距，
     还给二级菜单容器写死了黑字白底）。**核心的样式表比子主题的后加载**，
     同分就是它赢，所以这里必须比它多几个类。 */
  .wp-site-blocks > header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    /* 高度写死 35px，字一折行，第二行就掉到这一项下面，看着像多了一个选项
       （09-18 用户看到「RoboMirage物理仿真引擎」的「擎」单独一行）。盒子宽是 max-content，
       按理不会折，但不同浏览器、字体算出来的宽度差一点就会折，这里直接不让折 */
    white-space: nowrap;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  .wp-site-blocks > header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #ffffff;
    opacity: 1;
  }
}

/* 页头右上角的 EN 按钮：原站移上去是**白底黑字**（实测 `rgb(255,255,255)` 底、
   `rgb(0,0,0)` 字）。字色要 `!important`，
   理由和「查看更多」那条一样——色值是区块的内联样式。 */
.wp-site-blocks > header .wp-block-button__link:hover {
  background-color: #ffffff;
  color: #000000 !important;
  border-color: #ffffff;
}

/* 页脚同理。原站页脚文字全是纯白，没有灰色层级，链接也一样。
   **移上去什么都不变**：列标题、子项、邮箱、社交图标，原站 hover 前后逐项量过，颜色、透明度、下划线都不动
   （`scripts/probe_hover_shape_win.py footer`，09-16）。 */
.wp-site-blocks > footer a {
  color: #ffffff;
}

/* 公安联网备案号（09-17）：和 ICP 备案号在同一段，按链接地址认。
   徽标是公安备案平台下载的「备案编号图标」，20×20，`icons/beian-gongan.png`。
   20px 间距照公安备案平台自己页脚上两个备案号的间距。间距挂在 ICP 链接**右边**：
   挂在公安链接左边的话，窄屏折到第二行时会带着 20px 缩进。 */
.wp-site-blocks > footer a[href^="https://beian.miit.gov.cn"]:not(:last-child) {
  margin-right: 20px;
}
.wp-site-blocks > footer a[href^="https://beian.mps.gov.cn"] {
  white-space: nowrap;
}
.wp-site-blocks > footer a[href^="https://beian.mps.gov.cn"] > img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
}

/* 页脚社交图标：白色圆形图标，悬停在下方弹二维码。
   核心的 social-links 区块做不了——它的服务表里没有微信/小红书/哔哩哔哩，
   也没有悬停弹层，所以这一排是页脚样板里的一个 HTML 区块 + 这段样式。
   图标是从原站扒下来的 SVG，存在 `themes/roboscience-child/icons/`。
   实测原站：圆 40px、间距 10px、二维码 100px 出现在图标正下方左对齐。 */
.rbs-social {
  display: flex;
  gap: 10px;
  justify-content: flex-end; /* 六个图标右对齐到内容列边缘，和原站一样 */
}
.rbs-social__item {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}
/* 图标 SVG 本身就是**白色实心圆 + 图标挖空**，圆不用 CSS 画，也别改它的 fill——
   改了等于把整个圆染色。这里只管尺寸。 */
.rbs-social__item > img:not(.rbs-social__qr) {
  width: 40px;
  height: 40px;
  display: block;
}
/* 二维码离图标顶 60px，也就是图标底下空 20px（原站 hover 实测，09-16）。 */
.rbs-social__qr {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100px;
  height: 100px;
  max-width: none;
  display: none;
  z-index: 5;
}
.rbs-social__item:hover .rbs-social__qr,
.rbs-social__item:focus-visible .rbs-social__qr {
  display: block;
}
/* 联系我们页正文里也有这一排，和页脚的两处不同：**居中**，而且**要反色**。
   图标 SVG 是「白色实心圆 + 图标挖空」，是照着黑色页脚做的，
   放到白底上整个圆就没了。`invert(1)` 之后是黑圆白字——和原站那一排一样。 */
.rbs-social--center {
  justify-content: center;
}
.rbs-social--center .rbs-social__item > img:not(.rbs-social__qr) {
  filter: invert(1);
}

/* 页头搜索框：原站是圆角胶囊 */
.wp-site-blocks > header .wp-block-search__inside-wrapper {
  border-radius: 999px;
  overflow: hidden;
  background: #ffffff;
  border: none;
}
/* 内边距按原站实测的 15px 来。再大一点（比如 1.1rem = 17.6px）就会把可输入区挤掉一截，
   210px 的胶囊里只剩一个半字的位置，占位文字基本看不见。 */
.wp-site-blocks > header .wp-block-search__input {
  border: none;
  background: transparent;
  color: #111114;
  padding-inline: 0.9375rem;
}
/* 原站在输入框和放大镜之间有一条竖分隔线 */
.wp-site-blocks > header .wp-block-search__button {
  background: transparent;
  border: none;
  border-left: 1px solid #dcdce2;
  border-radius: 0;
  color: #111114;
}

/* 首屏的视频背景要真的铺满，别留黑边 */
.wp-block-cover__video-background {
  object-fit: cover;
}

/* 首屏轮播（2026-09-16 加）。一帧一个产品，整帧可点，行为见 assets/hero-carousel.js。

   **这条 `margin-block-start` 是必须的**：上面那条「通栏板块之间不留缝」写的是
   `.wp-block-post-content > .alignfull`，**直接子元素**选择器。轮播把每帧 cover 包进了
   一层 Group，于是 Group 才是直接子元素、cover 变成了孙子——不补这一条，
   首屏和黑色简介段之间会重新透出 19px 的页面底色，正是那条规则当初修掉的毛病。 */
.wp-block-post-content > .rbs-hero-carousel,
.rbs-hero-carousel {
  position: relative;
  margin-block-start: 0;
}

/* 帧用显示/隐藏切换，**不用绝对定位叠放**：高度由当前帧自己撑，
   窄屏那条 `.wp-block-cover:not(.rbs-page-hero) { min-height:56.25vw }` 才照常生效
   （它是后代选择器，包一层不影响匹配）。叠放的话得给容器另算高度，390 下那个
   16:9 的规则就白写了。 */
.rbs-hero-carousel > .wp-block-cover {
  margin-block-start: 0;
}

/* **JS 跑起来之前只显示第一帧**（禁用 JS 也是这个样子），跑起来之后由 `is-active` 说了算。
   用容器上的 `is-ready` 区分这两个阶段，脚本初始化完才加上。

   **别用「全部 `display:none` + `:first-child` 兜底」那种写法**：兜底之后想再用
   `.is-active ~ .wp-block-cover:first-child` 取消它是**取消不掉的**——`~` 是后续兄弟选择器，
   而 `:first-child` 不可能排在别的元素后面，这条选择器永远匹配不到。
   后果是轮到第二帧时第一帧仍被兜底规则按住显示，**两帧一起堆在页面上**；
   DOM 计数还全是对的（容器 1 个、cover 2 个），只有截图才看得出来。 */
.rbs-hero-carousel:not(.is-ready) > .wp-block-cover:not(:first-child) {
  display: none;
}
.rbs-hero-carousel.is-ready > .wp-block-cover {
  display: none;
}
.rbs-hero-carousel.is-ready > .wp-block-cover.is-active {
  display: flex;
}

/* 左右箭头和分页点。**尺寸没有照原站量过**——原站首屏是 Swiper，自带
   `swiper-button-next/prev` 和 `swiper-pagination`，样式没逐项测。
   按「和旧官网差不多就行」的尺子先做成朴素的一版，量了再调。 */
.rbs-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.rbs-hero-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}
.rbs-hero-arrow--prev {
  left: 3vw;
}
.rbs-hero-arrow--next {
  right: 3vw;
}
.rbs-hero-nav {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.rbs-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s;
}
.rbs-hero-dot.is-active {
  background: #ffffff;
}

/* 通栏板块之间不留缝。
   区块默认间距会在两块之间留 19px，页面底色（TT4 的 #f9f9f9）从缝里透出来，
   在黑色首屏和黑色简介之间形成一条白带——原站是直接接上的，没有这条。 */
.wp-block-post-content > .alignfull {
  margin-block-start: 0;
}

/* 标题下面那条短横线。分隔符区块没有「宽度」和「粗细」这两个属性，
   写进内联样式会让编辑器判定区块失效（保存的 HTML 和 save 函数生成的对不上），
   所以只能放这里。
   首屏实测原站是 **60px 宽、2px 高**（≤768 是 25px 宽）；
   写成 1px 高会细一半，一眼就看得出「没有加粗」。
   简介段那条是 40px 宽、2px 高，在下面单独一段。 */
.wp-block-cover__inner-container > .wp-block-separator {
  width: 60px;
  height: 2px;
  border: none;
  margin-left: 0;
}

/* 首屏的内容位置：PR 在区块工具栏的九宫格里选了居中或靠右时，标题、短横线、MORE + 一起跟过去。
   默认仍是原站的左对齐（`is-position-center-left`），这几条不生效。

   不补的话：选中间那一列，核心 CSS 让内容盒保持 100% 宽，标题、线、按钮全留在左边，**看起来点了没反应**；
   选右边那一列，内容盒挪到右边，但盒子里仍是左对齐，线和按钮对不齐标题的右边缘。

   PR 自己在标题或按钮上点过对齐的（带 `has-text-align-*` / `is-content-justification-*`），按她点的来，这里不覆盖。 */
.wp-block-cover:is(.is-position-top-center, .is-position-center-center, .is-position-bottom-center)
  > .wp-block-cover__inner-container > .wp-block-heading:not([class*="has-text-align-"]) {
  text-align: center;
}
.wp-block-cover:is(.is-position-top-center, .is-position-center-center, .is-position-bottom-center)
  > .wp-block-cover__inner-container > .wp-block-separator {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-cover:is(.is-position-top-center, .is-position-center-center, .is-position-bottom-center)
  > .wp-block-cover__inner-container > .wp-block-buttons:not([class*="is-content-justification-"]) {
  justify-content: center;
}
.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)
  > .wp-block-cover__inner-container > .wp-block-heading:not([class*="has-text-align-"]) {
  text-align: right;
}
.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)
  > .wp-block-cover__inner-container > .wp-block-separator {
  margin-left: auto;
  margin-right: 0;
}
.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)
  > .wp-block-cover__inner-container > .wp-block-buttons:not([class*="is-content-justification-"]) {
  justify-content: flex-end;
}
/* 选最下面一行时，MORE + 离帧底只有 17px，正好压在轮播的分页点上（点在帧底往上 28–38px），
   选正下方时按钮把点整个盖住、点不到。底下留 48px，按钮和点之间空出 10px。
   手机上分页点是藏的，这条照样生效也无妨：390 宽下首屏 219px 高，内容 153 + 上 16 + 下 48 = 217，撑不高。 */
.rbs-hero-carousel > .wp-block-cover:is(.is-position-bottom-left, .is-position-bottom-center, .is-position-bottom-right) {
  padding-bottom: 48px;
}

/* 首屏的 MORE + 按钮：原站实测 150×45，各视口都不变（连 390 都是这个尺寸）。
   用固定盒子而不是内边距凑，是因为原站那个尺寸跟文字宽度无关；
   `inline-flex` 居中，文字改了也不会把框撑歪。
   颜色、边框、圆角留在区块属性里，PR 在后台还能调。 */
.rbs-hero-more .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 45px;
  padding: 0;
}
/* 移上去原站是**反色**：白底 + `rgb(51,51,51)` 的字（实测同上那个探针）。
   字色同样得 `!important`，理由见下面「查看更多」那条。
   边框单独钉成白的：描边按钮的边框跟着字色走，不钉的话白底上会多出一圈深灰细线，
   而原站移上去边框也是白的，等于看不见。 */
.rbs-hero-more .wp-block-button__link:hover {
  background-color: #ffffff;
  color: #333333 !important;
  border-color: #ffffff;
}
/* 简介段标题下那条 40px 白线。
   **别去改它的 margin**：constrained 布局给子块的是
   `margin-left:auto !important` + `max-width:1500px`，
   两者合起来才让正文落在 x=50。强行 `margin-left:0` 能压过 !important，
   但那是把线推到容器内边距边缘 x=40，比「构」字左边缘还靠左 10px。
   所以让它照常参与布局（宽度跟正文一样、左边缘自然对齐），只画左端 40px。 */
.wp-block-separator.rbs-rule {
  width: auto;
  height: 2px;
  border: none;
  background-color: transparent !important; /* 盖掉区块自带的内联底色 */
  position: relative;
}
.wp-block-separator.rbs-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background-color: currentColor; /* 跟着区块的文字色走，PR 改色仍然生效 */
}
/* 关于我们 / 联系我们的板块标题在原站是**居中**的，标题下那条短横线也跟着居中。
   居中这一档实测是 50px 宽（首页那些左对齐的是 40px），所以宽度也一起改。 */
.wp-block-separator.rbs-rule.rbs-rule--center::before {
  left: 50%;
  width: 50px;
  transform: translateX(-50%);
}

/* 新闻卡片。原站实测（1600 下）：白底 section + 浅灰卡片，
   左栏两张横排卡（图 320×240 在左）、右栏一张竖排卡（图 387×290 在上）。
   三张原图的长宽比各不相同，**必须裁**，不然卡片高度参差不齐。 */
.rbs-news-thumb img {
  width: 320px;
  height: 240px;
  object-fit: cover;
  display: block;
}
.rbs-news-cover img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  display: block;
}
/* 列表页上没有特色图的文章：把那一栏收掉，别空出 320px。
   `core/post-featured-image` 在文章没有特色图时**什么都不输出**，
   于是那个 column 是个空 div，照样占着 `flex-basis:320px`。
   有一篇英文文章的配图是飞书内网图（401，原站也是坏的），取不回来，就是这种情况。 */
.rbs-news-card .wp-block-column:empty {
  display: none;
}

/* 右边那张竖卡要撑满整列，和左边两张横卡的上下边缘齐平。
   不写这条的话它只有内容那么高（实测比左栏矮 92px），看着就是没对齐。
   列本身已经被 flex 拉到等高，所以 100% 就够。 */
.rbs-news-card--tall {
  height: 100%;
}

/* 核心文章模板只查询一次；第三篇跨两行，依次为左上、左下、右侧。 */
.rbs-home-news__items {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 2.87fr);
  gap: 20px;
}
.rbs-home-news__items > li {
  min-width: 0;
  margin: 0;
}
.rbs-home-news__items > li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.rbs-home-news__items > li:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.rbs-home-news__items > li:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.rbs-home-news__items .rbs-news-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 100%;
}
.rbs-home-news__image {
  margin: 0;
}
.rbs-home-news__items figure.rbs-home-news__image img {
  display: block;
  width: 320px;
  height: 240px;
  object-fit: cover;
  border-radius: 0;
}
.rbs-home-news__text {
  min-width: 0;
}
.rbs-home-news__text:only-child {
  grid-column: 1 / -1;
}
.rbs-home-news__items > li:nth-child(3) .rbs-news-card {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 32px;
  padding-right: 22px !important;
  padding-left: 22px !important;
}
.rbs-home-news__items > li:nth-child(3) .rbs-home-news__image img {
  width: 100%;
  height: 290px;
}
.rbs-home-news .wp-block-read-more {
  display: inline-block;
  text-decoration: none;
}
.rbs-home-news .rbs-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 标题最多两行，超出省略——原站第三条就是这么截的 */
.rbs-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 「查看更多」是方角描边按钮，不是圆角胶囊，也不是纯文字链接。
   鼠标移上去原站是**黑底白字**（实测 `bg rgb(0,0,0)` / `color rgb(255,255,255)`，
   `scripts/probe_hover_win.py 查看更多`）。只翻底色不翻字色的话，
   整颗按钮会糊成一块黑，字看不见。
   **字色必须 `!important`**——色值是区块写在元素上的内联样式，
   选择器再特异也压不过它，跟首屏字号在断点上要 `!important` 是同一回事。
   列表页（`/news/` `/blog/`）那颗是 read-more 区块不是按钮区块，
   渲染出来的元素不一样，两种都得写上。 */
.wp-block-button.rbs-news-more .wp-block-button__link:hover,
a.wp-block-read-more.rbs-news-more:hover,
.wp-block-button.rbs-product-more .wp-block-button__link:hover {
  background-color: #111114;
  color: #ffffff !important;
}

/* 首页产品块整块可点（PR 09-17：「可点跳内页、当前页面打开」）。
   块里那颗「了解更多」的链接用 ::after 铺满整块，点块里哪儿都是点这个链接：
   原生跳转，中键、「在新标签页打开」照样能用，不用 JS。鼠标停在块上，按钮就是移上去的样子，算是提示。
   块是 `scripts/setup/link_products.py` 加的类和按钮，新加一块插「产品介绍」样板。
   编辑器不加载这份样式，所以不会盖住块、挡着 PR 点选里面的标题和图。 */
.wp-site-blocks .rbs-product {
  position: relative;
}
.wp-site-blocks .rbs-product .rbs-product-more .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 二三级页顶上那张通栏大图（招贤纳士页现在用的就是它）。
   原站实测（`scripts/probe_box_win.py`）：满宽、**固定 400px 高**、
   `cover` 居中裁切、**图上不压字**，原图 2000×800。
   高度不写成区块属性——写了编辑器判无效区块，这个版本的图片区块不认那条属性。

   选择器要带上 `figure.wp-block-image`：核心那条 `.wp-block-image img{height:auto}`
   和 `.rbs-page-banner img` 同分，而**核心的样式表后加载，同分它赢**，
   只写类名的话图会按原始比例撑到 640 高。二级菜单那条是同一回事。 */
figure.wp-block-image.rbs-page-banner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* ===== 发展历程的时间轴 ======================================================
   原站是个 Swiper 轮播，形态和行为都照它做。实测值：
   标题 28px/400 `rgb(51,51,51)`（单行，放不下给省略号）、日期 16px/400 `rgb(96,96,96)`、
   轴线 1px `rgb(170,170,170)`、进度格 162×5、当前色 `rgb(0,155,142)`、
   年份 **240px/700 Arial `rgb(238,247,246)`**。
   **视口 1170 宽、片与片间距 50**（原站一片占 1220）。拖动、循环在 `assets/timeline.js`。
   JS 挂了看到的是第一片：轨道没挪过，视口只露第一片，不会是一块空白。       */
.rbs-tl {
  position: relative;
  max-width: 1170px;
  margin: 110px auto 0; /* 原站短横线到第一条事件之间约 150px，减去短横线自己的下边距 */
  padding-bottom: 40px;
  /* 这一片是可以按住拖的，**不能让浏览器把它当文字来选**——
     不禁的话按住一拖就开始框选文字，和「整片跟着手走」打架。
     `touch-action: pan-y` 是给手机留的：上下滑页面照常，左右滑归我们。 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.rbs-tl__viewport {
  overflow: hidden;
}
.rbs-tl__track {
  display: flex;
  gap: 50px;
  will-change: transform;
}
.rbs-tl__slide {
  flex: 0 0 100%;
  min-width: 0; /* flex 子项默认不肯比内容窄，不写这条，长标题会把整片撑宽 */
  text-align: center;
}
/* 标题**单行、放不下就省略号**——原站就是这么截的。
   单行才能保证下面的日期、轴线、大年份位置固定（轴线是绝对定位压上去的）。 */
.rbs-tl__title {
  height: 42px;
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 400;
  line-height: 42px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbs-tl__date {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #606060;
}
/* 轴线**不跟着片滑**，压在视口上固定不动，位置在标题顶下方 128px（原站实测）。
   原站每一「格」是 162×5、六格并排（315→1287），
   格子左端一个 5×5 的点，**当前那格里有一条青色进度线从左往右拉满**，
   拉满就翻到下一条——所以这不是六个圆点，是六段进度条。
   轴线本身比六格宽一圈（246→1354），两头各露出一小截。 */
.rbs-tl__axis {
  position: absolute;
  top: 128px;
  left: 50%;
  display: flex;
  width: 1108px;
  max-width: 100%;
  padding: 0 68px;
  box-sizing: border-box;
  border-top: 1px solid #aaaaaa;
  transform: translateX(-50%);
}
.rbs-tl__step {
  position: relative;
  flex: 1;
  height: 14px;
  margin-top: -7px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
/* 格子左端那个点 */
.rbs-tl__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #aaaaaa;
  transition: background-color 0.2s;
}
.rbs-tl__step:hover::before,
.rbs-tl__step.is-active::before {
  background: #009b8e;
}
/* 进度线：**动画时长就是每条停留的时间**（原站实测约 5.3 秒）。
   翻页由动画结束事件驱动，进度条和翻页天然同步，不会各走各的。
   **鼠标停在上面不暂停**——原站实测照走；加了「移上去就停」的话，
   看时间轴时鼠标正好在上面，看起来就是走一截卡住。只有按住拖的时候停，松手接着走。 */
.rbs-tl__fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #009b8e;
  transform: scaleX(0);
  transform-origin: left center;
}
.rbs-tl__step.is-active .rbs-tl__fill {
  animation: rbs-tl-fill 5.3s linear forwards;
}
.rbs-tl.is-dragging .rbs-tl__step.is-active .rbs-tl__fill {
  animation-play-state: paused;
}
@keyframes rbs-tl-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* 关掉动画的人（系统设置里的「减少动态效果」）看到的是静止的进度线，
   翻页靠点格子或者拖动。**这是有意的**：自动翻页本来就属于动态效果。 */
@media (prefers-reduced-motion: reduce) {
  .rbs-tl__step.is-active .rbs-tl__fill {
    animation: none;
    transform: scaleX(1);
  }
}
/* 大年份在每一片里，跟着整片一起滑（原站也是每片各带各的年份）。
   标题 42 + 6 + 日期 22 = 70，原站年份顶在标题下 132，所以上边距 62 */
.rbs-tl__year {
  margin: 62px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 240px;
  font-weight: 700;
  line-height: 1;
  color: #eef7f6;
}
@media (max-width: 768px) {
  .rbs-tl {
    margin-top: 40px; /* 手机上那 110px 的留白占掉大半屏，收一收 */
    padding-bottom: 0;
  }
  /* 手机上一行放不下几个字，改成最多两行；高度照样钉死，下面的轴线和年份不跳 */
  .rbs-tl__title {
    height: 60px;
    font-size: 20px;
    line-height: 30px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* 标题 60 + 6 + 日期 22 = 88，轴线压在 104，年份从 124 开始 */
  .rbs-tl__axis {
    top: 104px;
    padding: 0 24px;
  }
  .rbs-tl__year {
    margin-top: 36px;
    font-size: 96px;
  }
}

/* 提交成功页（在线留言提交后跳过来）。照旧官网 successfully.html：
   60px 蓝色对勾居中；HOME 按钮 100×39、`#409eff` 底、14px 白字、内边距 8px，
   移上去不变（实测）。颜色写在这里不写成区块属性，理由见 `build_pages.py` 的 `build_success`。 */
.rbs-success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.wp-block-button.rbs-success-home .wp-block-button__link,
.wp-block-button.rbs-success-home .wp-block-button__link:hover {
  min-width: 100px;
  height: 39px;
  padding: 8px;
  border: 1px solid #409eff;
  border-radius: 0;
  background: #409eff;
  color: #ffffff;
  font-size: 14px;
  line-height: 21px;
  box-sizing: border-box;
}

/* 联系我们页的在线留言表单（Fluent Forms 渲染出来的）。照旧官网实测：
   三个输入框一行，各 480×50、间距 30；下面留言框 1500×120；行与行、留言框与按钮都隔 20；
   框**没有边框、没有圆角**，白底，14px `#333`，左右内边距 15（留言框四周 15）；
   按钮 200×51、纯黑底、14px 白字、内边距 15，移上去不变。
   插件自带两份样式表（圆角、灰边框、浅灰按钮），选择器要多带几层才压得住。 */
.wp-site-blocks form.frm-fluent-form .rbs-form-row {
  gap: 30px;
  margin-bottom: 20px;
}
.wp-site-blocks form.frm-fluent-form .rbs-form-row .ff-t-cell {
  padding: 0;
}
.wp-site-blocks form.frm-fluent-form .ff-el-group {
  margin-bottom: 20px;
}
.wp-site-blocks form.frm-fluent-form .rbs-form-row .ff-el-group {
  margin-bottom: 0;
}
.wp-site-blocks form.frm-fluent-form .ff-el-form-control {
  height: 50px;
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  color: #333333;
  font-size: 14px;
  line-height: 50px;
}
.wp-site-blocks form.frm-fluent-form textarea.ff-el-form-control {
  height: 120px;
  padding: 15px;
  line-height: 1.6;
}
.wp-site-blocks form.frm-fluent-form .ff-el-form-control:focus {
  outline: 1px solid #111114;
  box-shadow: none;
}
.wp-site-blocks form.frm-fluent-form .ff_submit_btn_wrapper {
  margin-bottom: 0;
}
.wp-site-blocks form.frm-fluent-form .ff-btn.ff-btn-submit,
.wp-site-blocks form.frm-fluent-form .ff-btn.ff-btn-submit:hover {
  width: 200px;
  height: 51px;
  padding: 15px;
  border: 0;
  border-radius: 0;
  background: #000000;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  opacity: 1;
  box-shadow: none;
}
/* 手机上三个框竖着叠：原站 390 下实测每个 367×50、上下隔 20，按钮 200×51 居中。
   插件在这个宽度把这一行改成 `display: block`，`gap` 就不起作用，三个框贴在一起像一个大白框。
   这里改成竖排的 flex，间距照原站给 20。 */
@media (max-width: 768px) {
  .wp-site-blocks form.frm-fluent-form .rbs-form-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* 全宽媒体区块（架构图、演示视频）不要被主题的默认圆角和阴影改样子 */
.rbs-media-full figure {
  margin: 0;
}
.rbs-media-full video,
.rbs-media-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== 文章详情页（templates/single.html）====================================
   照旧官网的文章页（`jishu_detail/*.html`）做。实测值（`scripts/probe_box_win.py`，1600 宽）：
   通栏图 1600×400 → 往下 48 是正文栏（1500 宽）→ 标题再往下 40；
   标题 28px/700 `#303133` 行高 1；标题下、时间那一行下、正文之后各一条 **1px `#f2f2f2`** 的线，上下各 16；
   时间那一行 14px `#999`；正文后面那条线紧跟一块 **10px 高的 `#e9e9eb` 灰条**，再往下 30 是翻页。
   英文站多一栏「Top News」：正文 1032 + 间距 45 + 侧栏 423。中文站没有这一栏（`functions.php` 里去掉）。
   **选择器都带 `.wp-site-blocks`**：核心和 TT4 的区块样式表比子主题后加载，同分它赢。 */

/* 通栏图和正文栏直接接在页头下面，不留块间距——不然页面底色会从缝里透出来 */
.wp-site-blocks > .rbs-page-banner,
.wp-site-blocks > .rbs-article,
.wp-site-blocks > .rbs-list {
  margin-block-start: 0;
}
/* 新闻列表页翻页到页脚实测是 88，已经全在 main 的下内边距里；页脚上面再加 19 的块间距就多了。
   只管列表页：文章页当初是带着这 19 量的，改了它的实测记录就对不上了 */
.wp-site-blocks > .rbs-list + footer {
  margin-block-start: 0;
}
.wp-site-blocks > figure.rbs-page-banner {
  margin: 0;
}

.rbs-article__layout {
  display: flex;
  align-items: flex-start;
  gap: 45px;
}
.rbs-article__main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 40px; /* 侧栏的「Top News」顶着正文栏上沿，标题比它低 40 */
}
/* 块布局给每个子块的默认间距全部清掉，下面逐项按实测值给 */
.wp-site-blocks .rbs-article__layout > *,
.wp-site-blocks .rbs-article__main > *,
.wp-site-blocks .rbs-article__meta > * {
  margin-block: 0;
}
.wp-site-blocks .rbs-article h1.rbs-article__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #303133;
}
.wp-site-blocks .rbs-article hr.wp-block-separator.rbs-article__line {
  width: 100%;
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid #f2f2f2;
  background: none;
  opacity: 1;
}
.wp-site-blocks .rbs-article hr.wp-block-separator.rbs-article__bar {
  width: 100%;
  height: 10px;
  margin: 0;
  border: 0;
  background: #e9e9eb;
  opacity: 1;
}

/* 发布时间 / 来源 / 分享：「发布时间：」紧跟日期，隔 20 是「来源：」，再隔 20 是分享按钮。
   「来源：」后面是空的——旧站这几篇都没填，标签照样显示，我们照搬 */
.rbs-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 30px;
  font-size: 14px;
  line-height: 28px;
  color: #999999;
}
.wp-site-blocks .rbs-article__meta .wp-block-post-date {
  font-size: 14px;
  color: #999999;
}
.wp-site-blocks .rbs-article__meta > .rbs-article__source,
.wp-site-blocks .rbs-article__meta > .rbs-share {
  margin-left: 20px;
}

/* 分享按钮：图标 30px、间距 10px（旧站那几张图是 64px 缩着显示的） */
.rbs-share {
  position: relative;
  display: flex;
  gap: 10px;
}
.rbs-share__item {
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rbs-share__item img {
  display: block;
  width: 30px;
  height: 30px;
}
/* 微信的二维码浮层：旧站实测 `#2bad13` 绿底、138px 宽，顶在图标上方、左边和图标对齐，
   底边一个小三角指着图标。`left` 由 `assets/share.js` 按微信图标的位置给 */
.rbs-share__qr {
  position: absolute;
  bottom: calc(100% + 12px);
  z-index: 10;
  display: block;
  width: 138px;
  padding: 8px 8px 6px;
  box-sizing: border-box;
  background: #2bad13;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}
.rbs-share__qr[hidden] {
  display: none;
}
.rbs-share__qr::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 9px;
  border: 6px solid transparent;
  border-top-color: #2bad13;
}
.rbs-share__qr-code svg {
  display: block;
  width: 122px;
  height: 122px;
}
.rbs-share__qr-tip {
  display: block;
  margin-top: 4px;
}

/* 正文：旧站文章的内联样式实测大多是 15px / 行高 2 / `#3f3f3f` / 字距 0.5px / 两端对齐。
   段落之间 20px。图片按原尺寸居中，宽过正文栏才缩 */
.wp-site-blocks .rbs-article__content {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.5px;
  color: #3f3f3f;
  text-align: justify;
}
.wp-site-blocks .rbs-article__content > * + * {
  margin-block-start: 20px;
}
.wp-site-blocks .rbs-article__content .wp-block-image {
  text-align: center;
}

/* 翻页：左右各一半。左边「上一页 标题」，右边「标题 下一页」靠右；14px `#555`，行高 28。
   「上一页」是更新的那篇、「下一页」是更旧的（旧站按列表从上往下），
   和 WordPress 的 next / previous 正好反过来，模板里已经对调 */
.wp-site-blocks .rbs-article__main > .rbs-article__pager {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0 50px;
  font-size: 14px;
  line-height: 28px;
  color: #555555;
}
html[lang^="en"] .wp-site-blocks .rbs-article__main > .rbs-article__pager {
  padding: 0; /* 英文站正文栏窄一截，翻页不再往里缩 50（实测） */
}
.rbs-article__pager .wp-block-post-navigation-link {
  display: flex;
  flex: 0 0 50%;
  min-width: 0;
}
.rbs-article__pager .post-navigation-link-previous {
  flex-direction: row-reverse;
  text-align: right;
}
.rbs-article__pager .post-navigation-link__label {
  flex: none;
  margin-right: 10px;
}
.rbs-article__pager .post-navigation-link-previous .post-navigation-link__label {
  margin: 0 0 0 10px;
}
.wp-site-blocks .rbs-article__pager a {
  color: #555555;
}

/* 英文站右边的「Top News」：标题 22px `#666`、「More >>」16px；
   每条是 373×242 的图 + 18px/700 单行标题（放不下省略）+ 右边一颗 35×21 的黑底箭头 */
/* `min-width: 0` 不能省：flex 子项默认不肯比自己的内容窄，而封面图的原图有两千多像素宽，
   不写这条的话侧栏被撑到 2152px、正文栏被挤成 0 宽，整页横向溢出 */
.rbs-article__aside {
  flex: 0 0 423px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 25px;
}
.rbs-aside__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.wp-site-blocks .rbs-aside__head > p {
  margin: 0;
  color: #666666;
}
.rbs-aside__title {
  font-size: 22px;
  line-height: 30px;
}
.rbs-aside__more {
  font-size: 16px;
}
.wp-site-blocks .rbs-aside__more a {
  color: #666666;
}
.wp-site-blocks .rbs-aside__list .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-site-blocks .rbs-aside__list .wp-block-post {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}
.wp-site-blocks .rbs-aside__thumb {
  margin: 0 0 10px;
}
/* 旧官网是直角；父主题给特色图加了圆角，这里盖掉 */
.wp-site-blocks .rbs-aside__thumb,
.wp-site-blocks .rbs-aside__thumb a,
.wp-site-blocks .rbs-aside__thumb img {
  border-radius: 0;
}
.wp-site-blocks .rbs-aside__thumb img {
  display: block;
  width: 100%;
  height: 242px;
  object-fit: cover;
}
.wp-site-blocks .rbs-aside__name {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 链接要改回行内显示：父主题把它设成了行内块（实测最长那条 2102px 宽），
   行内块是一个整体，外层的省略号截不进去，标题放不下时就是直接截断、没有「…」 */
.wp-site-blocks .rbs-aside__name a {
  display: inline;
  color: #666666;
}
.wp-site-blocks a.wp-block-read-more.rbs-aside__go {
  display: block;
  width: 35px;
  height: 21px;
  margin-left: auto;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

/* 两个翻页链接之间不要块布局的默认间距——不清的话右边那条被推下去 19px，和左边不齐 */
.wp-site-blocks .rbs-article__pager > * {
  margin-block: 0;
}

@media (max-width: 768px) {
  .rbs-article__layout {
    display: block;
  }
  /* 分享按钮在手机上单独一行、靠左不缩进（旧站 390 下实测）。
     不写的话折到第二行时还带着桌面端「隔 20」的左边距 */
  .wp-site-blocks .rbs-article__meta > .rbs-share {
    flex-basis: 100%;
    margin-left: 0;
  }
  /* 竖着排的两条翻页之间隔 15（旧站 390 实测：28 的行高 + 15） */
  .wp-site-blocks .rbs-article__pager > * + * {
    margin-top: 15px;
  }
  .rbs-article__aside {
    display: none; /* 旧站英文页这一栏在手机上高度是 0（实测） */
  }
  .wp-site-blocks .rbs-article h1.rbs-article__title {
    font-size: 22px;
  }
  /* 手机上翻页竖着排：「上一页 标题」一行、「下一页 标题」一行，都靠左 */
  .wp-site-blocks .rbs-article__main > .rbs-article__pager {
    display: block;
    padding: 0;
  }
  .rbs-article__pager .post-navigation-link-previous {
    flex-direction: row;
    text-align: left;
  }
  .rbs-article__pager .post-navigation-link-previous .post-navigation-link__label {
    margin: 0 10px 0 0;
  }
}

/* ===== 新闻列表页（`/news/` `/blog/`，`templates/home.html`）============================
   旧官网实测（`scripts/probe_list_win.py`，1920 / 1600 / 1280 / 1024 / 769 / 768 / 390，中英两站一样）：
   - 顶上通栏图和文章页是同一张，模板里直接引用文章页那个同步样板
   - 白底，没有「新闻资讯」标题，不显示日期
   - 一篇一行：图在左占内容栏 40%、高是图宽的 60%；文字栏离图 6%、宽 48%，上下居中。
     全是百分比，内容栏 1500 那一档就是图 600×360、文字从 x=740 开始
   - 标题 600 字重、最多两行，字号 10px + 1.04vw、最小 18px（七个宽度逐个对得上）
   - 标题和按钮隔 40；按钮 100×39、1px 黑框；行与行隔 40；通栏图到第一行 88，翻页到页脚 88
   - 768 起上下叠（769 还是并排）：图满宽、高 60%，文字四周各留 30 */
.wp-site-blocks .rbs-list__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 块布局给子块的默认上间距清掉，间距全按上面的实测值给 */
.wp-site-blocks .rbs-list__items > li,
.wp-site-blocks .rbs-list__item > *,
.wp-site-blocks .rbs-list__text > *,
.wp-site-blocks .rbs-list__pager > * {
  margin-block: 0;
}
.rbs-list__item {
  display: flex;
  align-items: center;
}
.wp-site-blocks .rbs-list__thumb {
  flex: 0 0 40%;
  margin: 0;
}
/* 父主题给特色图加了圆角，旧官网是直角（和 Top News 缩略图那条同一回事） */
.wp-site-blocks .rbs-list__thumb a,
.wp-site-blocks .rbs-list__thumb img {
  display: block;
  border-radius: 0;
}
.wp-site-blocks .rbs-list__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}
/* 移上去图放大 1.1 倍、0.3s，**鼠标在这一行任何地方都算**（图、标题、空白处），放大的部分裁在图框里。
   旧官网实测（`scripts/probe_hover_shape_win.py list`，09-16）。它写的是 `transition: all`，
   但只有 transform 在变，写 transform 看起来一样。 */
.wp-site-blocks .rbs-list__thumb {
  overflow: hidden;
}
.wp-site-blocks .rbs-list__item:hover .rbs-list__thumb img {
  transform: scale(1.1);
}
.wp-site-blocks .rbs-list__text {
  flex: 0 0 48%;
  margin-left: 6%;
}
.wp-site-blocks .rbs-list__title {
  font-size: max(18px, calc(10px + 1.04vw));
  font-weight: 600;
  line-height: normal;
  color: #242424;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 链接改回行内：父主题给的是行内块，省略号截不进去（和 Top News 标题那条同理） */
.wp-site-blocks .rbs-list__title a {
  display: inline;
  color: inherit;
  text-decoration: none;
}
/* 鼠标移上去的黑底白字沿用 `.rbs-news-more:hover` 那条 */
.wp-site-blocks a.wp-block-read-more.rbs-list__more {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  min-width: 100px;
  margin-top: 40px;
  padding: 8px;
  border: 1px solid #000000;
  color: #000000;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  text-decoration: none;
}
/* 翻页：30×30 的方块，数字之间隔 6、箭头和数字隔 10，14px；当前页深色底白字；
   点不了的箭头是浅灰底灰字——那个占位是 functions.php 补的，核心区块自己不输出 */
.wp-site-blocks .rbs-list__pager {
  gap: 10px;
  margin-top: 40px;
}
.wp-site-blocks .rbs-list__pager .wp-block-query-pagination-numbers {
  display: flex;
  gap: 6px;
}
.wp-site-blocks .rbs-list__pager .page-numbers,
.wp-site-blocks .rbs-list__pager .wp-block-query-pagination-previous,
.wp-site-blocks .rbs-list__pager .wp-block-query-pagination-next {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  color: #8a8a8a;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.wp-site-blocks .rbs-list__pager .page-numbers.current {
  border-color: #222a35;
  background: #222a35;
  color: #ffffff;
}
.wp-site-blocks .rbs-list__pager .is-disabled {
  border-color: #f4f4f5;
  background: #f4f4f5;
  color: #c0c4cc;
}

@media (max-width: 768px) {
  .rbs-list__item {
    flex-direction: column;
    align-items: stretch;
  }
  .wp-site-blocks .rbs-list__thumb,
  .wp-site-blocks .rbs-list__text {
    flex: none;
  }
  .wp-site-blocks .rbs-list__text {
    margin-left: 0;
    padding: 30px;
  }
}

/* ===== 窄屏 ==============================================================
   实测原站（`scripts/probe_mobile_win.py` + `probe_mobile_menu_win.py`）：
   **769 显示、768 隐藏**——≤768 时导航、搜索框、语言按钮**三样全部 display:none**，
   页头只剩 199×70 的 logo 和右上角一颗 45×33 的汉堡。
   **汉堡点开只有三个导航词**，搜索框和语言按钮点开也不出现。
   769–890 之间它是两行（logo 一行、导航+搜索+语言另一行），900 以上才并成一行。

   我们跟它藏搜索框、跟它保留汉堡（core 的导航区块 ≤600 自己会收，一分钱不花），
   **只有语言按钮我们没藏**——双语切换是需求表里的条目，
   验收清单还有「切到英文站看导航栏」，藏了等于手机上这条做不到。
   要完全照搬原站，给 `.wp-site-blocks > header .wp-block-buttons` 补一条
   `display:none` 就是了。                                                */

/* 390 视口下曾经横向溢出 58px：页头右侧那组（汉堡 24 + 搜索 234 + EN 73 + 间距）
   宽 404，而内容列只有 366，logo 被 flex 挤成 0 宽。搜索框一藏就够了。 */
@media (max-width: 768px) {
  .wp-site-blocks > header .wp-block-search {
    display: none;
  }
  /* 通栏大图在这个断点上从 400px 矮到 200px（原站实测，769 及以上一直是 400） */
  figure.wp-block-image.rbs-page-banner img {
    height: 200px;
  }
  /* 首屏：原站在同一个断点上把标题从 60px 降到 24px、短横线从 60px 降到 25px，
     MORE + 按钮不变。**字号得用 `!important`**——区块的字号是内联样式，
     选择器再特异也压不过它。这是块编辑器下做断点的固有代价。 */
  .wp-block-cover__inner-container > h1.wp-block-heading {
    font-size: 24px !important;
  }
  /* 轮播第 2 帧起标题是 H2（一页只留一个 H1），上面那条只认 h1，得给它补一条。
     只管首页首屏，和下面 16:9 那条一样排除二三级页的页头（`rbs-page-hero`）。 */
  .wp-block-cover:not(.rbs-page-hero) > .wp-block-cover__inner-container > h2.wp-block-heading {
    font-size: 24px !important;
  }
  .wp-block-cover__inner-container > .wp-block-separator {
    width: 25px;
  }
  /* 首屏高度：**原站在手机上不是满屏，就是视频本身的 16:9**。
     390 视口下实测原站首屏 219px = 390 × 9/16，我们是 663px（`100vh` 撑的），
     差三倍——整屏都被首屏占掉，滚一下才看得到下一块。
     `56.25vw` 就是 16:9。`!important` 是因为高度写在区块的内联样式里。

     **只管首页那个首屏**：二三级页的页头（关于我们那张带字的底图）也是 cover 区块，
     不排除的话 390 下它会被一起压成 219px，而原站那儿是 406px。 */
  /* 黑底：390 下 56.25vw 是 219.375px，视频只画满 219 行，
     剩下不到 1px 的那行只盖着 20% 的黑色遮罩，透出白色页面底色，**首屏底边多出一条 #cccccc 的亮线**。
     把视频藏掉、再把遮罩藏掉逐层试过，是这么来的。垫一层黑底就看不见了。 */
  .wp-site-blocks .wp-block-cover:not(.rbs-page-hero) {
    min-height: 56.25vw !important;
    background-color: var(--wp--preset--color--rbs-black);
  }
  /* 轮播的箭头和分页点手机上不显示，照原站：390 下原站首屏里一个小元素都没有
     （`scripts/probe_hero_mobile_win.py` 按「宽高都 ≤60px 且可见」扫过）。
     不藏的话首屏只有 219px 高，左箭头压在标题和 MORE + 之间，分页点挨着 MORE + 的右下角。
     藏了照样能轮到第 2 帧——`hero-carousel.js` 每 6 秒自动翻。 */
  .rbs-hero-arrow,
  .rbs-hero-nav {
    display: none;
  }
  /* 页脚中间那三列（新闻动态 / 关于我们 / 联系我们+招贤纳士+业务合作）：
     **原站在同一个断点上把它们整个藏了**，390 下实测三个词全是 hidden，
     手机上的页脚只剩 logo、联系方式、社交图标、版权四块。
     我们不藏的话它们堆成一长条，页脚比原站高 241px。
     导航没丢——页头的汉堡里有同样三条。 */
  .wp-site-blocks > footer .wp-block-columns > .wp-block-column:nth-child(n+2):nth-child(-n+4) {
    display: none;
  }
  /* 页头上下留白：原站 1600 下页头高 80（logo 70 + 上下各 5），
     390 下高 90（上下各 10）。两个断点不一样，所以窄屏这里加回 5px。 */
  /* `!important` 是必须的：留白写在区块的内联样式里，类选择器压不过它。
     跟上面首屏字号那条是同一个原因。 */
  .wp-site-blocks > header > .wp-block-group {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media (max-width: 600px) {
  /* logo 不参与收缩——原站从 1920 到 390 一直是 199×70，不缩 */
  .wp-site-blocks > header .wp-block-image {
    flex: none;
  }
  /* 页头两组之间的间距收一收：390 下内容列 366，
     logo 200 + 汉堡 24 + EN 73 = 297，留给间距的只有 69px，原来的 1.8rem×2 是 58，
     太贴边。收到 1rem×2=32 才有余量 */
  .wp-site-blocks > header .wp-block-group {
    gap: 1rem;
  }
}