/* ══════════════════════════════════════════════════════
   生理周期四阶段模块  .cycle(月相科学下方)
   子组件:__head(标签/标题/副标题) · __interactive(月相环+激素曲线,占位)
          · __phases(四阶段栅格:图标/天数/名称/短语/描述)
   设计稿 1920 宽,内容区 1476(4×255 + 3×152)
   ══════════════════════════════════════════════════════ */

.cycle {
  padding: 104px 60px 122px;
}

/* ── 头部文案 ── */
.cycle__head { text-align: center; }
.cycle__heading {
  font-size: 18px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 3.4px;
  color: #C5B8ED;
}
.cycle__slogan {
  margin: 32px auto 0;
  width: fit-content; /* 渐变盒收缩到文字宽度 */
  font-weight: 400;
  font-size: 78px;
  line-height: 120px;
  color: #FCEEFF; /* 不支持文字渐变时的兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cycle__sub {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #C5B8ED;
}

/* ── 月相环 + 激素曲线交互组件(iframe 嵌入 assets/components/cycle-hero.html) ──
   全屏样式:从 .cycle 的 60px 内边距里破格到视口全宽;
   组件内部圆环区自行封顶 430 居中,日历/阶段带/曲线铺满全宽 */
.cycle__interactive {
  width: 100vw;
  margin: 121px calc(50% - 50vw) 0;
}
.cycle__hero {
  width: 100%;
  height: 620px; /* 圆环区 411(封顶后) + 日历带 75 + 曲线 125 ≈ 611 */
  border: 0;
  display: block;
}

/* ── 四阶段栅格 ── */
.cycle__phases {
  max-width: 1476px;
  margin: 120px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 152px; /* 满宽时列宽正好 255 */
}
.cycle__phase-icon {
  width: 56px;
  height: 56px;
  display: block;
}
.cycle__phase-days {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 2.64px;
  line-height: 40px;
  color: #C5B8ED;
  opacity: 0.6;
}
.cycle__phase-name {
  margin-top: 2px;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.cycle__phase-tag {
  margin-top: -2px;
  font-size: 27px;
  font-weight: 300;
  line-height: 40px;
}
.cycle__phase--menstrual  .cycle__phase-tag { color: #E186B8; }
.cycle__phase--follicular .cycle__phase-tag { color: #E6AB41; }
.cycle__phase--ovulation  .cycle__phase-tag { color: #44BAD3; }
.cycle__phase--luteal     .cycle__phase-tag { color: #C7A3FF; }
.cycle__phase-desc {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  color: #C5B8ED;
  opacity: 0.6;
}

/* ── 响应式 ── */
@media (max-width: 960px) {
  .cycle { padding: 100px 24px; }
  .cycle__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  .cycle__sub { font-size: 16px; line-height: 1.9; }
  .cycle__interactive { margin-top: 60px; }
  .cycle__phases { grid-template-columns: 1fr; gap: 48px; margin-top: 60px; }
}