/* ============================================================
   本轮修订 · fixes.css
   ============================================================ */

/* ---- 1. 原则卡编号字体：衬线数字 700 在中文语境下显得生硬，
        换成等宽 + 更轻的字重，跟站内其他编号统一 ---- */
.principle-num {
  font-family: var(--font-mono);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 1rem;
}
.principle-card:hover .principle-num { opacity: 1; }

.principle-title {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

/* ---- 2. 「一些数字」区块：间距归零，避免与 #about 的下 padding 叠加 ----
   原因：#about 自身有底部 padding（约 9rem），这里若再给上 padding，
   两段之间会出现 240px 左右的空档。两者共用一个间距即可。 */
.stats {
  padding-top: 0;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
/* 数字区顶部的分隔线：靠一条 1px 线划分，而不是靠空白 */
.stats {
  border-top: 1px solid var(--border);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
/* #about 的下 padding 收窄：它后面紧跟数字区，不需要一个完整 section 的留白 */
#about { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.stats > .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---- 3. 关于 AI：每条下方的引用 ---- */
.ai-view-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 1.125rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ai-view-ref::before {
  content: '↗';
  font-size: 0.75rem;
  opacity: 0.6;
  flex: none;
}
.ai-view-ref:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
[data-palette="frost"] .ai-view-ref,
[data-palette="mist"]  .ai-view-ref { color: var(--fg-dim); opacity: 0.9; }

/* ---- 4. 关于我：背景换成更「产品」的形态
        术语水印保留但压暗，再加一层产品结构图形（流程节点 / 漏斗 / 坐标） ---- */
.sec-bg-schematic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  opacity: 0.14;
}
[data-palette="frost"] .sec-bg-schematic,
[data-palette="mist"]  .sec-bg-schematic { opacity: 0.18; }

/* 流程箭头：细虚线 + 缓慢流动的虚线偏移，像数据在管道里走 */
.schem-flow {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 3 5;
  fill: none;
  opacity: 0.5;
  animation: flowDash 24s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -160; } }

/* 节点圆点 */
.schem-node {
  fill: var(--bg-0);
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.7;
}
.schem-node-fill {
  fill: currentColor;
  opacity: 0.55;
  animation: schemPulse var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes schemPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } }

/* 柱状 / 漏斗轮廓：只描边，不填充 */
.schem-bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.34;
}
.schem-funnel {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.3;
}

/* 坐标轴刻度 */
.schem-axis {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.28;
}

/* 让术语水印退到第二层，不再当主角 */
#about > .sec-bg .sec-bg-word { opacity: 0.045; }
[data-palette="frost"] #about > .sec-bg .sec-bg-word,
[data-palette="mist"]  #about > .sec-bg .sec-bg-word { opacity: 0.04; }

@media (max-width: 900px) {
  .sec-bg-schematic { opacity: 0.1; }
  [data-palette="frost"] .sec-bg-schematic,
  [data-palette="mist"]  .sec-bg-schematic { opacity: 0.13; }
}

@media (prefers-reduced-motion: reduce) {
  .schem-flow,
  .schem-node-fill { animation: none; }
}

/* ============================================================
   项目区排版重构 · 第二部分
   ------------------------------------------------------------
   问题：featured 卡（展开成完整 case study）和普通卡混在同一行，
   右侧被拉到同高但内容少，底部大片空白，整体参差。
   改法：featured 卡独占整行；普通卡在下方的两列网格里排列；
   网格改成 align-items: start，卡片不再被强行拉高。
   ============================================================ */

/* 分组网格：普通卡两列，featured 独占整行。
   用 #projectGrid 前缀压过 projects-split.css 里的 auto-fill / 单列规则。 */
#projectGrid .pgroup-grid,
.pgroup .pgroup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem;
  align-items: start;
}
#projectGrid .pgroup-grid > .project-card.featured,
.pgroup .pgroup-grid > .project-card.featured {
  grid-column: 1 / -1 !important;
}

/* 卡片本身不再靠 stretch 拉高 */
.pgroup-grid > .project-card { height: auto; }

/* featured 卡内部：case study 三段在宽卡里横排更省高度 */
.pgroup-grid > .project-card.featured .case {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.75rem;
}

/* 普通卡：标签、标题、副标题、描述、指标的纵向节奏收紧一点，
   让两三行描述不至于把卡片撑得很高 */
.pgroup-grid > .project-card:not(.featured) {
  padding: 1.625rem;
}
.pgroup-grid > .project-card:not(.featured) .project-desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 占位卡（进行中）：高度与普通卡接近，虚线边框已由 projects-split.css 处理 */
.pgroup-grid > .project-card.placeholder { min-height: 0; }

/* 扑克组：三张卡并排（只有 3 个项目，一行铺满更好看）。
   必须带 #projectGrid 前缀 — 上面的 #projectGrid .pgroup-grid 有 ID 权重，
   同带 !important 时会压过纯 class 选择器。 */
#projectGrid .pgroup-poker .pgroup-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* 扑克组的卡都是普通卡，三列下文字收得更紧 */
#projectGrid .pgroup-poker .pgroup-grid > .project-card { padding: 1.375rem; }
#projectGrid .pgroup-poker .pgroup-grid > .project-card .project-name { font-size: 1.0625rem; }
#projectGrid .pgroup-poker .pgroup-grid > .project-card .project-desc { font-size: 0.875rem; line-height: 1.65; }

@media (max-width: 1100px) {
  #projectGrid .pgroup-poker .pgroup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #projectGrid .pgroup-grid,
  .pgroup .pgroup-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #projectGrid .pgroup-grid > .project-card.featured .case,
  .pgroup .pgroup-grid > .project-card.featured .case { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   数字区抬头：不用编号，改成一行 mono 小标语
   ============================================================ */
.stats-head { margin-bottom: 2.25rem; }
.stats-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0;
}
.stats-kicker::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 0.75rem;
  transform: translateY(-1px);
}

/* 数字区：数字与跑马灯上下排布，跑马灯贴着数字下方 */
.stats .stats-grid { margin-bottom: 2.5rem; }
.stats .marquee {
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}

@media (max-width: 900px) {
  .stats-head { margin-bottom: 1.5rem; }
  .stats .stats-grid { margin-bottom: 1.75rem; }
}


@media (max-width: 820px) {
  #projectGrid .pgroup-poker .pgroup-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* 原则卡是 #about 内最后一块，下边距收窄，避免和数字区的间距再次叠加 */
.principle-grid { margin-bottom: 0; }
.principle-card { padding-bottom: 0; }

@media (max-width: 900px) {
  #about { padding-bottom: clamp(2rem, 5vw, 3rem); }
  .stats { padding-top: clamp(2.5rem, 6vw, 3.5rem); }
}