/* =========================================================
   慧途文旅 · 内容板块样式 (攻略 / 问答)
   依赖 design-system.css + main.css，复用品牌 tokens 与组件
   ========================================================= */

/* ---------- 内容页头部（藏地渐变，克制版） ---------- */
.content-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(200,163,90,0.16), transparent 55%),
    linear-gradient(155deg, #16304d 0%, #122A44 50%, #0d2036 100%);
  color: var(--c-on-dark);
  padding-top: calc(var(--nav-h) + var(--s8));
  padding-bottom: var(--s8);
  overflow: hidden;
}
.content-hero__inner { max-width: var(--container); margin: 0 auto; padding-inline: var(--s5); position: relative; z-index: 2; }
.content-hero .eyebrow { color: var(--c-gold); }
.content-hero .eyebrow::before { background: var(--c-gold); }
.content-hero h1 { color: #fff; font-size: var(--fs-h1); margin-bottom: var(--s4); }
.content-hero__lead { color: var(--c-on-dark-mut); font-size: 1.15rem; line-height: 1.7; max-width: 62ch; }

/* ---------- 分类筛选条 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.filter-chip {
  padding: 8px 18px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-line);
  font-size: 0.92rem; font-weight: 600; color: var(--c-muted);
  transition: all .2s var(--ease-out);
}
.filter-chip:hover { border-color: var(--c-blue); color: var(--c-blue); }
.filter-chip.is-active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* ---------- 文章卡片网格 ---------- */
.post-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-std), border-color .3s;
  will-change: transform;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--c-gold); }
.post-card__media {
  height: 180px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
}
.post-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(200,163,90,0.32), transparent 50%),
              radial-gradient(circle at 20% 90%, rgba(178,58,46,0.22), transparent 55%);
}
.post-card__cat {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 2;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(247,244,237,0.92); color: var(--c-blue-deep);
}
.post-card__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--c-blue-deep); margin: 0 0 var(--s2); line-height: 1.3; }
.post-card__summary { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--s4); flex: 1; }
.post-card__meta { font-size: 0.8rem; color: var(--c-muted); display: flex; gap: var(--s3); align-items: center; }
.post-card__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line-strong); }

/* ---------- 文章正文排版 ---------- */
.article { max-width: var(--container-narrow); margin: 0 auto; }
.article h2 { font-size: var(--fs-h2); margin: var(--s7) 0 var(--s4); padding-top: var(--s4); }
.article h3 { font-size: var(--fs-h3); margin: var(--s6) 0 var(--s3); color: var(--c-blue); }
.article p { max-width: none; margin-bottom: var(--s4); }
.article ul, .article ol { margin: 0 0 var(--s4); padding-left: var(--s6); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-bottom: var(--s2); }
.article blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 3px solid var(--c-gold); background: var(--c-bg-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--c-ink-soft); font-style: italic;
}
.article code {
  background: var(--c-bg-alt); padding: 2px 6px; border-radius: var(--r-sm);
  font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article hr { border: 0; height: 1px; background: var(--c-line); margin: var(--s6) 0; }
.article .figure { margin: var(--s5) 0; }
.article .figure__ph {
  height: 320px; border-radius: var(--r-lg); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
}
.article .figure__ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(200,163,90,0.3), transparent 50%),
              radial-gradient(circle at 15% 85%, rgba(178,58,46,0.22), transparent 55%);
}
.article .figure__cap { font-size: var(--fs-small); color: var(--c-muted); margin-top: var(--s2); text-align: center; }

/* ---------- 详情页 hero ---------- */
.post-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, rgba(200,163,90,0.16), transparent 55%),
              linear-gradient(155deg, #16304d 0%, #122A44 50%, #0d2036 100%);
  color: var(--c-on-dark); padding-top: calc(var(--nav-h) + var(--s7)); padding-bottom: var(--s7);
}
.post-hero__inner { max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--s5); position: relative; z-index: 2; }
.post-hero .eyebrow { color: var(--c-gold); }
.post-hero .eyebrow::before { background: var(--c-gold); }
.post-hero h1 { color: #fff; font-size: var(--fs-h1); margin-bottom: var(--s4); }
.post-hero__summary { color: var(--c-on-dark-mut); font-size: 1.15rem; max-width: 64ch; margin-bottom: var(--s5); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; font-size: 0.9rem; color: var(--c-on-dark-mut); }
.post-meta .tag { background: rgba(247,244,237,0.12); border-color: rgba(247,244,237,0.2); color: var(--c-on-dark); }

/* ---------- 返回 / 相关推荐 ---------- */
.back-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-blue); font-weight: 600; margin-bottom: var(--s5); }
.back-link svg { width: 18px; height: 18px; }
.related { margin-top: var(--s9); }

/* ---------- 内容聚合页 Tab（导航单标签：内容） ---------- */
.hub-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s6);
  border-bottom: 1px solid rgba(27,58,91,0.12); }
.hub-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--fs-h3); font-weight: 600; color: #5A6B7B;
  padding: var(--s3) var(--s2) var(--s4); position: relative;
  transition: color .25s ease;
}
.hub-tab:hover { color: var(--c-blue); }
.hub-tab.is-active { color: var(--c-blue); }
.hub-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--c-gold);
}
.hub-panel { display: none; }
.hub-panel.is-active { display: block; animation: hubFade .35s ease; }
@keyframes hubFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .post-grid { grid-template-columns: 1fr; }
  .article .figure__ph { height: 220px; }
  .hub-tabs { gap: var(--s1); }
  .hub-tab { font-size: var(--fs-h4); padding: var(--s2) var(--s1) var(--s3); }
}