/* ==========================================================
   resume-responsive.css — 简历响应式 + 覆盖节 (8 个 @media) — Backlog #147
   ------------------------------------------------------------
   物理拆分层, **不使用 CSS @import** —— file:// 协议下 Origin 为 null,
   @import 会被 CORS 静默拒绝且不报错, 整段样式丢失 (比 ES Module 白屏更难发现)。
   必须用独立 <link> 标签, 靠**标签顺序**保证「基础 → 覆盖」。

   [Backlog #151 · 2026-10-01] resume 基础层又拆成 4 个 (cards / toolkit /
       experience), 本文件仍是**简历层的最后一个** —— 它是纯覆盖层, 必须排在
       全部 resume 基础层之后, 否则同等特异度的属性会被基础规则反覆盖。
       本文件含 8 个 @media, **不含任何 !important**, 与 4 个基础层无冲突
       (属性级 + !important 级逐对验证, 6 对组合全部无冲突)。
       下面的顺序表改为**从 index.html 实测生成**, 不再手写 —— #147 时手写的

   加载序: CSS 第 14 / 37 (index.html <head> 第 14 个 <link>; 后加载的覆盖先加载的)
   ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
     (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
      加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
       (fonts.googleapis.com), 不参与层叠覆盖本站规则。
       「不写本文件总字节数」是项目铁律 —— 改数字本身会让数字自我漂移。
   ========================================================== */


/* ==========================================================
   1. @media (max-width: 700px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1117 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 窄屏: 模块头与分类行堆叠 */
@media (max-width: 700px) {
    .toolkit-module {
        padding: var(--space-7) 14px 14px 14px;
    }
    .toolkit-cat {
        flex-direction: column;
        gap: var(--space-2);
    }
    .toolkit-cat-label {
        flex: none;
        line-height: 1.5;
    }
}

/* ==========================================================
   2. @media (max-width: 700px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1237 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 窄屏: 分组头收紧, 去掉分隔线给文字留宽度 */
@media (max-width: 700px) {
    .exp-groups {
        gap: 1.8rem;
    }
    .exp-group-head {
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-4);
    }
    .exp-group-en {
        font-size: var(--type-body-sm);
        letter-spacing: 0.12em;
    }
    .exp-group-rule {
        display: none;
    }
    /* 换行后计数右推, 跟右对齐设计语言一致 (不用 margin-left:auto 在桌面端,
       因为桌面端 flex 布局里它本来就跟在分隔线后面) */
    .exp-group-count {
        margin-left: auto;
    }
}

/* ==========================================================
   3. @media (max-width: 560px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1415 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* [Backlog #118b3] ≤560px — 单行 chip 改纵向堆叠 (375px 下 flex 收缩会把 EN 压成一列) */
@media (max-width: 560px) {
    .resume-ext-link {
        flex-direction: column;
        align-items: stretch;
    }
    .resume-ext-title {
        flex: none;
        flex-wrap: wrap;
        gap: 0 var(--space-4);
    }
    .resume-ext-cn {
        white-space: normal;
    }
    .resume-ext-date {
        margin-left: 0;
        padding-left: 0;
        text-align: right;
    }
}

/* ==========================================================
   4. @media (max-width: 1280px)
   ------------------------------------------------------------
   [Backlog #147] 以下整节从 resume.css §16 迁出 (原第 1589-1798 行),
   连同其上方分节头与本行注释一起**逐字搬运**, 未做任何改写。
   ========================================================== */
/* ==========================================================
   16. 响应式断点 (Resume @media max-width)
   ========================================================== */

/* 中等屏 (≤1280px) — 卡片 padding 略缩, 标题字号略缩 */
@media (max-width: 1280px) {
    .resume-card {
        padding: 22px var(--space-9);
    }
    .item-title {
        font-size:var(--type-section-sm);
    }
    .resume-module {
        min-height: 300px;  /* v5: 260→300, 配合 v5 整体拉高 */
    }
    .resume-module-base {
        left: 16px;
        bottom: 16px;
        width: calc(50% - 20px);  /* v5: 跟桌面一致 50% */
        min-height: 80px;
        padding: 14px 18px;
    }
    .resume-module-floaters {
        top: 16px;
        right: 16px;
        width: calc(55% - 20px);
    }
    .resume-module-card {
        width: 86px;  /* v5: 74→86 */
        height: 118px;
        padding: 9px var(--space-5);
    }
    .resume-module-number {
        font-size: var(--type-title);
    }
    .floater-name { font-size:var(--type-caption-sm); }
    .floater-year { font-size: var(--type-micro-sm); }
    .floater-sub { font-size: var(--type-micro-sm); }
}

/* ==========================================================
   5. @media (max-width: 900px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1630 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 简历纵向布局 (≤900px) — 1 列 grid, 模块内空间重分配 */
@media (max-width: 900px) {
    .resume-layout {
        flex-direction: column !important;
        align-items: stretch !important;     /* [Bugfix 2026-09-15] column 模式下 stretch cross-axis, 防止 .resume-content 塌成 2px */
        gap: 1.5rem !important;
    }
    .resume-content {
        width: 100%;                        /* [Bugfix 2026-09-15] 双保险, 覆盖 align-items flex-start 历史 */
        max-width: none;                    /* 解除 1100px 上限, 让小屏不被限制 */
    }
    .resume-content > .resume-section:first-child {
        padding-top: 2.5rem;
        margin-top: 1rem;
    }
    .resume-card {
        padding: var(--space-8) 22px;
    }
    .item-title {
        font-size: var(--type-body);
    }
    .award-media-box {
        max-width: min(480px, 100%);
    }
    .award-preview-img {
        max-height: 340px;
    }
    .resume-module-grid {
        grid-template-columns: 1fr;
        max-width: none;                    /* 解除 1000px 上限, 让 ≤900px 全宽 */
    }
    /* Backlog #80 v5: 1 列后模块变宽, 浮卡可以更大, base 仍然 50% 当"卡包"标签 */
    .resume-module {
        min-height: 320px;
        width: 100%;                        /* [Bugfix 2026-09-15] button 默认 width: auto 在 grid 1fr 不会自动 stretch, 显式 100% */
    }
    .resume-module-base {
        width: calc(50% - 24px);
        min-height: 90px;
    }
    .resume-module-floaters {
        width: calc(55% - 24px);
    }
    .resume-module-card {
        width: 96px;
        height: 130px;
        padding: var(--space-5) 11px;
    }
}

/* ==========================================================
   6. @media (max-width: 768px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1680 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 完全纵向 (≤768px) — 卡片紧凑, 触发器紧凑 */
@media (max-width: 768px) {
    .resume-layout { flex-direction: column; align-items: stretch; gap: 1.5rem; }   /* [Bugfix 2026-09-15] stretch cross-axis, 防止塌 2px */

    .resume-content > .resume-section:first-child {
        padding-top: 1rem;
        margin-top: 0;
    }
    .resume-card {
        padding: 18px var(--space-8);
    }
    .resume-card-head {
        gap: var(--space-4);
    }
    .item-title {
        font-size:var(--type-body);
    }
    .item-date {
        font-size: var(--type-caption);
    }
    .item-sub {
        font-size: var(--type-body-sm);
    }
    .resume-trigger {
        padding: var(--space-4) 0 var(--space-1) 0;
    }
    .award-media-box {
        max-width: 100% !important;
    }
    .award-preview-img {
        max-height: 300px !important;
    }
    .resume-module {
        min-height: 300px;  /* v5: 240→300 */
        width: 100%;         /* [Bugfix 2026-09-15] button 默认 width: auto 在 grid 1fr 不会自动 stretch */
    }
    .resume-module-base {
        left: 16px;
        bottom: 16px;
        width: calc(50% - 16px);
        min-height: 80px;
        padding: var(--space-6) var(--space-7);
        gap: var(--space-6);
    }
    .resume-module-floaters {
        top: 16px;
        right: 16px;
        width: calc(55% - 16px);
    }
    .resume-module-card {
        width: 80px;  /* v5: 68→80 */
        height: 110px;
        padding: var(--space-4) var(--space-5);
    }
    .resume-module-number {
        font-size: var(--type-title);
    }
    .resume-module-title {
        font-size: var(--type-section-sm);
    }
    .floater-name { font-size:var(--type-caption-sm); }
    .floater-year { font-size: var(--type-micro-sm); }
    .floater-sub { font-size: var(--type-micro-sm); }
}

/* ==========================================================
   7. @media (max-width: 480px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1745 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 极小屏 (≤480px) — 卡片进一步紧凑, 字号进一步缩 */
@media (max-width: 480px) {
    .resume-card { padding: var(--space-7) 18px; }
    .award-preview-img { max-height: 280px !important; }
    .resume-module { min-height: 280px; }  /* v5: 200→280 */
    .resume-module-base {
        left: 12px;
        bottom: 12px;
        width: calc(50% - 12px);
        min-height: 70px;
        padding: var(--space-5) var(--space-6);
    }
    .resume-module-floaters {
        top: 12px;
        right: 12px;
        width: calc(55% - 12px);
    }
    .resume-module-card {
        width: 64px;  /* v5: 58→64 */
        height: 92px;
        padding: var(--space-3) var(--space-4);
    }
    .resume-module-number { font-size:var(--type-title-sm); }
    .resume-module-title { font-size: var(--type-body); }
    .floater-name { font-size:var(--type-micro); }
    .floater-year { font-size: var(--type-micro-sm); }
    .floater-sub { font-size: var(--type-micro-sm); }
}

/* ==========================================================
   8. @media (max-width: 360px)
   ------------------------------------------------------------
   [Backlog #147] 原 resume.css 第 1774 行内嵌于 §13 / §13.7, 迁至本文件;
   上方紧邻的说明注释一并逐字搬运, 未做任何改写。
   ========================================================== */
/* 超小屏 (≤360px) — 卡片最紧凑, 浮卡贴近右边缘 */
@media (max-width: 360px) {
    .resume-module { min-height: 260px; }  /* v5: 180→260 */
    .resume-module-base {
        left: 10px;
        bottom: 10px;
        width: calc(50% - 10px);
        min-height: 60px;
        padding: var(--space-4) var(--space-5);
    }
    .resume-module-floaters {
        top: 10px;
        right: 10px;
        width: calc(55% - 10px);
    }
    .resume-module-card {
        width: 56px;  /* v5: 50→56 */
        height: 80px;
        padding: 5px var(--space-3);
    }
    .resume-module-number { font-size: var(--type-section); }
    .resume-module-title { font-size: var(--type-body); }
    .floater-name { font-size:var(--type-micro-sm); }
    .floater-year { font-size: var(--type-micro-sm); }
    .floater-sub { font-size: var(--type-micro-sm); }
}