/* =========================================
   project.css — 项目详情页样式
   命名空间：.project*
   只作用于 layouts/project.njk 渲染的详情页
   高优先级：使用 body[data-section="xing"] 提高特异性
   ========================================= */

/* -------- 1) 页面结构 -------- */
body[data-section="xing"] .project {
  max-width: 900px !important;       /* 版心宽度 */
  margin: 32px auto !important;
  padding: 0 16px !important;
  display: block !important;
}

/* -------- 2) 顶部封面 -------- */
body[data-section="xing"] .project-hero {
  margin: 0 0 20px !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}
body[data-section="xing"] .project-hero img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* -------- 3) 标题与基础信息 -------- */
body[data-section="xing"] .project-header {
  margin: 0 0 24px !important;
}
body[data-section="xing"] .project-title {
  margin: 0 0 12px !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
}

/* 摘要（标题下方） */
body[data-section="xing"] .project-summary {
  margin: 8px 0 12px !important;
  color: #444 !important;
  line-height: 1.8 !important;
}

/* 信息行（发布日期 / 分类 / 标签） */
body[data-section="xing"] .project-line {
  display: flex !important;
  gap: 12px !important;
  align-items: baseline !important;
  margin: 6px 0 !important;
}
body[data-section="xing"] .project-line .label {
  flex: none !important;
  min-width: 66px !important;
  color: #666 !important;
  font-size: 14px !important;
}
body[data-section="xing"] .project-line .value {
  flex: 1 !important;
  display: inline-flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 14px !important;
}

/* 元信息容器：日期/分类/标签 同排（可换行） */
body[data-section="xing"] .project-meta {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
}
body[data-section="xing"] .project-meta .project-line { margin: 0 !important; display: inline-flex !important; }
body[data-section="xing"] .project-meta .project-line .label { min-width: auto !important; }
body[data-section="xing"] .project-meta .project-line .value { flex: initial !important; display: inline-flex !important; }

/* 分类 chip */
.chip {
  display: inline-block;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.4;
  background: transparent;
}

/* 标签 #tag */
.tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 标签（#tag）：纯文本，无边框按钮样式 */
body[data-section="xing"] .tag-list .tag {
  display: inline-block !important;
  text-decoration: none !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
}
body[data-section="xing"] .tag-list .tag:hover { text-decoration: underline !important; }

/* -------- 4) 可选属性区 -------- */
/* 第二部分信息区：去卡片化，留分隔线区分 */
body[data-section="xing"] .project-attrs {
  margin: 20px 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: grid !important;
  gap: 12px 16px !important;
}

/* 单条属性 */
.attr {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: start;
}
.attr-label {
  color: #666;
  font-size: 14px;
  line-height: 28px;
}
.attr-val {
  font-size: 14px;
  line-height: 28px;
}

/* 胶囊列表（工具/合作者） */
.pill-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pill {
  border: 1px solid #ddd;
  background: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
}

/* 链接按钮（demo/repo 等） */
.btns {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn {
  display: inline-block;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}
.btn:hover { opacity: .9; }
.btn--ghost {
  background: #fff;
  color: #000;
}

/* ---- 覆盖第二部分为纯文本样式（工具/合作者/链接等） ---- */
body[data-section="xing"] .project-attrs .attr-label,
body[data-section="xing"] .project-attrs .attr-val { line-height: 1 !important; }

body[data-section="xing"] .project-attrs .pill-list { display: inline-flex !important; gap: 8px !important; flex-wrap: wrap !important; }
body[data-section="xing"] .project-attrs .pill {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
/* 工具名之间添加分隔符 ｜ */
body[data-section="xing"] .project-attrs .pill + .pill::before {
  content: "｜";
  color: #999;
  margin: 0 8px;
}

body[data-section="xing"] .project-attrs .btns { display: inline-flex !important; gap: 12px !important; flex-wrap: wrap !important; }
body[data-section="xing"] .project-attrs .btn {
  display: inline !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-decoration: underline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
body[data-section="xing"] .project-attrs .btn--ghost { background: transparent !important; color: inherit !important; }
body[data-section="xing"] .project-attrs .btn:hover { opacity: 1 !important; }

/* -------- 5) 正文内容 -------- */
body[data-section="xing"] .project-body {
  margin: 24px 0 !important;
}
body[data-section="xing"] .project-body p {
  margin: 16px 0 !important;
  line-height: 1.8 !important;
}
body[data-section="xing"] .project-body h2 { 
  margin: 28px 0 8px !important; 
  font-size: 28px !important; 
}
body[data-section="xing"] .project-body h3 { 
  margin: 22px 0 6px !important; 
  font-size: 22px !important; 
}

/* 分隔线 */
body[data-section="xing"] .project-divider {
  height: 1px !important;
  background: #eaeaea !important;
  margin: 20px 0 !important;
}

/* 图片与图注 */
.project-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 12px 0;
}
.project-body figure { margin: 16px 0; }
.project-body figcaption {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* 视频容器（16:9） */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin: 16px 0;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* 代码块 & 引用 */
.project-body pre {
  background: #0f0f0f;
  color: #eaeaea;
  padding: 14px;
  border-radius: 10px;
  overflow: auto;
  font-size: 13px;
}
.project-body blockquote {
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 3px solid #000;
  background: #fafafa;
}

/* -------- 6) 返回链接 -------- */
.project-back {
  margin: 28px 0 12px;
}
.link-back {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
}
.link-back:hover {
  opacity: .8;
}

/* -------- 7) 响应式 -------- */
@media (max-width: 640px) {
  .project { padding: 0 12px; }
  .project-title { font-size: 32px; }
  .attr { grid-template-columns: 80px 1fr; }
}