/* ══════════════════════════════════════════════════════
   洞察详情二级页  insight.html(会员专属;导航/页脚/联系我们弹窗复用全站组件)
   内容由 assets/data/insights.json 按 ?id=hormone|cycle|moon 渲染,
   封面复用首页洞察卡大图(assets/images/insights/card-*@2x.png)
   设计稿 1920:封面卡 997×566 圆角30 居中(顶距导航 182)+ 左上分类标,
   标题 30px/50 居中(距卡 114),正文 773 宽 16px/36 段距 30
   ══════════════════════════════════════════════════════ */

/* 背景走全站固定层 .site-bg(bj.png + 星点,components.css);此处纯色仅兜底 */
.insight-page { background: #16083B; }

.insight {
  min-height: 100vh; /* 文案加载期把页脚压在首屏之外,渲染前后不闪 */
  padding: 292px 24px 109px; /* 顶 = 导航(110) + 设计稿 182 */
}

/* ── 封面卡:大图 + 左上分类标 ── */
.insight__cover {
  position: relative;
  width: 997px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 997 / 566;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(55, 56, 104, 0.24); /* 图未载入时的兜底底色 */
}
.insight__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit; /* 圆角画在图自身:合成层先于容器裁切绘制时不闪直角白边 */
  opacity: 0; /* 解码完成(JS 加 is-loaded)才淡入,杜绝半绘制中间态 */
  transition: opacity 0.35s ease;
}
.insight__cover img.is-loaded { opacity: 1; }
.insight__cover-label {
  position: absolute;
  top: 57px;
  left: 101px;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  color: #C5B8ED;
}

/* ── 标题 ── */
.insight__title {
  margin: 114px auto 0;
  max-width: 660px;
  font-size: 30px;
  font-weight: 400;
  line-height: 50px;
  text-align: center;
  color: #FCEEFF;
}

/* ── 正文 ── */
.insight__body {
  width: 773px;
  max-width: 100%;
  margin: 60px auto 0;
}
.insight__body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  color: #C5B8ED;
}
.insight__body p + p { margin-top: 30px; }

/* ── 静态摘要(SEO 档):爬虫/无 JS 可见,会员正文渲染后置 hidden 收起 ── */
.insight__static {
  width: 773px;
  max-width: 100%;
  margin: 60px auto 0;
}
.insight__static[hidden] { display: none; } /* 保险:防后续显式 display 规则压掉 hidden */
.insight__static article + article { margin-top: 48px; }
.insight__static h2 { font-size: 22px; font-weight: 400; line-height: 36px; }
.insight__static h2 a { color: #FCEEFF; text-decoration: none; }
.insight__static p {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  color: #C5B8ED;
}
.insight__static-note { margin-top: 48px; }
.insight__static-note a { color: #FFC8A6; }

/* ── 响应式 ── */
@media (max-width: 960px) {
  .insight { padding: 150px 24px 80px; }
  .insight__cover { border-radius: 20px; }
  .insight__cover-label { top: 24px; left: 28px; font-size: 18px; }
  .insight__title { margin-top: 60px; font-size: 24px; line-height: 40px; }
  .insight__body { margin-top: 36px; }
}