/*
 * post-navigation.css — 文章页「前一篇 / 后一篇」导航的自有实现。
 *
 * 替代 elementor-pro/assets/css/widget-post-navigation.min.css（2,511 B，商业授权）。
 * **不是抄它的规则**，是照渲染结果重写：先用 tools/derive-css.mjs 量出那份样式表
 * 在本站的元素上究竟贡献了哪些计算属性，再用自己的写法达到同一结果
 * （docs/LICENSING.md 说的"按计算样式重写"）。
 *
 * 标记形状（121 篇文章共 3 种，差别只在缺 prev 或缺 next）：
 *
 *   .elementor-post-navigation                      ← 两栏 + 中缝
 *     .elementor-post-navigation__prev.__link         a > 箭头 + (标签/标题)
 *     .elementor-post-navigation__separator-wrapper   > .__separator（1px 竖线）
 *     .elementor-post-navigation__next.__link         a > (标签/标题) + 箭头
 *
 * ⚠️ **原件里有几条规则在本站是死的**，逐条实测过，不复刻：
 *   · `.elementor-post-navigation.elementor-grid` 的上下边框 —— 标记里 `elementor-grid`
 *     出现 **0 次**（那条规则要求两个类同时在），所以本站的这个组件**没有上下边框**。
 *   · `.post-navigation__arrow-wrapper i` 的 translateY —— 标记里没有 `<i>`（箭头是内联 svg），`<i` 出现 0 次。
 *   · `.e-font-icon-svg` 的 height —— 该类出现 0 次。
 *   照抄死规则不会错，但会把"本站到底长什么样"这件事继续藏在一份没人读的商业文件里。
 */

/* ── 容器：两栏并排，中间一条竖线 ───────────────────────────────────── */
.elementor-post-navigation {
  display: flex;
  overflow: hidden;
}

/* 每一栏占一半，减去中缝那 1px 的一半。**单行省略号**：标题很长时截断而不是换行，
   否则两栏高度不一致、整块会跟着长高。 */
.elementor-post-navigation .elementor-post-navigation__link {
  width: calc(50% - 0.5px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 中缝 ──────────────────────────────────────────────────────────── */
.elementor-post-navigation .elementor-post-navigation__separator-wrapper {
  text-align: center;
}
/* 竖线本身的样式挂在 widget 的 `-borders-yes` 变体上（原件如此，本站命中）。 */
.elementor-post-navigation-borders-yes .elementor-post-navigation__separator {
  width: 1px;
  height: 100%;
  margin: 0 auto;
  background-color: #d5d8dc;
}

/* ── 链接：箭头与文字横排、居中对齐、间距 15px ─────────────────────── */
.elementor-post-navigation .elementor-post-navigation__link a {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 100%;
}

/* ── 箭头 ──────────────────────────────────────────────────────────── */
.elementor-post-navigation .post-navigation__arrow-wrapper {
  display: flex;
  color: #d5d8dc;
  fill: #d5d8dc;
}
/* 30px 是箭头的**字号**，而 svg 的宽度写成 1em ⇒ 箭头尺寸由字号驱动。
   svg 自带 width/height 属性（24），这两条把它交回 CSS。 */
.elementor-post-navigation .post-navigation__arrow-wrapper.post-navigation__arrow-prev,
.elementor-post-navigation .post-navigation__arrow-wrapper.post-navigation__arrow-next {
  font-size: 30px;
}
.elementor-post-navigation .post-navigation__arrow-wrapper svg {
  width: 1em;
  height: auto;
}

/* ── 文字块：标签在上、标题在下 ─────────────────────────────────────── */
.elementor-post-navigation span.elementor-post-navigation__link__prev,
.elementor-post-navigation span.elementor-post-navigation__link__next {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.elementor-post-navigation .post-navigation__prev--label,
.elementor-post-navigation .post-navigation__next--label {
  font-size: 0.8em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elementor-post-navigation .post-navigation__prev--title,
.elementor-post-navigation .post-navigation__next--title {
  font-size: 0.7em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 右栏靠右 ──────────────────────────────────────────────────────── */
.elementor-post-navigation .elementor-post-navigation__next,
.elementor-post-navigation span.elementor-post-navigation__link__next {
  text-align: end;
}
.elementor-post-navigation .elementor-post-navigation__next a {
  justify-content: flex-end;
}