/* ==========================================================
   resume-cards.css — 简历样式: 卡片层 (§4-§12) — Backlog #151
   ------------------------------------------------------------

   加载序: CSS 第 11 / 37 (index.html <head> 第 11 个 <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 相同 **且** 特异性相同时才起作用)

       本文件: 卡片层 (§4-§12)
         持有 .resume-section / .resume-card{,-list,-head,-body} / .resume-trigger
         / .fold-arrow / .tag-* / .item-* 等**卡片本体**样式。
         ⚠ 这些元素的实体在 4 个 <template> 里(resume-template-{education,
         experience, awards, skills}), **template 不渲染**, 直接在
         #section-resume 里 querySelector 一律找不到 —— 必须先
         window.ResumeModuleModal.open(type) 把 template clone 进
         #resume-module-modal 才量得到。(本轮验证脚本为此踩过一次假 FAIL)
   ========================================================== */
.resume-card-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}


/* ==========================================================
   5. 卡片本体 (Resume Card) — Backlog #78 v2 米白配色
   ------------------------------------------------------------
   8px 八角切角 + 4px 5px 0 硬投影 (浅色所以投影更弱) +
   0 8px 16px 软投影 + 米白 bg #f7f1e1
   hover: translateY(-2px) + 投影加深
   ========================================================== */
.resume-card {
    position: relative;
    background-color: var(--role-paper);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.04));
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: var(--space-9) 28px;
    box-shadow:
        4px 5px 0 rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    /* 八角切角 8px — 跟 project-card / experience-tag 视觉统一 */
    clip-path: polygon(
        8px 0%,
        calc(100% - 8px) 0%,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0% calc(100% - 8px),
        0% 8px
    );
}

.resume-card:hover {
    transform: translateY(-2px);
    box-shadow:
        5px 7px 0 rgba(0, 0, 0, 0.22),
        0 12px 20px rgba(0, 0, 0, 0.1);
}


/* ==========================================================
   6. 卡片头 / 体 (Resume Card Head + Body) — Backlog #78 v2
   ------------------------------------------------------------
   head: 横排 flex, tag 左 + date 右
   body: 默认折叠 (max-height: 0), is-active/is-pinned 时展开
   ========================================================== */
.resume-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-6);
    flex-wrap: wrap;
}

.resume-card-body {
    /* 默认折叠状态 */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
    border-top: 0 solid rgba(0, 0, 0, 0.08);
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease,
                padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                margin-top 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-top-width 0.3s;
}

/* 展开状态: hover (:hover 整张 card) 或 钉住 (is-pinned)
   [Backlog #93, 2026-09-17] 修 accordion 闪烁 bug:
   之前用 JS mouseenter/mouseleave 触发 is-active, 在 trigger button
   跟 card body 边界反复 fire 时序导致闪烁 + 自动收起. 改为纯 CSS
   :hover 整张 card (鼠标在 card 任何位置都展开, 离开自动收起),
   JS 只管 click 钉住 is-pinned (sticky 展开, 即使鼠标离开也保持). */
.resume-card:hover .resume-card-body,
.resume-card.is-pinned .resume-card-body {
    max-height: 5000px;
    opacity: 1;
    padding-top: 14px;
    margin-top: 14px;
    border-top-width: 1px;
}

/* [Backlog #93] arrow 旋转也跟 :hover 联动 (CSS 原生, 无闪烁) */
.resume-card:hover .fold-arrow,
.resume-card.is-pinned .fold-arrow {
    transform: rotate(225deg);
    border-color: rgba(0, 0, 0, 0.7);
}

/* [Backlog #93] 删除冗余 .is-active class 引用 (不再需要, :hover 接管)
   保留 is-active class 作为兼容 (不影响逻辑), 但不再触发展开 */


/* ==========================================================
   7. 时间轴段 (Resume Section)
   ========================================================== */
.resume-section {
    margin-bottom: 4rem;
    position: relative;
    padding-top: 1.5rem;
}

/* [Backlog #94 · 2026-09-17] Education 分两段 (Degree / Certificate)
   小标题 + 间距, 跟原来 .resume-modal-section-title 大标题区分 */
.resume-section-subtitle {
    font-family: var(--font-serif-tnr);
    font-size:var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin: 28px 0 14px;
    padding-left: var(--space-6);
    border-left: 3px solid rgba(0, 0, 0, 0.35);
    line-height: 1;
}
.resume-section-subtitle:first-child {
    margin-top: var(--space-6);
}
/* Certificate 段的卡用偏橙色 accent, 跟 Degree 段区别 */
.resume-card-certificate {
    border-left: 3px solid rgba(255, 159, 67, 0.5);
}

/*
   [Backlog #95 · 2026-09-17] Certificate 段卡尺寸紧凑 (用户原话: "certificate 相对含金量低所以小一点")
   区别: 默认 .resume-card padding 24px 28px / margin-bottom 由 .resume-card-list gap 控制
        .resume-card-compact padding 14px 18px + 字号略缩 + 投影略弱
        但保留卡内展开/折叠交互 (trigger 依然有效)
*/
.resume-card-compact {
    padding: 14px 18px;
    box-shadow:
        3px 4px 0 rgba(0, 0, 0, 0.15),
        0 5px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.resume-card-compact:hover {
    box-shadow:
        4px 6px 0 rgba(0, 0, 0, 0.18),
        0 9px 16px rgba(0, 0, 0, 0.08);
}
.resume-card-compact .item-title {
    font-size:var(--type-section-sm);     /* 1.15→1.05, 视觉轻一档 */
}
.resume-card-compact .item-sub {
    font-size: var(--type-body-sm);     /* 0.95→0.85 */
    margin-bottom: var(--space-2);
}
.resume-card-compact .resume-card-head {
    margin-bottom: var(--space-4);     /* 12→8 */
}
.resume-card-compact .resume-card-body {
    padding-top: var(--space-5);
    margin-top: var(--space-5);
}
.resume-card-compact:hover .resume-card-body,
.resume-card-compact.is-pinned .resume-card-body {
    padding-top: var(--space-5);
    margin-top: var(--space-5);
}

.section-tag {
    font-family: var(--font-sans);
    font-size: var(--type-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
    font-weight: 300;
}


/* ==========================================================
   8. 卡片内 — 标题 / 日期 / 子标题 (Title / Date / Sub) — 深色字
   ------------------------------------------------------------
   卡片内文字深色, 跟 #f7f1e1 米白 bg 形成对比
   ========================================================== */
.item-title {
    font-family: var(--font-display);
    font-size: var(--type-section-sm);
    color: rgba(10, 31, 36, 0.95);
    letter-spacing: 0.05em;
    font-weight: 300;
    margin: 0 0 var(--space-3) 0;
    line-height: 1.3;
}

.item-date {
    font-family: var(--font-sans);
    font-size: var(--type-body-sm);
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.1em;
    font-weight: 400;
    white-space: nowrap;
}

.item-sub {
    font-family: var(--font-sans);
    font-size:var(--type-body);
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: 0.05em;
    font-style: italic;
    margin: 0 0 var(--space-4) 0;
}


/* ==========================================================
   9. 体验标签 (Experience Tag, 4 种主题色)
   ------------------------------------------------------------
   沿用 Backlog #22 八角切角 4px 改造; 4 种主题色不变
   ========================================================== */
.experience-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px var(--space-6);
    font-size:var(--type-caption-sm);
    font-weight: 600;
    border-radius: 0;
    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
    );
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
    white-space: nowrap;
}

.tag-parttime {
    background: #0a2238;
    color: #58a6ff;
    border: 1px solid rgba(56, 139, 253, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.tag-school {
    background: #0a2614;
    color: #57ab5a;
    border: 1px solid rgba(46, 160, 67, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.tag-intern {
    background: #1f1233;
    color: #d3b6ff;
    border: 1px solid rgba(187, 128, 255, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.tag-award {
    background: #2a1f0a;
    color: #ffc154;
    border: 1px solid rgba(255, 193, 84, 0.5);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* === Education 3 段分色 (Backlog #80 v2) ===
   Master / Exchange / Bachelor 视觉区分 — 跟现有 4 种 tag 同样的"暗底+亮字"风格
   暗深 teal (Master) / 暖橙 (Exchange) / 深玫红 (Bachelor) */
.tag-master {
    background: #0a2832;
    color: #5fb4c4;
    border: 1px solid rgba(95, 180, 196, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.tag-exchange {
    background: #2a1a0a;
    color: #ff9f43;
    border: 1px solid rgba(255, 159, 67, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.tag-bachelor {
    background: #2a0a14;
    color: #ff6b8a;
    border: 1px solid rgba(255, 107, 138, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
/* [Backlog #94 · 2026-09-17] Certificate 段: 暗绿 / 林业色, 跟 tag-master teal 系不同 (更"自然") */
.tag-certificate {
    background: #0a2a14;
    color: #5fd49a;
    border: 1px solid rgba(95, 212, 154, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* [Backlog #110] 个人项目标签 — 薄荷绿, 刻意跟 tag-award 的琥珀 / tag-school 的草绿拉开色相 */
.tag-personal {
    background: #0d1f1c;
    color: #7fd6bb;
    border: 1px solid rgba(127, 214, 187, 0.5);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* [Backlog #114] 志愿服务标签 — 赤陶, 跟已有 8 种标签色相全部错开 */
.tag-volunteer {
    background: #2a1208;
    color: #e8916a;
    border: 1px solid rgba(232, 145, 106, 0.5);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}


/* ==========================================================
   10. 触发器 (Resume Trigger) — Backlog #78 v2 恢复
   ------------------------------------------------------------
   卡片底部的"展开/折叠"按钮, 鼠标悬浮自动展开, 点击钉住.
   Backlog #78 v2: 不显示 "Details" 文字, 只留 fold-arrow 视觉指示.
   整行 cursor: pointer, hover opacity 减弱表示可点.
   ========================================================== */
.resume-trigger {
    /* button reset */
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-5) 0 var(--space-2) 0;
    margin-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: opacity 0.3s ease;
    text-align: left;
}

.resume-trigger:hover {
    opacity: 0.65;
}

.resume-trigger:focus {
    outline: none;
}

.resume-trigger:focus-visible {
    outline: 2px solid rgba(0, 80, 100, 0.5);
    outline-offset: 2px;
}

/* Backlog #78 v2: 隐藏 "Details" 文字, 只留 fold-arrow */
.resume-trigger-hint {
    display: none;
}


/* ==========================================================
   11. 折叠箭头 (Fold Arrow) — Backlog #78 v2 恢复
   ------------------------------------------------------------
   旋转 45° 默认 (右指), 展开时旋转 225° (下指)
   颜色: 卡片米白 bg 上用深色边框 (rgba(0,0,0,0.4))
   ========================================================== */
.fold-arrow {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 1.5px solid rgba(0, 0, 0, 0.4);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.4);
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s ease;
    margin-right: var(--space-2);
}

.resume-trigger:hover .fold-arrow {
    border-color: rgba(0, 0, 0, 0.7);
}

.resume-card.is-active .fold-arrow,
.resume-card.is-pinned .fold-arrow {
    transform: rotate(225deg);
    border-color: rgba(0, 0, 0, 0.85);
}


/* ==========================================================
   12. 项目列表 (Item Bullet List) — 深色字
   ------------------------------------------------------------
   卡片内: 文字深色, 跟米白 bg 对比
   ========================================================== */
.item-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-bullet-list li {
    position: relative;
    padding-left: var(--space-7);
    margin-bottom: var(--space-6);
    font-family: var(--font-sans);
    font-size:var(--type-body-sm);
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.65);
    letter-spacing: 0.01em;
    text-align: justify;
    white-space: normal;
}

.item-bullet-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.35);
}

.item-bullet-list strong {
    color: rgba(0, 0, 0, 0.95);
    font-weight: 500;
    letter-spacing: 0.04em;
}


/* ==========================================================