/* =============================================================================
   双语第二行 · css/bilingual.css
   -----------------------------------------------------------------------------
   只管一件事：中文下面那行英文长什么样。字号比中文小、颜色压淡、透明度降低，
   不抢主体视觉；深浅两套主题各一档；窄屏靠 overflow-wrap 兜住不溢出。
   · 字号用 clamp(10.5px, .72em, 15px)：跟着各自中文元素的字号缩，但大标题下面
     不会跟出一行 26px 的巨字，正文下面也不会小过 10.5px。
   · 显式写 color 与 -webkit-text-fill-color：有些页头大标题是渐变字
     （background-clip:text + color:transparent），子元素继承了会直接变透明看不见。
   · 只加 margin，不加 padding/border/height，父级卡片排版不受挤压。
   ============================================================================= */

.pair-en {
  display: block;
  margin: .3em 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-apple, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif);
  font-size: clamp(10.5px, .72em, 15px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: .005em;
  text-align: inherit;
  text-transform: none;                       /* 父级常是 uppercase 的 kicker，英文行不跟着全大写 */
  text-decoration: none;
  white-space: normal;
  color: #5c6b82;                             /* 浅色主题：白卡 5.41:1（原靠 opacity .74 压淡，改为显式色） */
  -webkit-text-fill-color: #5c6b82;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  line-height: 1.5;
  overflow-wrap: anywhere;
  hyphens: auto;
}

[data-theme="dark"] .pair-en {
  color: #9aa8bd;                             /* 深色主题：卡上 7.16:1（原靠 opacity .62 压淡，改为显式色） */
  -webkit-text-fill-color: #9aa8bd;
}

/* 被行数截断的元素，英文插在它后面（不在框里，免得被 clamp 切掉） */
.pair-en--after { margin: .22em 0 0; }

/* 标题下面留多一点呼吸；小字元素（11~12px）下面不再缩，直接给到下限 */
h1 > .pair-en, h2 > .pair-en { margin-top: .42em; letter-spacing: .01em; }
h3 > .pair-en, h4 > .pair-en { margin-top: .34em; }

/* 手机端：行高收紧，避免双行把卡片撑得太散 */
@media (max-width: 640px) {
  .pair-en { line-height: 1.45; margin-top: .26em; }
  h1 > .pair-en, h2 > .pair-en { margin-top: .34em; }
}

/* 打印不带英文行（与背景图同一口径：纸面上不留装饰） */
@media print {
  .pair-en { display: none; }
}