/* ============================================================
   首页视觉统一层 v2 —— 全站对齐「六大核心亮点」的卡片风格
   ------------------------------------------------------------
   基准（public/index.html 内联样式里的 .feature-card）：
     · 圆角 18px
     · 背景 linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.012))
     · 边框 1px solid rgba(255,255,255,.075)
     · 右上角径向光晕 + 编号水印
     · hover: translateY(-6px) + 金边 + 0 20px 46px 阴影
     · 过渡 .35s cubic-bezier(.4,0,.2,1)

   本文件只做「视觉统一」，不改任何板块的布局结构（列数、顺序、内容），
   引入方式：index.html 的 </head> 之前（必须晚于内联 <style>）
   ============================================================ */

/* ---------- 1. 统一令牌 ---------- */
:root {
  --ui-radius: 18px;
  --ui-card-bg: linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  --ui-card-border: rgba(255, 255, 255, .075);
  --ui-card-border-hover: rgba(212, 168, 67, .38);
  --ui-card-shadow-hover: 0 20px 46px rgba(0, 0, 0, .45);
  --ui-glow: rgba(212, 168, 67, .18);
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-transition: transform .35s var(--ui-ease), border-color .35s var(--ui-ease), box-shadow .35s var(--ui-ease), background .35s var(--ui-ease);
}

/* ---------- 2. 区块头：徽标由紫色改为金色（全站唯一主色） ---------- */
/* 注意：原样式是 .section-header .section-badge（特异性 0,2,0），
   这里必须用同样特异性才能压过，只写 .section-badge 会「背景生效、文字和边框不变」 */
.section-header .section-badge,
.section-badge {
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 67, .34);
  background: rgba(212, 168, 67, .07);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  box-shadow: 0 0 22px rgba(212, 168, 67, .1), inset 0 0 18px rgba(212, 168, 67, .06);
  transition: border-color .3s var(--ui-ease), background .3s var(--ui-ease);
}

/* 标题下方加一条与亮点卡 h3 同款的金色短线，形成统一节奏 */
.section-header h2 {
  position: relative;
  padding-bottom: 18px;
}
.section-header h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75;
}
/* 「关于大赛」这类带装饰线的标题不重复画 */
.section-header h2[style]::after { display: none; }

/* 板块竖向间距统一，避免各段疏密不一 */
.section { padding-top: 96px; padding-bottom: 96px; }
.hero + .section,
section.hero ~ section:first-of-type { padding-top: 88px; }

/* ---------- 3. 卡片统一：同一套外壳语言 ---------- */
/* 赛程时间线卡片 */
.timeline-content,
/* 媒体合作伙伴 */
.media-display-item,
/* 新闻动态 */
.news-card,
/* 赞助等级卡（JS 动态生成，无固定类名，按子元素匹配） */
.sponsor-tier-cards > *,
/* 赞助商名录卡片 */
.sponsor-dir-card,
/* CTA 区块 */
.cta-box {
  border-radius: var(--ui-radius);
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  transition: var(--ui-transition);
  position: relative;
  overflow: hidden;
}

/* 悬停：统一上浮 + 金边 + 阴影（与 .feature-card:hover 完全一致） */
.timeline-content:hover,
.media-display-item:hover,
.news-card:hover,
.sponsor-tier-cards > *:hover,
.sponsor-dir-card:hover {
  transform: translateY(-6px);
  border-color: var(--ui-card-border-hover);
  box-shadow: var(--ui-card-shadow-hover);
}

/* 媒体卡原本 flex:0 0 180px + max-width:200px，文字被挤成一团，
   这里放开宽度并交给弹性布局均分，视觉密度与亮点卡一致 */
.media-display-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.media-display-item {
  flex: 1 1 240px;
  max-width: 340px;
  padding: 30px 24px;
}

/* 赛程时间线：卡片与光点都收敛到金色系 */
.timeline-content { padding: 26px 28px; }
.timeline-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, var(--ui-glow), transparent 58%);
  pointer-events: none;
}

/* 时间轴竖线：紫→粉→金 改为金色渐隐 */
.timeline::before {
  background: linear-gradient(to bottom, transparent, rgba(212, 168, 67, .45) 12%, rgba(212, 168, 67, .45) 88%, transparent);
  opacity: .6;
}
/* 节点圆点：原本 2~5 号分别是紫/粉/蓝/青，统一成金色（保留大小与呼吸感） */
.timeline-item .timeline-dot,
.timeline-item:nth-child(n) .timeline-dot {
  background: var(--gold);
  border: 1px solid rgba(240, 208, 120, .55);
  box-shadow: 0 0 0 4px rgba(212, 168, 67, .12), 0 0 20px rgba(212, 168, 67, .55);
}

/* 「关于大赛」主图：裸图直接贴边，与卡片圆角语言割裂，统一外壳 */
.about-image-center img,
#aboutImg {
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-card-border);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .75);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 正文段落统一行宽与行高，避免长段落横跨整屏 */
.about-text-detail {
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* 新闻卡：图片区与内容区统一圆角 */
.news-card img,
.news-card .news-cover {
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}

/* 只有一条新闻时居中展示，避免左侧孤立、右侧大片空白 */
.news-grid:has(> .news-card:only-child) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* 赞助商名录的「全部展开 / 全部收起」统一成金色胶囊按钮 */
.sd-toggle-btn {
  border: 1px solid rgba(212, 168, 67, .28);
  background: rgba(212, 168, 67, .06);
  color: var(--gold-light);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .82rem;
  cursor: pointer;
  transition: background .25s var(--ui-ease), border-color .25s var(--ui-ease);
}
.sd-toggle-btn:hover {
  background: rgba(212, 168, 67, .14);
  border-color: rgba(212, 168, 67, .5);
}

/* 赞助等级卡内部留白对齐亮点卡 */
.sponsor-tier-cards > * { padding: 28px 22px; }

/* 等级徽标：premium 已是金色，standard / basic 原本是紫色，统一到金色弱化版 */
.sp-tier-badge { border-radius: 999px; }
.sp-tier-badge.standard,
.sp-tier-badge.basic {
  background: rgba(212, 168, 67, .12);
  color: rgba(240, 208, 120, .85);
}

/* 时间线里「📍地点」是内联紫色的，必须 !important 才能压过 inline style */
.timeline-content p[style*="accent-purple"] { color: var(--gold-light) !important; }

/* 媒体卡的平台名、名录卡的等级名原本都是紫色，统一到金色弱化版 */
.media-display-item .mplatform,
.sponsor-dir-card .sdc-tier {
  color: rgba(240, 208, 120, .82);
}

/* 媒体卡信息层级：原来四行挤在 145px 宽里字号过小，按亮点卡的字号阶梯重排 */
.media-display-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.media-display-item .mname {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.media-display-item .mplatform {
  font-size: .76rem;
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.media-display-item .mintro {
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.media-display-item .mstatus {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
}

/* 新闻卡：图片占位区由冷灰紫改为暖色微光，与全站光晕一致 */
.news-card .news-img {
  background: linear-gradient(150deg, rgba(212, 168, 67, .13), rgba(255, 255, 255, .02));
  border-bottom: 1px solid var(--ui-card-border);
}
.news-card .news-body { padding: 20px 22px; }
.news-card h4 {
  font-size: 1rem;
  line-height: 1.5;
  margin: 6px 0 8px;
}
.news-card .news-date {
  font-size: .75rem;
  color: rgba(240, 208, 120, .7);
  letter-spacing: .04em;
}

/* 选手卡本身已是金边暖光（16px），只把圆角对齐到 18px */
.showcase-card {
  border-radius: var(--ui-radius);
  transition: var(--ui-transition);
}
.showcase-card:hover { transform: translateY(-6px); border-color: var(--ui-card-border-hover); }

/* CTA 区：和亮点卡同款光晕，作为页面收尾 */
.cta-box {
  padding: 56px 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 168, 67, .16), transparent 62%),
    var(--ui-card-bg);
  border-color: rgba(212, 168, 67, .18);
}

/* ---------- 4. 统一按钮：与后台一致的描边/主色 ---------- */
.btn { transition: transform .2s var(--ui-ease), background .2s var(--ui-ease), border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease); }
.btn-primary:hover { box-shadow: 0 10px 28px -10px rgba(212, 168, 67, .7); }
.btn-outline:hover { border-color: rgba(212, 168, 67, .5); color: var(--gold-light); }

/* 导航栏 hover 金色下划线：已移到 style.css（全站共用），这里不再重复定义 ——
   否则只有引了 home-v2.css 的首页有下划线，其它页面没有。 */

/* ---------- 5. 首屏倒计时：四种颜色收敛为统一金色系 ---------- */
/* 数字是渐变文字（background-clip:text + text-fill-color:transparent），
   只改 color 不会生效，必须换 background 的渐变 */
.countdown-item {
  border-radius: var(--ui-radius);
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  transition: var(--ui-transition);
}
.countdown-item:hover { border-color: var(--ui-card-border-hover); }

.countdown-item .number {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(212, 168, 67, .35));
}

.countdown-item .label {
  color: rgba(240, 208, 120, .58);
  letter-spacing: .12em;
}

/* ---------- 6. 滚动入场动画（由 home-anim.js 打标） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ui-ease), transform .7s var(--ui-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 卡片错峰：同一网格内兄弟元素依次浮现 */
.features-grid > .reveal,
.timeline > .reveal,
.media-display-grid > .reveal,
.showcase-grid > .reveal,
.news-grid > .reveal,
.sponsor-tier-cards > .reveal,
.gallery-grid > .reveal {
  transition-delay: var(--reveal-delay, 0ms);
}

/* 减少动效偏好：直接显示，不做位移 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .feature-card:hover,
  .timeline-content:hover,
  .media-display-item:hover,
  .news-card:hover,
  .sponsor-tier-cards > *:hover,
  .showcase-card:hover,
  .sponsor-dir-card:hover { transform: none; }
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 1024px) {
  .section { padding-top: 72px; padding-bottom: 72px; }
  .section-header { margin-bottom: 44px; }
  .sponsor-tier-cards { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}

@media (max-width: 640px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: 1.75rem; padding-bottom: 14px; }
  .section-badge { font-size: .68rem; padding: 4px 12px; }
  .media-display-item { flex: 1 1 100%; max-width: none; padding: 24px 18px; }
  .timeline-content { padding: 20px; }
  .cta-box { padding: 36px 20px; }
}