/* =====================================================================
 * zine-project-override.css — 将现有 project-detail 元素转换为 zine 风格
 * 
 * 在不修改 HTML 结构的前提下，通过 CSS 覆盖实现 zine 美学
 * ===================================================================== */

/* ===== 1. Hero 区域 zine 化 ===== */
.detail-hero {
  min-height: 80vh !important;
  padding: 12vh 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

.detail-hero::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 15%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--zine-accent-light, rgba(123, 167, 166, 0.1)) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
}

.detail-hero-inner {
  flex-direction: column !important;
  align-items: center !important;
  max-width: 700px !important;
  text-align: center !important;
}

/* 项目编号 */
.detail-hero-text::before {
  content: 'No. ' attr(data-number) ' / GlimmerAI Project';
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--zine-ink-faint, #B5B0A8);
  display: block;
  margin-bottom: 2rem;
}

/* 标题 zine 化 */
.detail-name {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif !important;
  font-size: clamp(3rem, 8vw, 6rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.5rem !important;
}

/* 描述 zine 化 */
.detail-desc {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  color: var(--zine-ink-muted, #7A756E) !important;
  max-width: 500px !important;
  line-height: 1.8 !important;
  margin-bottom: 2rem !important;
}

/* 标签 zine 化 */
.detail-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-bottom: 3rem !important;
}

.detail-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--zine-ink-muted, #7A756E) !important;
  padding: 0.4rem 0.8rem !important;
  border: 1px solid var(--zine-divider, #D8D4CB) !important;
  border-radius: 2px !important;
  background: transparent !important;
  transition: all 0.3s var(--ease-out-quart) !important;
}

.detail-tag:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: rgba(123, 167, 166, 0.1) !important;
}

/* 按钮 zine 化 */
.detail-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
}

.btn-primary {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s var(--ease-out-quart);
}

.btn-primary:hover::before {
  left: 100%;
}

/* 隐藏 hero visual */
.detail-hero-visual {
  display: none !important;
}

/* ===== 2. 内容区域 zine 化 ===== */
.project-detail-main {
  background: var(--zine-paper, #F7F4ED) !important;
}

[data-theme="dark"] .project-detail-main {
  background: var(--zine-dark-paper, #1A1917) !important;
}

.container.project-detail-shell {
  max-width: 1100px !important;
  padding: 0 4vw !important;
  margin: 0 auto !important;
}

/* 区域 zine 化 — 居中宽栏布局 */
.section {
  padding: 8vh 0 !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  width: 100% !important;
}

.section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--zine-ink-faint, #B5B0A8) !important;
  margin-bottom: 2rem !important;
  border: none !important;
  padding: 0 !important;
}

/* 特性列表 zine 化 */
.feature-list {
  list-style: none !important;
  padding: 0 !important;
}

.feature-list li {
  position: relative !important;
  padding-left: 2rem !important;
  border-left: 1px solid var(--zine-divider, #D8D4CB) !important;
  margin-bottom: 3rem !important;
  transition: all 0.4s var(--ease-out-quart) !important;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--color-primary);
  transition: height 0.4s var(--ease-out-quart);
}

.feature-list li:hover::before {
  height: 100%;
}

.feature-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--zine-ink-faint, #B5B0A8) !important;
  margin-bottom: 0.5rem !important;
}

.feature-text strong {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

.feature-text p {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  color: var(--zine-ink-muted, #7A756E) !important;
  line-height: 1.8 !important;
}

/* ===== 3. 工作流 zine 化 ===== */
.workflow-steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3rem !important;
}

.workflow-step {
  position: relative !important;
  padding-left: 2rem !important;
  border-left: 1px solid var(--zine-divider, #D8D4CB) !important;
}

.workflow-step::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--color-primary);
  transition: height 0.4s var(--ease-out-quart);
}

.workflow-step:hover::before {
  height: 100%;
}

/* ===== 4. 技术决策 zine 化 ===== */
.tech-decision {
  border: none !important;
  border-left: 1px solid var(--zine-divider, #D8D4CB) !important;
  border-radius: 0 !important;
  padding-left: 2rem !important;
  margin-bottom: 3rem !important;
}

.tech-decision::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--color-primary);
  transition: height 0.4s var(--ease-out-quart);
}

.tech-decision:hover::before {
  height: 100%;
}

/* ===== 5. 架构图 zine 化 ===== */
.arch-diagram {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
}

.arch-node {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  color: var(--zine-ink-muted, #7A756E) !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--zine-divider, #D8D4CB) !important;
  border-radius: 2px !important;
  transition: all 0.3s var(--ease-out-quart) !important;
}

.arch-node:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.arch-arrow {
  color: var(--zine-ink-faint, #B5B0A8) !important;
  font-size: 1.2rem !important;
}

/* ===== 6. 挑战 zine 化 ===== */
.challenge-box {
  border: none !important;
  border-left: 1px solid var(--zine-divider, #D8D4CB) !important;
  border-radius: 0 !important;
  padding-left: 2rem !important;
  margin-bottom: 3rem !important;
  background: transparent !important;
}

.challenge-box h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
}

.challenge-box p {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  color: var(--zine-ink-muted, #7A756E) !important;
  line-height: 1.8 !important;
}

/* ===== 7. 面包屑 zine 化 ===== */
.breadcrumb {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 2rem 0 !important;
  text-align: center !important;
}

/* ===== 8. 目录导航 zine 化 ===== */
.section-nav {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
}

/* ===== 9. 状态栏 zine 化 ===== */
.status-bar {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ===== 10. 入场动画 ===== */
.section, .detail-hero, .narrative-motivation, .workflow-section, 
.tech-decisions-section, .deep-dive-section, .modules-section, 
.dataflow-section, .milestones-section, .goal-statement {
  /* 默认可见，动画由 scroll-interactions.js 控制 */
  transition: opacity 0.8s var(--ease-out-quart),
              transform 0.8s var(--ease-out-quart);
}

/* ===== 11. 减少动效 ===== */
@media (prefers-reduced-motion: reduce) {
  .detail-hero::before {
    display: none;
  }
  
  .section, .detail-hero, .narrative-motivation, .workflow-section, 
  .tech-decisions-section, .deep-dive-section, .modules-section, 
  .dataflow-section, .milestones-section, .goal-statement {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .feature-list li::before,
  .workflow-step::before,
  .tech-decision::before {
    transition: none;
  }
  
  .btn-primary::before {
    display: none;
  }
}

/* ===== 12. 响应式 ===== */
@media (max-width: 768px) {
  .detail-hero {
    min-height: 80vh !important;
    padding: 10vh 6vw !important;
  }
  
  .section {
    padding: 8vh 6vw !important;
  }
  
  .detail-name {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }
  
  .breadcrumb {
    padding: 1.5rem 6vw !important;
  }
}

@media (max-width: 480px) {
  .detail-hero {
    min-height: 70vh !important;
    padding: 8vh 5vw !important;
  }
  
  .section {
    padding: 6vh 5vw !important;
  }
}
/* ===== 13. 双栏布局优化 ===== */

/* 特性列表双栏 */
.feature-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem 3rem !important;
}

.feature-list li {
  margin-bottom: 0 !important;
}

/* 工作流双栏 */
.workflow-steps {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem 3rem !important;
}

/* 技术决策双栏 */
.tech-decisions-section .tech-decision {
  margin-bottom: 2rem !important;
}

/* 挑战双栏 */
.challenge-box {
  margin-bottom: 2rem !important;
}

/* 深度剖析内容加宽 */
.deep-dive-section .section {
  max-width: 900px !important;
}

.deep-dive-content {
  font-size: 0.95rem !important;
  line-height: 1.9 !important;
  color: var(--zine-ink-secondary, #4A4440) !important;
}

/* 模块卡片双栏 */
.modules-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
}

/* 数据流双栏 */
.dataflow-steps {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
}

/* 里程碑单栏（时间线） */
.milestones-section .milestone {
  margin-bottom: 2rem !important;
}

/* 叙事区加宽 */
.narrative-motivation {
  max-width: 900px !important;
  margin: 0 auto !important;
}

.narrative-quote {
  font-size: 1.05rem !important;
  line-height: 2 !important;
  color: var(--zine-ink-secondary, #4A4440) !important;
}

.narrative-problem {
  font-size: 0.95rem !important;
  line-height: 1.9 !important;
}

/* 目标声明 */
.goal-statement {
  max-width: 900px !important;
  margin: 0 auto !important;
  font-size: 1rem !important;
  line-height: 2 !important;
}

/* ===== 14. 响应式双栏 → 单栏 ===== */
@media (max-width: 768px) {
  .feature-list,
  .workflow-steps,
  .modules-grid,
  .dataflow-steps {
    grid-template-columns: 1fr !important;
  }
  
  .section {
    max-width: 100% !important;
    padding: 6vh 0 !important;
  }
}