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

   [Backlog #152 · 2026-10-01] 作品集基础层又拆成 4 个 (grid / card / entry /
       card-entry), 本文件仍是**作品集层的最后一个** —— 它是纯覆盖层, 必须排在
       全部 4 个作品集基础层之后, 否则同等特异度的属性会被基础规则反覆盖。
       本文件含 15 个 @media, **不含任何 !important**, 与 4 个基础层无冲突。

       下面的顺序表改为**从 index.html 实测生成**, 不再手写 —— #148 时手写的
       "共 24 个 CSS" 到现在已过期成 31, 手写必漂移 (#151 已因同一原因
       在 resume-responsive.css 上重做过一次)。

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


/* ==========================================================
   1. @media (max-width: 1279px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 155 行, 迁至本文件。
   ========================================================== */
@media (max-width: 1279px) {
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="2"],
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="3"] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        gap: 14px !important;
        justify-items: center;
        align-content: center;
    }
    /* 释放 nth-child 显式定位 → 回到 auto flow (纵向顺序堆叠) */
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="2"] .project-card:nth-child(1),
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="2"] .project-card:nth-child(2),
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="3"] .project-card:nth-child(1),
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="3"] .project-card:nth-child(2),
    #section-portfolio .portfolio-theme-cluster[data-cluster-count="3"] .project-card:nth-child(3) {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: center !important;
        align-self: center !important;
    }
    /* 1 列后可用宽度变大 → 卡片上限从 150px 放宽到 200px, 避免留大片空白 */
    #section-portfolio .project-card.clustered-card {
        width: 200px !important;
        max-width: 100% !important;
    }
    /* 堆叠后高度由内容决定, 取消固定 min-height 免得大片空白 */
    #section-portfolio .portfolio-theme-cluster {
        min-height: 0 !important;
        padding: var(--space-8) 14px var(--space-9);
    }
}

/* ==========================================================
   2. @media (max-width: 1279px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 515 行, 迁至本文件。
   ========================================================== */
@media (max-width: 1279px) {
    #section-portfolio .portfolio-grid--architecture {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        gap: 14px !important;
        max-width: 760px !important;
    }
    /* 各 theme 跨 1 列 (2 列布局), 释放显式 grid-row 让 auto-flow 排 */
    #section-portfolio .portfolio-theme-cluster[data-cluster="P"],
    #section-portfolio .portfolio-theme-cluster[data-cluster="M"],
    #section-portfolio .portfolio-theme-cluster[data-cluster="S"],
    #section-portfolio .portfolio-theme-cluster[data-cluster="C"],
    #section-portfolio .portfolio-theme-cluster[data-cluster="O"] {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    #section-portfolio .portfolio-theme-cluster {
        min-height: 400px !important;
    }
    /* [Backlog #108 续 / Phase 3 v2] AI Lab 保持右对齐 */
    #section-portfolio .portfolio-grid--ai {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 320px !important;
        margin-left: auto !important;
    }
}

/* ==========================================================
   3. @media (max-width: 899px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 543 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* [v4] ≤899px: 2 列 → 1 列, 每个 theme 框独占一行 (卡片可用宽度最大化) */
@media (max-width: 899px) {
    #section-portfolio .portfolio-grid--architecture {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--space-6) !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   4. @media (max-width: 767px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 551 行, 迁至本文件。
   ========================================================== */
@media (max-width: 767px) {
    #section-portfolio .portfolio-grid--architecture {
        gap: var(--space-5) !important;
    }
    #section-portfolio .portfolio-theme-cluster {
        min-height: 0 !important;
    }
    #section-portfolio .portfolio-grid--ai {
        max-width: 100% !important;
    }
}

/* ==========================================================
   5. @media (orientation: landscape)
   ------------------------------------------------------------
   [Backlog #148] 以下整节从 portfolio-grid.css §5 迁出, 分节头与说明注释一并逐字搬运。
   ========================================================== */
/* ==========================================================
   5. 网格 / 卡片的精确响应式断点 (orientation / 1440 / 1024-1439 / 600-1023 / 599 / 360)
   ------------------------------------------------------------
   【Backlog #30 · 卡片宽度自适应 + 日期完整可见】
   · 所有断点去掉 aspect-ratio + max-height 锁死高度,
     改为用 min-height 做视觉下限 + flex 自然增长
   · 关键: .project-meta { flex-shrink: 0 } 保证日期永远不被裁
   · 重新排布 (rearrange) 策略:
       横屏 / ≥1440px   → 4 列 (卡片较小, 内容紧凑)
       1024-1439px      → 2-3 列拆断点 (中等宽度友好)
       600-1023px       → 2 列 (大 logo + meta 充足)
       竖屏 / ≤599px    → 1-2 列 (meta 区不被裁)
       ≤360px           → 1 列 (logo 缩小防止溢出)
   ========================================================== */

/* 横屏模式 (任何宽度 + landscape) — 4 列, 卡片略扁, 减少横向空白 */
@media (orientation: landscape) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--space-5) !important;
    }
    .project-card {
        /* 横屏 4 列卡片窄, 用 min-height 控制下限, 不锁 aspect-ratio */
        min-height: 165px !important;
        padding: var(--space-4) !important;
    }
    .project-logo-wrapper {
        /* 横屏 4 列卡片很扁, wrapper 也跟着压扁 */
        height: clamp(95px, 12vw, 130px) !important;
        min-height: 90px !important;
        margin-bottom: var(--space-2) !important;
    }
    .project-logo {
        width: clamp(65px, 8vw, 90px) !important;
        height: clamp(65px, 8vw, 90px) !important;
    }
    .life-collage-card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .life-collage-card-grid #marathon-card,
    .life-collage-card-grid #photography-card {
        grid-column: span 2 !important;
    }
    .life-collage-card-grid #travel-card,
    .life-collage-card-grid #finance-card {
        grid-column: span 1 !important;
    }
}

/* ==========================================================
   6. @media (orientation: portrait)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 913 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 竖屏模式 (任何宽度 + portrait) — 2 列, 每张卡片更宽更舒展 */
@media (orientation: portrait) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-6) !important;
    }
    .project-card {
        /* 竖屏卡片较高, min-height 给 logo + meta 充足空间 */
        min-height: 240px !important;
        padding: var(--space-6) var(--space-5) !important;
    }
    .project-logo-wrapper {
        height: clamp(140px, 20vw, 200px) !important;  /* 缩: 240→200, 给 meta 留 ~80px */
        min-height: 130px !important;
        margin-bottom: var(--space-4) !important;
    }
    .project-logo {
        width: clamp(105px, 16vw, 160px) !important;  /* 缩: 180→160 */
        height: clamp(105px, 16vw, 160px) !important;
    }
}

/* ==========================================================
   7. @media (min-width: 1440px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 936 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 大屏: ≥1440px — 4 列 */
@media (min-width: 1440px) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 14px !important;
        max-width: 1380px;
        margin-left: auto;
        margin-right: auto;
    }
    /* [Backlog #108 续 / Phase 3 · 2026-09-29] Architecture Studio 保持 3+2 马赛克 + 右对齐,
       排除在 .portfolio-grid/.content-grid 通用 4 列居中规则外.
       [v3] gap 保持 0 (边框相接), 列宽上限 1140px 防止超宽屏卡片过大稀疏 */
    .portfolio-grid--architecture {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0 !important;
        max-width: 1140px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .project-card {
        /* 大屏 4 列: 卡较窄, 用 min-height 200px 保证 meta 完整 */
        min-height: 200px !important;
    }
    /* logo 由 base clamp() 接管, 这里不再覆盖 */
}

/* ==========================================================
   8. @media (min-width: 1024px) and (max-width: 1279px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 964 行, 迁至本文件。
   ========================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .project-card {
        min-height: 220px !important;
        padding: var(--space-6) var(--space-5) !important;
    }
    .project-logo-wrapper {
        height: clamp(120px, 14vw, 160px) !important;  /* 略减, 给 meta 留 ~80px */
        min-height: 110px !important;
        margin-bottom: var(--space-4) !important;
    }
    .project-logo {
        width: clamp(95px, 12vw, 135px) !important;
        height: clamp(95px, 12vw, 135px) !important;
    }
}

/* ==========================================================
   9. @media (min-width: 1280px) and (max-width: 1439px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 987 行, 迁至本文件。
   ========================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-6) !important;
    }
    .project-card {
        min-height: 210px !important;
    }
    .project-logo-wrapper {
        height: clamp(110px, 13vw, 150px) !important;  /* 调小, 给 meta 留 ~70px */
        min-height: 100px !important;
    }
    .project-logo {
        width: clamp(85px, 10vw, 120px) !important;
        height: clamp(85px, 10vw, 120px) !important;
    }
}

/* ==========================================================
   10. @media (max-width: 599px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 1009 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 手机: <600px — 1 列 (横向, 不要让卡片太瘦长) */
@media (max-width: 599px) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
    .project-card {
        min-height: 200px !important;
        padding: var(--space-6) !important;
    }
    .project-logo-wrapper {
        height: clamp(110px, 28vw, 170px) !important;
        min-height: 100px !important;
        margin-bottom: var(--space-3) !important;
    }
    .project-logo {
        width: clamp(85px, 20vw, 130px) !important;
        height: clamp(85px, 20vw, 130px) !important;
    }
}

/* ==========================================================
   11. @media (min-width: 600px) and (max-width: 1023px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 1031 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 平板 / 小桌面: 600-1023px — 2 列 (关键中等宽度区间) */
@media (min-width: 600px) and (max-width: 1023px) {
    .portfolio-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .project-card {
        min-height: 230px !important;
        padding: var(--space-6) var(--space-5) !important;
    }
    .project-logo-wrapper {
        height: clamp(130px, 20vw, 180px) !important;  /* 缩: 230→180, 给 meta 留 ~80px */
        min-height: 120px !important;
        margin-bottom: var(--space-4) !important;
    }
    .project-logo {
        width: clamp(100px, 16vw, 145px) !important;  /* 缩: 165→145 */
        height: clamp(100px, 16vw, 145px) !important;
    }
}

/* ==========================================================
   12. @media (max-width: 360px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 1053 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 极窄手机: <360px (iPhone SE 1 代) — logo 稍小防止溢出 */
@media (max-width: 360px) {
    .project-card {
        min-height: 180px !important;
    }
    .project-logo-wrapper {
        height: clamp(85px, 24vw, 100px) !important;
        min-height: 80px !important;
    }
    .project-logo {
        width: clamp(65px, 18vw, 80px) !important;
        height: clamp(65px, 18vw, 80px) !important;
    }
}

/* ==========================================================
   13. @media (max-width: 1279px) — 三入口卡中屏降两列
   ------------------------------------------------------------
   [Backlog #182 · 2026-10-04] 随入口卡从 2 张变 3 张, 中屏必须降一档。
   实测 (2026-10-04 复验, 别再按旧注释推算):
   .portfolio-entry-grid 走 shrink-to-fit (理由见 portfolio-card-entry.css 同名注释),
   宽度恒等于 max-content —— 三列 1026px / 两列 679px / 单列 331px, **不随视口缩**。
   所以本断点要解决的不是「卡被挤窄」(卡不会窄), 而是「窄视口装不下 1026px」:
     container 内容盒 = 视口×0.86 − padding-right 20, 要 ≥ 1026 才放得下三列
     → 临界视口 ≈ 1216px。1279 > 1216, 留了余量, 属于「从容」而不是「刚好」。
   降成两列后 max-content 679px, 实测 769px 档刚好装满 (container 内容盒 678), 再窄一档
   (768) 由下面第 14 档接成单列 —— 所以 768 这个既有刻度同时兜住了 769~767 的溢出。
   横向溢出已按 1280/1279/1100/900/850/812/811/800/769/768/600/480/360 十三档实测: 0 档溢出。
   断点选 1279 是跟本文件既有的 1279 / 1440 两档对齐, 不新造刻度。
   ========================================================== */
@media (max-width: 1279px) {
    .portfolio-entry-grid {
        grid-template-columns: repeat(2, 1fr);
        /* [Backlog #251] 880 → **760px**: 与该档建筑作品集网格的实测宽度一致
           (≤1279 档建筑网格是 2 列**内容驱动**, 实测 760px @1024~1279) ⇒ 边缘对齐。
           760 是**实测值**, 不是常量推导 —— 若作品集内容变了, 这里要跟着改
           (探针 _b255n_entryprobe 断言的是**两块网格边缘相等**, 不是这个数)。 */
        max-width: 760px;
    }
}

/* ==========================================================
   14. @media (max-width: 768px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 1272 行 (内嵌于基础节), 迁至本文件; 上方说明注释逐字搬运。
   ========================================================== */
/* 响应式: 双入口卡 768px 以下变 1 列 */
@media (max-width: 768px) {
    .portfolio-entry-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        /* [Backlog #154 · 2026-10-02] 宽屏改右对齐后, 窄屏单卡若继续 `margin-left:auto`
           会被推到最右、左侧整片留白。窄屏恢复居中 (左右都 auto) —— 断点区间与本文件
           既有 @media 一致, 只在本断点内覆盖, 不影响宽屏。 */
        margin: var(--space-9) auto var(--space-10) auto;
    }
    .entry-emoji { font-size: var(--icon-entry-lg); }
    .entry-title-en { font-size: var(--type-body-sm); }
}

/* ==========================================================
   15. @media (max-width: 480px)
   ------------------------------------------------------------
   [Backlog #148] 原 portfolio-grid.css 第 1280 行, 迁至本文件。
   ========================================================== */
@media (max-width: 480px) {
    .portfolio-subsection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .subsection-title-en { font-size: var(--type-body); }
}