/* ganzhi.css — 干支關係叢集專用視覺升級（只作用於 .article.gz，不影響其他叢集）。
   由 gen-ganzhi.mjs 產出的頁面載入。色彩沿用 style.css 的 tokens，另給七關係各一主色 --rel。 */

.article.gz { --rel: var(--gold); --rel-soft: color-mix(in srgb, var(--rel) 14%, #fff); --rel-line: color-mix(in srgb, var(--rel) 55%, #fff); }
.article.gz[data-rel="he"]    { --rel: #b5766a; }
.article.gz[data-rel="hui"]   { --rel: #6f8f5a; }
.article.gz[data-rel="chong"] { --rel: #c0603f; }
.article.gz[data-rel="xing"]  { --rel: #5f6b8c; }
.article.gz[data-rel="po"]    { --rel: #b0863a; }
.article.gz[data-rel="chuan"] { --rel: #8a5f7d; }
.article.gz[data-rel="gong"]  { --rel: #4f8a86; }

/* ── Hero ── */
.article.gz > h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.2;
  margin-bottom: .5rem;
}
.article.gz > h1::after {
  content: ""; display: block; width: 52px; height: 4px; margin-top: .7rem;
  border-radius: 3px; background: var(--rel);
}
.article.gz > .lead {
  font-size: 1.12rem; line-height: 1.85; color: var(--text);
  max-width: 42em;
}

/* ── 關係示意圖 ── */
.gz-fig { margin: 1.6rem auto 2rem; max-width: 400px; text-align: center; }
.gz-diagram { width: 100%; height: auto; display: block; }
.gz-diagram .ring { fill: none; stroke: var(--border); stroke-width: 1.4; }
.gz-diagram .node { fill: var(--bg-card); stroke: var(--border); stroke-width: 1.4; }
.gz-diagram .node.on { fill: var(--rel-soft); stroke: var(--rel); stroke-width: 2.2; }
.gz-diagram .node.ghost { fill: #fff; stroke: var(--rel); stroke-width: 1.6; stroke-dasharray: 3 3; }
.gz-diagram .nlab { fill: var(--text-dim); font: 600 15px/1 "Noto Serif TC", serif; text-anchor: middle; dominant-baseline: central; }
.gz-diagram .node.on + .nlab, .gz-diagram .nlab.on { fill: var(--rel); }
.gz-diagram .nlab.ghost { fill: var(--rel); opacity: .8; }
.gz-diagram .edge { fill: none; stroke: var(--rel); stroke-width: 2.4; stroke-linecap: round; }
.gz-diagram .edge.dim { stroke: var(--rel-line); stroke-width: 1.4; opacity: .55; }
.gz-diagram .edge.dash { stroke-dasharray: 5 5; }
.gz-diagram .face { fill: var(--rel-soft); stroke: var(--rel); stroke-width: 2; opacity: .9; }
.gz-diagram .sector { fill: var(--rel-soft); stroke: var(--rel); stroke-width: 2; }
.gz-fig figcaption { margin-top: .7rem; font-size: .9rem; color: var(--text-dim); font-style: italic; }

/* ── Factbox 重新設計成小卡片 ── */
.article.gz .factbox {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 1.4rem 0 1.8rem; padding: 0; border: 0; background: none;
}
.article.gz .factbox > div {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--rel); border-radius: 10px;
  padding: 12px 14px; text-align: left; display: block;
}
.article.gz .factbox dt {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 5px; font-weight: 600;
}
.article.gz .factbox dd { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); }

/* ── 內文節奏 ── */
.article.gz h2 {
  font-size: 1.32rem; margin: 2rem 0 .7rem; padding-left: 14px;
  border-left: 4px solid var(--rel); line-height: 1.35;
}
.article.gz p { line-height: 1.85; }
.article.gz b { color: color-mix(in srgb, var(--rel) 60%, var(--text)); }

/* ── 故事段：做成引文卡 ── */
.article.gz .gz-story {
  background: var(--rel-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--rel); border-radius: 12px;
  padding: 4px 20px 16px; margin: 1.8rem 0;
}
.article.gz .gz-story h2 { border: 0; padding-left: 0; color: var(--rel); }
.article.gz .gz-story p { font-size: 1.04rem; }

/* ── 概念卡 grid 質感 ── */
.article.gz .rizhu-grid { gap: 12px; }
.article.gz .rizhu-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.article.gz .rizhu-card:hover {
  transform: translateY(-2px); border-color: var(--rel);
  box-shadow: 0 6px 18px rgba(32,29,24,.08);
}
.article.gz .related h2, .article.gz .faq > h2 {
  border-left: 4px solid var(--rel); padding-left: 14px;
}