/* ============================================================
专题中心 · 落地单页风格（sp- 前缀）
排版对齐 holidays.html：简约单栏、Hero 全屏、内容最大 1200px
============================================================ */
/* 仅本页：去掉左右菜单占位 */
.main-content {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

body {
  padding-top: 0;
}

.sp-layout {
  padding-top: 45px;
}

/* 中间内容区：最大 1200px 居中 */
.sp-container {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 1rem;

}

.sp-landing {
  position: relative;
  --cyan: #25f4ee;
  --pink: #fe2c55;
  --surface: #121316;
  --surface2: #18191d;
  --hline: #1f2024;
  --muted: #989eab;
  --dim: #6f7480;
  --grad-cyan: linear-gradient(135deg, #25f4ee 0%, #18c9c3 100%);
  --grad-pink: linear-gradient(135deg, #fe2c55 0%, #ff5a7e 100%);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ===== Hero ===== */
.sp-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 45px);
  background: radial-gradient(620px 470px at 78% 78%, rgba(254, 44, 85, .15), rgba(254, 44, 85, .04) 40%, transparent 62%), radial-gradient(760px 560px at 14% 6%, rgba(37, 244, 238, .16), rgba(37, 244, 238, .05) 42%, transparent 66%), #0d0e10;
  padding: 44px 24px;
}

/* 呼吸光斑（纯装饰） */
.sp-hero::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(460px 300px at 86% 12%, rgba(37, 244, 238, .10), transparent 62%);
  pointer-events: none;
  animation: sp-breathe 8s var(--ease) infinite alternate;
}

@keyframes sp-breathe {
  from {
    opacity: .45;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-16px, 10px, 0);
  }
}

/* 底部渐隐分隔线 */
.sp-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 244, 238, .4) 30%, rgba(254, 44, 85, .4) 70%, transparent);
  opacity: .5;
}

.sp-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.sp-hero-body {
  position: relative;
}

.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan);
}

.sp-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: sp-blink 2.4s ease-in-out infinite;
}

@keyframes sp-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.sp-hero-title {
  margin: 24px 0 28px;
  font-size: 44px;
  line-height: 1.6;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}

.sp-hero-title .grad-cyan,
.sp-hero-title .grad-pink {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sp-hero-title .grad-cyan {
  background-image: var(--grad-cyan);
}

.sp-hero-title .grad-pink {
  background-image: var(--grad-pink);
}

.sp-hero-sub {
  max-width: 760px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--muted);
  margin: 0;
}

.sp-hero-sub strong {
  color: #fff;
  font-weight: 600;
}

/* Hero 内容逐层入场 */
.sp-hero-body > * {
  opacity: 0;
  transform: translateY(22px);
  animation: sp-rise .9s var(--ease) forwards;
}

.sp-hero-body > *:nth-child(1) {
  animation-delay: .05s;
}

.sp-hero-body > *:nth-child(2) {
  animation-delay: .18s;
}

.sp-hero-body > *:nth-child(3) {
  animation-delay: .32s;
}

@keyframes sp-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== 专题列表：深色底槽 + 磁贴间隙 ===== */
.sp-list {
  margin-top: 28px;
  background: #0d0e10;
  border: 1px solid var(--hline);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;

}

/* 专题条目：Flex 布局，一行 2 列，行间留 8px 间隙 */
.sp-item {
  flex: 0 0 calc(50% - 4px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 20px;
  background: #1c202a;
  text-decoration: none;
  color: inherit;
  transition: background .25s;
}

.sp-item:hover {
  background: #22262f;
}

/* 中间主体 */
.sp-main {
  flex: 1;
  min-width: 0;
}

.sp-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  transition: color .25s;
}

.sp-item:hover .sp-title {
  color: var(--cyan);
}

.sp-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--dim);
}

.sp-meta .sp-cat {
  color: var(--cyan);
  font-weight: 600;
}

.sp-excerpt {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 右侧箭头 */
.sp-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 13px;
  transition: color .25s, transform .25s var(--ease);
}

.sp-item:hover .sp-arrow {
  color: var(--cyan);
  transform: translateX(4px);
}

/* ===== 滚动浮现 ===== */
.will-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.will-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ===== 减弱动效 ===== */
@media (prefers-reduced-motion:reduce) {

  .sp-hero::before,
  .sp-eyebrow .dot,
  .sp-hero-body > * {
    animation: none;
  }

  .sp-hero-body > * {
    opacity: 1;
    transform: none;
  }

  .will-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== 移动端 ===== */
@media (max-width:640px) {
  .sp-container {
    padding: 0 16px 32px;
  }

  .sp-hero {
    padding: 28px 16px 24px;
  }

  .sp-hero-title {
    font-size: 26px;
    margin: 18px 0 12px;
  }

  /* 移动端恢复单列 */
  .sp-item {
    flex: 0 0 100%;
    padding: 18px 16px 16px;
    gap: 14px;
  }

  .sp-excerpt {
    -webkit-line-clamp: 2;
  }

  .sp-arrow {
    display: none;
  }
}