/* ==========================================================
   portfolio-entry.css — 作品集样式: §4 作品集网格 + 项目卡完整定义 — Backlog #152
   ------------------------------------------------------------

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

         portfolio-grid.css            第 1      19 条  §1  主题聚拢 (Theme Clustering)
         portfolio-card.css            第 2      17 条  §2-§3  项目卡本体 + 卡片扩展 FX
         portfolio-entry.css           第 3      44 条  §4  作品集网格 + 项目卡完整定义
         portfolio-card-entry.css      第 4      27 条  §5  入口卡 (STUDIO + LAB 双卡)
         portfolio-grid-responsive.css 第 5 最后   50 条  14 个 @media 响应式 + 覆盖节 (Backlog #148 已拆出, 本轮不动)

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

       ★ 加载顺序: 上面 5 层**必须按所标次序**排。四段基础层的相对顺序与
         拆分前的规则顺序**完全一致**, 所以拆分本身不改变任何属性的计算值。
         portfolio-grid-responsive.css 是纯覆盖层, 必须**最后**。

       ★ 层叠中性 (Backlog #152 实测): 拆成 4 段后用浏览器 CSSOM (http:// 下
         document.styleSheets) 取出**真实解析出的 107 条规则**, 对 819 个
         (selector, 声明属性) 组合逐一求"最终胜出声明", 比较拆分前后两种顺序 ——
         **零差异**。原因: 跨节重复的顶层选择器只有 .project-card /
         .project-logo-wrapper / .project-logo 三个, 且重叠处的声明都带
         `!important`, 而 !important 压过一切非 important 声明, 先后顺序不影响。
         (CSS: !important > 非 important; 同为 important 时才比顺序)

       本文件: §4 作品集网格 + 项目卡完整定义 (CSSOM 实测 44 条规则)
         持有 .content-grid / .portfolio-grid--{architecture,ai} /
         .project-card[data-watermark=*] / .project-card::before|::after /
         .project-{logo-wrapper,logo,meta,tag,title,date} / .tag-* 等
         **网格与卡片完整定义** (含 4 处内嵌 @media 之外的覆盖节)。
         这是四个基础层里规则最多的一层 (44 条, 带 59 个 !important)。
   ========================================================== */
/* ==========================================================
   4. 作品集网格 + 项目卡 (Portfolio Grid + Project Card 完整定义)
   ========================================================== */
.content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 缩小: 3 → 4 列, 卡片更小 */
    gap: 14px;  /* 缩小: 20px → 14px */
    width: 100%;
    margin-top: 30px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 缩小: 3 → 4 列, 卡片更小 */
    gap: 14px;  /* 缩小: 20px → 14px */
    width: 100%;
    margin-top: 30px;
}

/* [Backlog #108 续 / Phase 3 v3 · 2026-09-29] Architecture Studio 3+2 马赛克排版
   用户原话: "最宽的宽度下, theme 之间有空隙, 我不希望边框之间留空"
              "perception 主题... theme 的框边缘左边也尽量对齐, 尽量是方形一个整块, 左右的边缘都能对齐"

   方案: 6 列统一网格 + gap: 0 (边框直接相接, 无空隙)
     - 行 1: P / M / S 各占 2 列 (等宽, 左右边缘互相对齐)
     - 行 2:    C    /    O    各占 3 列 (各占行宽一半, 与上行总宽一致)
     - 行 1/行 2 总宽一致 (6 列 = 2+2+2 = 3+3) → 上下左右边缘完美对齐
     - P (1 卡) 占满 2 列 cell + min-height → 接近方形整块, 单卡居中

   [v3 关键] 选择器加 #section-portfolio 前缀提升特异性 (1,1,0) > (0,1,0):
     文件下方有大量旧媒体查询 (@media 1280-1439 / 600-1023 / 599 等) 对 .portfolio-grid
     设 grid-template-columns/gap !important, 同特异性下"后写者胜"会覆盖本规则.
     ID 前缀让本规则在所有断点下都稳定生效, 无需逐个媒体查询打补丁. */
#section-portfolio .portfolio-grid--architecture {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto;
    grid-template-areas: none !important;
    gap: 0 !important;                 /* 边框相接, 不留空隙 */
    max-width: 1080px !important;
    width: 100%;
    margin: 30px 0 0 auto !important;  /* 右对齐 */
}
/* 行 1: P / M / S 各占 2 列 (等宽, 边缘对齐) */
#section-portfolio .portfolio-theme-cluster[data-cluster="P"] { grid-column: span 2 !important; grid-row: 1 !important; }
#section-portfolio .portfolio-theme-cluster[data-cluster="M"] { grid-column: span 2 !important; grid-row: 1 !important; }
#section-portfolio .portfolio-theme-cluster[data-cluster="S"] { grid-column: span 2 !important; grid-row: 1 !important; }
/* 行 2: C / O 各占 3 列 (各占行宽一半, 与上行总宽一致) */
#section-portfolio .portfolio-theme-cluster[data-cluster="C"] { grid-column: span 3 !important; grid-row: 2 !important; }
#section-portfolio .portfolio-theme-cluster[data-cluster="O"] { grid-column: span 3 !important; grid-row: 2 !important; }

/* [Backlog #108 续 / Phase 3 v2 · 2026-09-29] AI Lab 右对齐 (跟 Architecture Studio 一致)
   旧: AI Lab 单卡在 .container 内居左, 跟 Architecture Studio 视觉重心不一致
   新: max-width: 320px (固定 1 张卡的 grid 宽度) + margin-left: auto (推到右边)
   1 work X1 占满 cluster (跟 P 一样是 1 卡 theme) */
#section-portfolio .portfolio-grid--ai {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 320px !important;
    width: 100%;
    margin: 30px 0 0 auto !important;  /* 右对齐, 跟 Architecture Studio 一致 */
    justify-content: end;
}

/* [Backlog #108 续 / Phase 3 v3 · 2026-09-29] 响应式:
   桌面 ≥1280px: 6 列 3+2 马赛克 (边框相接)
   平板 768-1279px: 2 列, 各 theme 跨 1 列, gap 恢复小值 (窄屏留呼吸, 防边框糊成一片)
   手机 <768px: 1 列
   卡片靠 width:100% + max-width:180px 自适应, 不需要按断点改卡片尺寸 */
/* [Backlog #108 续 / Phase 3 v4] 窄屏 theme 框再换行 (用户原话: "在窄屏可以 theme 的框再换行")
   ≤1279px: 6 列马赛克 → 2 列 (P/M 并排, S/C 并排, O 单独)
   ≤899px:  2 列 → 1 列 (每个 theme 框独占一行, 卡片可用宽度最大化) */
/* 缩小作品集卡片: 整体更紧凑, 让用户能看到更多网格 */
.project-card {
    display: flex;
    flex-direction: column;
    /* 莫兰迪浅色卡纸: 不再强制深色 #04161d, 让下方 :nth-child 配置生效 */
    background: #f5f5f7 !important;
    /* 取消数码圆角，改用刻刀切斜角 */
    border: none !important;
    border-radius: 0 !important;
    /* 缩小: padding 从 22px → 14px → 8px 10px */
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 5;
    /* Backlog #30: 去掉 aspect-ratio: 5/4 锁死高度,
       改用 flex 自然布局 (min-height 兜底), 让 .project-meta 永远不被裁 */
    min-height: 180px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    /* 浅色卡纸: 硬边切角投影 + 顶部高光 (与 interest-card 统一) */
    box-shadow:
        3px 4px 0px rgba(0, 3, 10, 0.18),
        0 6px 14px rgba(0, 3, 10, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;

    /* 八边形刻刀切角: 12px 斜切 */
    clip-path: polygon(
        12px 0%,
        calc(100% - 12px) 0%,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0% calc(100% - 12px),
        0% 12px
    );
    transform: translateZ(0);
    will-change: transform;

    /* 顶部描边主色 (CSS 变量) — 模拟卡纸顶面"受光高光" */
    --card-accent: rgba(0, 3, 10, 0.12);
}

/* === 莫兰迪浅色背景: 按项目分类匹配 (与 tag / logo / 水印同色系) === */
/* AI 紫 (X1 The Seagrass & Diver) — 浅薰衣草紫 */
.project-card[data-watermark="X1"] { background: #f3eef9 !important; --theme-color: #6b4d8a; }
/* Perception 橙 (P1 Natural Mirage) — 浅桃橘 */
.project-card[data-watermark="P1"] { background: #fbf2eb !important; --theme-color: #d97a1f; }
/* Monument 红 (M1 Super Ring / M2 Aqueduct Mirror) — 浅玫瑰 */
.project-card[data-watermark="M1"] { background: #fbf2f0 !important; --theme-color: #b31515; }
.project-card[data-watermark="M2"] { background: #fbf2f0 !important; --theme-color: #b31515; }
/* Sustainability 绿 (S1 / S2 / S3) — 浅薄荷青 */
.project-card[data-watermark="S1"] { background: #eff7f3 !important; --theme-color: #1f7a6a; }
.project-card[data-watermark="S2"] { background: #eff7f3 !important; --theme-color: #1f7a6a; }
.project-card[data-watermark="S3"] { background: #eff7f3 !important; --theme-color: #1f7a6a; }
/* Community 橄榄 (C1 TermiNODE / C2 Interlock) — 浅橄榄米 */
.project-card[data-watermark="C1"] { background: #f5f4e8 !important; --theme-color: #5e6a1c; }
.project-card[data-watermark="C2"] { background: #f5f4e8 !important; --theme-color: #5e6a1c; }
/* Other (O) — 浅冷灰 */
.project-card[data-watermark="O"]  { background: #f0f1f2 !important; --theme-color: #6a7378; }

/* === 编号水印: 使用每张卡自己的 data-watermark 属性 (X1 / P1 / M1 / M2 / S1 / S2 / S3 / C1 / C2 / O) === */
/* 现代排版: 字号接近占满卡片, 巨大但克制, logo 在前层清晰可见 */
.project-card::before {
    content: attr(data-watermark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    /* 用 rem 相对单位, 让水印随卡片字号比例缩放, 不依赖视口 vw */
    font-size: clamp(5rem, 8.5vw, 12rem);  /* 8~18rem → 5~12rem, 与卡片同比例, 不会再撑爆 */
    font-weight: 900;
    line-height: 0.85;                     /* 紧凑行高, 顶部对齐 */
    color: var(--theme-color, #4a5d8f);
    opacity: 0.10;                          /* 略提亮 0.09 → 0.10, 与卡片同色系更深一点 */
    pointer-events: none;
    user-select: none;
    z-index: 1;
    letter-spacing: -0.06em;                /* 更紧凑, 让两字符视觉上像整体 */
    text-transform: uppercase;
}

.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    border: 1px solid rgba(0, 3, 10, 0.12);
    clip-path: inherit;
    z-index: 2;
}

.project-card:hover {
    transform: translateY(-5px);
    /* 浅色 hover: 主投影加深, 高光更强 */
    box-shadow:
        5px 7px 0px rgba(0, 3, 10, 0.22),
        0 12px 24px rgba(0, 3, 10, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    --card-accent: var(--theme-color);
}

.project-card:hover::after {
    border-color: rgba(0, 3, 10, 0.22);
}

.project-card:has(.tag-monument):hover {
    --card-accent: rgba(179, 21, 21, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-perception):hover {
    --card-accent: rgba(255, 159, 67, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-sustainability):hover {
    --card-accent: rgba(16, 172, 132, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-community):hover {
    --card-accent: rgba(131, 149, 36, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card.ai-exploration-card:hover {
    --card-accent: rgba(187, 128, 255, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* 确保背景画布和粒子层允许鼠标事件穿透 */
canvas,
#canvas,
.background-container,
.particles-wrapper,
.diver-container {
    pointer-events: none !important;
}

.project-logo-wrapper {
    /* 智能响应式高度: 容纳大 logo (约卡片 70% 高) */
    height: clamp(110px, 14vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 3, 10, 0.08);
    margin-bottom: var(--space-3);
    overflow: hidden;  /* 防止 logo 放大时溢出 */
    position: relative;
    z-index: 2;          /* 高于 watermark z-index: 1 */
    flex: 1 1 0;         /* 占据剩余空间, 允许收缩让位给 meta */
    min-height: 80px;    /* 兜底: logo 至少 80px 可见 */
    max-height: 180px;   /* 兜底: 防 logo 撑爆卡片 */
}

.project-logo {
    /* 智能缩放: logo 占卡片 70% 宽高, 桌面最大 160px (避免撑爆卡片) */
    width: clamp(75px, 12vw, 160px);
    height: clamp(75px, 12vw, 160px);
    flex-shrink: 0;  /* 防止被 flex 容器压缩 */
    object-fit: contain;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
}

.project-card:hover .project-logo {
    transform: scale(1.05);
}

.project-meta {
    text-align: left;
    flex: 0 0 auto;                   /* 不拉伸, 仅由内容决定高度 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 5;                        /* 提至最高, 不被 watermark (z=1) 遮挡 */
    min-height: 56px;                  /* 兜底: tag (8.5) + title (13×2 = 26) + date (8) + gap 共 ~56px */
    flex-shrink: 0;                    /* 关键: 卡片高度不够时 meta 不收缩, 日期永远可见 */
    overflow: visible;                 /* 允许 title 换行后日期下移 */
}

/* 簇内卡片: 让 project-meta 在紧凑空间里也清晰 */
.project-card.clustered-card .project-meta {
    min-height: 60px;
    flex-shrink: 0;
    padding-bottom: var(--space-1);
}

/* 簇内卡片: 标题字号略小以适配紧凑空间 */
.project-card.clustered-card .project-tag {
    font-size:var(--type-micro-sm);
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
}
.project-card.clustered-card .project-title {
    font-size:var(--type-body-sm);
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    /* 簇内 title 最多 2 行, 避免挤掉日期 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.project-card.clustered-card .project-date {
    font-size: var(--type-micro-sm);
    line-height: 1.3;
    /* 簇内日期: 永不换行, 保证完整可见 */
    white-space: nowrap;
    overflow: visible;
    margin-top: var(--space-2);
}

.project-tag {
    font-size: var(--type-micro-sm);  /* 缩小: 10px → 8.5px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    position: relative;
    z-index: 3;          /* 高于 watermark z-index: 1 */
}

.tag-monument { color: #b31515 !important; }
.tag-perception { color: #d97a1f !important; }     /* 提亮以提升可读性 */
.tag-sustainability { color: #1f7a6a !important; } /* 提亮 */
.tag-community { color: #5e6a1c !important; }       /* 提亮 */
.tag-other { color: #6a7378 !important; }
.tag-ai { color: #6b4d8a !important; }            /* AI 紫 */

.project-title {
    font-size:var(--type-body-sm);  /* 缩小: 16px → 13px */
    color: #333333;        /* 浅色背景配深灰 */
    margin: 3px 0 0 0;  /* 缩小: 5px → 3px */
    font-weight: 600;     /* 提粗以提升可读性 (500 → 600) */
    letter-spacing: 0.03em;
    font-family: var(--font-display);
    position: relative;
    z-index: 3;          /* 高于 watermark */
    /* 关键: 允许 title 换行 (长标题如 "The Seagrass & Diver"),
       但日期不被裁 — 因为 .project-meta 设了 flex-shrink: 0 */
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* 最多 2 行 */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-date {
    display: block;
    font-size: var(--type-micro-sm);  /* 略提: 8px → 8.5px, 提升可读性 */
    color: #6a7378;        /* 浅色背景配深灰 */
    letter-spacing: 0.5px;
    margin-top: 3px;
    font-family: 'Cinzel', serif;
    /* 关键: 日期不换行, 永远单行完整显示 */
    white-space: nowrap;
    overflow: visible;
}


/* 平板横屏 / 笔记本: 1024-1279px — 2 列 (Backlog #16 中等宽度适配)
   关键: 1024-1279 视口下 3 列会让卡片 meta 区域被裁, 2 列保留完整标题 + logo 大 */
/* 笔记本 / 小桌面: 1280-1439px — 3 列 (Backlog #16 中等宽度适配)
   关键: 3 列下用 min-height 控底, 不锁 aspect-ratio, 让 meta 永远有 ~70px */
/* (原 768-1023px 2 列规则已被下方 600-1023px 规则替代, 这里删除以避免冲突) */