/* ==========================================================
   resume-experience.css — 简历样式: 经历分组 / Award / 翻转层 (§13.7 + §14 + §15) — Backlog #151
   ------------------------------------------------------------

   加载序: CSS 第 13 / 37 (index.html <head> 第 13 个 <link>; 后加载的覆盖先加载的)
   ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
     (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
      加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
   [Backlog #151 · 2026-10-01] **resume.css 按分节职责再拆一层。**
       #147 已把 8 个顶层 @media 迁到 resume-responsive.css; 本轮继续
       按**分节职责**把基础层切开, 从 1 个文件变成 4 个基础层 + 1 个响应式层:

         resume.css              第 1      §1-§3.5  布局 / 容器 / 模块预览
         resume-cards.css        第 2      §4-§12  卡片本体 / 头体 / 时间轴 / 标签 / 触发器 / 折叠
         resume-toolkit.css      第 3      §13-§13.6  技能组 / 双语排版 / Toolkit 双模块
         resume-experience.css   第 4      §13.7 经历分组 + 字体基线 + §14 Award + §15 翻转
         resume-responsive.css   第 5 最后   8 个 @media 响应式 + 覆盖节 (#147 已拆出, 本轮不动)

       ★ CORS 铁律: **禁 @import**。file:// 下 Origin=null, @import 会
         **静默失败、整段样式丢失**(不报错, 只是不生效)。必须多个独立
         <link> 靠标签顺序保证「基础 → 卡片 → Toolkit → 经历分组 → 响应式」。
         (禁 @import 的原因见 PROJECT_NOTES.md §13.1 零构建原则)

       ★ 加载顺序: 上面 5 层**全部按所标次序**排。resume-responsive.css 是
         纯覆盖层, 必须**最后** —— 靠标签顺序拿到"后写胜出"; 若被排到某个
         基础层之前, 同等特异度的属性会被基础规则反覆盖。

       ★ 顺序无关性: 本轮按**分节边界**切线, 迁出块**逐字搬运**, 行数守恒;
         已用属性级 + !important 级判据逐对验证 4 组共 6 对组合, **无冲突**,
         故相对顺序的改变不会影响任何属性的计算值。
         (order 只在 important 相同 **且** 特异性相同时才起作用)

       本文件: 经历分组 / Award / 翻转层 (§13.7 + §14 + §15)
         持有 .exp-groups / .exp-group* / .resume-ext-* / .award-media-box /
         .resume-modal / .content-section 等。
         .exp-group* 在 <template id="resume-template-experience">,
         .award-* 在 <template id="resume-template-awards">, 均需先 open(type)。
   ========================================================== */
.exp-groups {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.exp-group-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    margin-bottom: 1rem;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(0, 80, 100, 0.18);
}

.exp-group-index {
    font-family: var(--font-serif);
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(0, 0, 0, 0.3);
}

.exp-group-en {
    font-family: var(--font-serif);
    font-size: var(--type-body);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--role-sea);
    white-space: nowrap;
}

.exp-group-cn {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-size: var(--type-caption);
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

/* 弹性分隔线: 从有色渐隐到透明, 右对齐设计的视觉收口 */
.exp-group-rule {
    flex: 1;
    min-width: 12px;
    height: 1px;
    align-self: center;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.02));
}

.exp-group-count {
    font-family: var(--font-sans-latin);
    font-size: var(--type-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.32);
    white-space: nowrap;
}

/* 校园经历 — 紫 */
.exp-group--campus .exp-group-head {
    border-bottom-color: rgba(127, 60, 161, 0.2);
}
.exp-group--campus .exp-group-en {
    color: #7f3ca1;
}

/* 个人项目 — 海绿 */
.exp-group--project .exp-group-head {
    border-bottom-color: rgba(47, 125, 99, 0.2);
}
.exp-group--project .exp-group-en {
    color: #2f7d63;
}

/* 志愿活动 — 赤陶 (Backlog #114) 第四组配色, 跟前三组的冷色明确分开 */
.exp-group--volunteer .exp-group-head {
    border-bottom-color: rgba(176, 73, 44, 0.2);
}
.exp-group--volunteer .exp-group-en {
    color: #b0492c;
}

/* 卡片内地点行: 右对齐, 跟 .item-date 的右对齐语言一致 */
.item-loc {
    display: block;
    margin-top: 3px;
    text-align: right;
    font-family: var(--font-sans-latin);
    font-size: var(--type-caption-sm);
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.38);
}
.item-loc .resume-cn {
    display: block;
    margin-top: 1px;
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.04em;
}

/* [Backlog #118 · 2026-09-30] Education「华南理工大学 Degree」卡 4 个官网公示外链
   ------------------------------------------------------------
   场景: 用户提供 4 个 www2.scut.edu.cn/architecture 公示页链接
     (2023-10-30 / 2022-10-26 / 2022-10-12 / 2021-10-20),
     要挂到 SCUT Bachelor 卡下, 每个链接配一句简短备注 (对应什么公示内容).

   为什么不用 .resume-jump-link:
     - .resume-jump-link 是 <button>, 靠 data-jump-to 协议由 life-resume-jump.js
       协调跳到站内 Portfolio / Photography 模态
     - 这里是站外 http 链接, 走原生 <a target="_blank">, 不该进 ResumeJump 协调器
     - 但视觉语言要跟 jump chip 保持一致 (八角切角 + 纸雕底 + 深青边线),
       否则 Education 卡内两种 chip 风格割裂

   铁律合规:
     - 硬边 > 圆滑: 八角切角 4px clip-path, 无 border-radius
     - 纯色 > 渐变: 无 linear-gradient
     - 右对齐设计语言: 标题行用 flex space-between, ↗ 记号靠右

   职责:
     - .resume-ext-link      外链 chip 本体 (<a>)
     - .resume-ext-title     外链英文标题行 (跟 ↗ 记号同行)
     - .resume-ext-mark      右上 ↗ 外链记号
     - .resume-ext-date      右侧公示日期 (小号 / 浅色)
   ========================================================== */
.resume-ext-link {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    color: rgba(10, 31, 36, 0.95);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(10, 31, 36, 0.25);
    border-left: 3px solid rgba(0, 100, 120, 0.55);
    padding: 7px var(--space-6);
    line-height: 1.45;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    /* 八角切角 4px, 跟 .resume-jump-link / .experience-tag 一致 */
    clip-path: polygon(
        4px 0%,
        calc(100% - 4px) 0%,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0% calc(100% - 4px),
        0% 4px
    );
}
.resume-ext-link:hover {
    background-color: rgba(10, 31, 36, 0.92);
    border-color: rgba(10, 31, 36, 0.85);
    color: rgba(255, 224, 130, 0.95);
    transform: translateX(2px);
}
.resume-ext-link:hover .resume-ext-title,
.resume-ext-link:hover .resume-ext-date,
.resume-ext-link:hover .resume-ext-cn,
.resume-ext-link:hover .resume-ext-mark {
    color: rgba(255, 224, 130, 0.95);
}
.resume-ext-link:focus-visible {
    outline: 2px solid rgba(0, 80, 100, 0.6);
    outline-offset: 2px;
}
.resume-ext-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-sans-latin);
    font-size: var(--type-body-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(10, 31, 36, 0.95);
    transition: color 0.2s ease;
}
.resume-ext-cn {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
    font-size: 0.78em;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.resume-ext-link:hover .resume-ext-cn {
    color: rgba(255, 224, 130, 0.8);
}
.resume-ext-mark {
    font-size: var(--type-body-sm);
    color: rgba(0, 100, 120, 0.6);
    margin-left: var(--space-3);
    transition: color 0.2s ease;
}
.resume-ext-date {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: var(--space-6);
    white-space: nowrap;
    margin-top: 1px;
    font-family: var(--font-sans-latin);
    font-size: var(--type-caption);
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.45);
    transition: color 0.2s ease;
}
.resume-ext-link .resume-cn {
    margin-top: var(--space-1);
    color: rgba(0, 0, 0, 0.5);
}
.resume-ext-link:hover .resume-cn {
    color: rgba(255, 224, 130, 0.8);
}

/* ==========================================================
   Resume 中英文字体 / 字号统一基线 (Backlog #123 · 2026-09-30)
   ------------------------------------------------------------
   审计方法 (Playwright computed style, 4 板块全展开, 逐个叶子元素):
     ① 中文有 4 处 font-family 落到 -apple-system (无中文字形) →
        Windows 上回退宋体, 同屏出现"苹方 + 宋体"两种中文字形
          - .item-sub-cn  14.72px  校名 (香港中文大学) — 最刺眼, 字号也最大
          - .resume-jump-link 13.6px  混排 chip
          - .item-bullet-list li 13px   中英混排 bullet
          - 工具 chip 内 span 9.89px    Excel (Vlookup 等函数)
     ② 英文混进 Times New Roman (继承泄漏, 非设计):
          - .experience-tag 11px / .resume-trigger-hint 16px / bullet a 12.16px
          同级文字都是 sans, 只有这几处是衬线
     ③ 中文副行缩放比例逐处手调: 0.78 / 0.84 / 0.85 / 0.86 / 0.95 五种,
        同一语义 (.resume-cn) 实测跨板块出现 7 种绝对字号

   解决: 2 个变量 + 1 条双语字体栈
     --resume-bilingual-font
        一个 font-family 列表同时含中英字体. 浏览器逐字符回退:
        英文走 -apple-system (PingFang SC 无拉丁字形 → 自动落到下一项),
        中文走 PingFang SC. **混排元素只需要这一个栈**, 不用分别给中英文设字体.
        保留 Cinzel: 它是全站标题的 display 字体, 属设计语言, 不动.
     --resume-cn-scale
        中文副行统一 = 英文行 × 0.86. 原本 5 种比例手调, 现在一处可改.

   例外保留 (刻意, 不参与统一):
     - .resume-ext-cn 0.78em — chip 内联简称, 需更小才不挤爆单行
     - .toolkit-module-cn 0.95em — 模块标题级, 需接近英文标题
     - .resume-cn 挂在 .resume-modal-section-title 下时是板块大标题 (18.72px), 同理
   ========================================================== */

/* ---- 1. 变量定义 (挂在 resume 模态根上, 作用域最小) ---- */
.resume-modal {
    /* 双语字体栈: 中英混排元素统一用它, 浏览器逐字符回退 */
    --resume-bilingual-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
                             -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* 纯拉丁栈: 纯英文元素用, 排除 CJK 以免掩盖泄漏 */
    --resume-latin-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* 中文副行统一缩放比例 */
    --resume-cn-scale: 0.86;
}

/* ---- 2. 英文: 清除 Times New Roman 泄漏 ---- */
.resume-modal .experience-tag,
.resume-modal .resume-trigger-hint,
.resume-modal .item-bullet-list a,
.resume-modal .item-sublist a {
    font-family: var(--resume-latin-font);
}

/* ---- 3. 中文 / 中英混排: 统一到双语栈 ---- */
.resume-modal .item-sub-cn,
.resume-modal .resume-cn,
.resume-modal .exp-group-cn,
.resume-modal .toolkit-module-cn,
.resume-modal .toolkit-cat-cn,
.resume-modal .tool-name-cn,
.resume-modal .resume-ext-cn,
.resume-modal .item-bullet-list li,
.resume-modal .item-sublist li,
.resume-modal .tool-name,
.resume-modal .tool-level,
.resume-modal .resume-jump-link,
.resume-modal .resume-ext-link,
.resume-modal .resume-ext-title,
.resume-modal .resume-ext-date,
.resume-modal .resume-related-label {
    font-family: var(--resume-bilingual-font);
}

/* ---- 4. 中文副行: 统一缩放比例 ---- */
.resume-modal .resume-cn:not(.resume-ext-cn) {
    font-size: calc(1em * var(--resume-cn-scale));
}
.resume-modal .exp-group-cn {
    font-size: calc(1em * var(--resume-cn-scale));
}
.resume-modal .tool-name-cn {
    font-size: calc(1em * var(--resume-cn-scale));
}
.resume-modal .toolkit-cat-cn {
    font-size: calc(1em * var(--resume-cn-scale));
}
.resume-modal .item-sub-cn {
    font-size: calc(1em * var(--resume-cn-scale));
}

/* ---- 5. 板块大标题下的中文 (保持接近标题, 不适用 0.86) ---- */
.resume-modal-section-title + .resume-cn,
.resume-modal .resume-module-title-cn {
    font-size: 0.95em;
    letter-spacing: 0.06em;
}



/* ==========================================================
   14. Award 媒体盒 (Award Media Box + Preview + Placeholder Tip)
   ========================================================== */
.award-media-box {
    margin-top: 15px;
    width: 100%;
    max-width: min(600px, 100%);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.award-preview-img {
    width: 100%;
    max-height: 420px;
    display: block;
    object-fit: contain;
    object-position: center top;
    filter: brightness(0.95) contrast(1.05);
    background: rgba(0, 0, 0, 0.08);
}

.image-placeholder-tip {
    padding: var(--space-6);
    font-size:var(--type-caption-sm);
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.5);
}


/* ==========================================================
   15. 奇数 Section 排版翻转 (Odd Section Layout Flip)
   ========================================================== */
.content-section:nth-of-type(odd) .resume-layout {
    justify-content: flex-end;
}

.content-section:nth-of-type(odd) .resume-content,
.content-section:nth-of-type(odd) .resume-section,
.content-section:nth-of-type(odd) .skill-group,
.content-section:nth-of-type(odd) .interest-item {
    text-align: right;
}

.content-section:nth-of-type(odd) .award-media-box {
    margin-left: auto;
    margin-right: 0;
}