/* ══════════════════════════════════════════════════════
   月相 × 周期 参考图谱模块  .atlas(四种相遇时刻)
   子组件:__center(小月相排 + 标签 + 渐变标题 + 副标题)
          __card--white/purple/red/pink(视觉层叠 + 名称 + 短语 + 描述)
   设计稿 1920:顶行 白月卡(319) +230+ 中央(560) +231+ 紫月卡(320)
              底行 红月/粉月卡,列中心距 806
   卡片视觉 = 蓝湖切片按原 CSS 的 background-size/position 换算成绝对定位 img,
   几何数值写在 HTML 内联样式里(一次性数据,不进本文件)
   ══════════════════════════════════════════════════════ */

.atlas {
  padding: 140px 60px 180px;
}
.atlas__inner {
  max-width: 1660px;
  margin: 0 auto;
}

/* ── 顶行 ── */
.atlas__top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 230px;
}
.atlas__center {
  position: relative;
  width: 560px;
  margin-top: 183px;
  text-align: center;
  flex-shrink: 0;
}
/* 小月相排:整排一张图(mini.png 504×192,含中心月光晕),
   按 2x 摆,内容排宽约 252 与设计稿一致 */
.atlas__minis { display: flex; justify-content: center; }
.atlas__minis img { width: 252px; height: auto; display: block; }
.atlas__label {
  margin-top: -16px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.atlas__slogan {
  margin: 0 auto;
  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;
}
.atlas__sub {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #C5B8ED;
}

/* ── 卡片 ── */
.atlas__card { text-align: center; flex-shrink: 0; }
.atlas__visual {
  position: relative;
  width: 320px;
  height: 212px;
  margin: 0 auto;
  /* 切片光晕有出血,不裁切 */
}
.atlas__visual img { position: absolute; }
.atlas__name {
  margin-top: 20px;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.atlas__tag {
  margin-top: -2px;
  font-size: 27px;
  font-weight: 300;
  line-height: 40px;
}
.atlas__card--white  .atlas__tag { color: #FFFFFF; }
.atlas__card--purple .atlas__tag { color: #C7A3FF; }
.atlas__card--red    .atlas__tag { color: #FF778B; }
.atlas__card--pink   .atlas__tag { color: #FF82CC; }
.atlas__desc {
  margin: 14px auto 0;
  max-width: 274px;
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  color: #C5B8ED;
  opacity: 0.6;
}

/* ── 底行(红月 / 粉月:描述更宽、离标题更远) ── */
.atlas__bottom {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 400px;
  margin-top: 25px;
}
.atlas__card--red  .atlas__desc { max-width: 407px; margin-top: 38px; }
.atlas__card--pink .atlas__desc { max-width: 361px; margin-top: 38px; }

/* ── 响应式 ── */
@media (max-width: 1760px) {
  .atlas__top { gap: 110px; }
  .atlas__bottom { gap: 200px; }
}
@media (max-width: 1280px) {
  .atlas__top { flex-wrap: wrap; gap: 60px; }
  .atlas__center { margin-top: 0; order: -1; width: 100%; }
  .atlas__bottom { flex-wrap: wrap; gap: 60px; }
}
@media (max-width: 960px) {
  .atlas { padding: 100px 24px; }
  .atlas__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  .atlas__sub { font-size: 16px; line-height: 1.9; }
}