/* ==========================================================================
   site.css — 站点 6「云顶体育」皮肤
   风格：白底 + 清新绿，圆角柔和，行高更松，阅读优先（mode = light）
   约定：本套自定义类统一使用 .s6- 前缀
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 配色与形状：只覆盖品牌相关的令牌，浅色底沿用 base.css 默认值
   -------------------------------------------------------------------------- */
:root {
  --brand: #12b76a;
  --brand-2: #0ea5e9;
  --brand-rgb: 18, 183, 106;
  --dark: #0c2a20;
  --dark-2: #134e3a;

  /* 圆角比默认更大，阅读更柔和 */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  /* 少量皮肤调整：底色带一点绿意，线条更轻 */
  --page-alt: #f3faf6;
  --line: #e2ece7;
  --shadow-sm: 0 2px 10px rgba(12, 42, 32, .05);
  --shadow: 0 12px 34px rgba(12, 42, 32, .08);
  --shadow-lg: 0 26px 64px rgba(12, 42, 32, .13);
}

/* --------------------------------------------------------------------------
   2. 阅读优先：行高更松、段落间距更舒服
   -------------------------------------------------------------------------- */
body { line-height: 1.9; }
h1, h2, h3, h4, h5, h6 { line-height: 1.36; }
p { margin-bottom: 1.05rem; }
.sec-title { letter-spacing: -.01em; }
.sec-sub { line-height: 1.9; }
.news-sum { line-height: 1.82; }

/* --------------------------------------------------------------------------
   3. 首屏与深色区块：在浅色站点里用深绿做少量对比
   -------------------------------------------------------------------------- */
.hero { background: linear-gradient(155deg, var(--dark), var(--dark-2)); }
.sec-dark { background: linear-gradient(160deg, var(--dark), var(--dark-2)); }
.site-footer { background: linear-gradient(158deg, var(--dark), var(--dark-2)); }
.sec-layered::before { background: radial-gradient(circle, rgba(var(--brand-rgb), .22), transparent 64%); }

/* 深色首屏上的反白小标签 */
.s6-eyebrow-invert { color: #fff; background: rgba(255, 255, 255, .18); }

/* 渐变区块里的「网页版入口」浅色描边按钮 */
.s6-ghost-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-bg: rgba(255, 255, 255, .18);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  background: transparent;
}

/* 渐变区块里的主按钮改为白底，避免与绿色底叠在一起 */
.s6-btn-invert {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--dark);
  --bs-btn-hover-bg: #eefaf3;
  --bs-btn-hover-border-color: #eefaf3;
  --bs-btn-hover-color: var(--dark);
  --bs-btn-active-bg: #eefaf3;
  --bs-btn-active-border-color: #eefaf3;
  --bs-btn-active-color: var(--dark);
  box-shadow: 0 12px 26px rgba(6, 32, 22, .22);
}

/* --------------------------------------------------------------------------
   4. 卡片：统一到更柔和的圆角与更淡的描边
   -------------------------------------------------------------------------- */
.card-soft, .tile { border-radius: var(--radius); }
.card-lift:hover { transform: translateY(-5px); }
.news-item, .dept-card, .honor-card, .review-card, .stat-tile, .faq-item { border-radius: var(--radius); }
.dept-card-img, .news-thumb { border-radius: 0; }

/* 平台优势图标 */
.s6-why-img { width: 112px; height: 112px; object-fit: contain; }

/* 整张资讯卡片可点击（配合 Bootstrap 的 .stretched-link） */
.s6-card-link { position: relative; }
.s6-card-link .news-title a { color: inherit; }
.s6-card-link .news-title a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   5. 列表页：筛选标签与热门推荐
   -------------------------------------------------------------------------- */
.s6-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.s6-chip {
  display: inline-flex;
  align-items: center;
  padding: .34rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 600;
}
.s6-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.s6-thumb-sm { width: 104px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.s6-hot { padding: 1.2rem 1.35rem; color: var(--ink); }
.s6-hot h3 { color: var(--ink); }
.s6-hot:hover h3 { color: var(--brand); }
.s6-hot:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   6. Swiper：为本套的轮播容器补足分页留白，并把控件换成品牌色
   -------------------------------------------------------------------------- */
.s6-reviews .swiper { padding-bottom: 3rem; }
.s6-shots .swiper { padding-bottom: 3.4rem; }
.s6-reviews .swiper-slide,
.s6-shots .swiper-slide { height: auto; }
.s6-reviews .swiper-pagination,
.s6-shots .swiper-pagination { bottom: 0; }
.s6-reviews .swiper-pagination-bullet,
.s6-shots .swiper-pagination-bullet { background: var(--ink-faint); opacity: .45; }
.s6-reviews .swiper-pagination-bullet-active,
.s6-shots .swiper-pagination-bullet-active { background: var(--brand); opacity: 1; }
.s6-shots .swiper-button-next,
.s6-shots .swiper-button-prev { color: var(--brand); --swiper-navigation-size: 22px; }

/* --------------------------------------------------------------------------
   7. 法务页与文章页：放宽行高，突出正文可读性
   -------------------------------------------------------------------------- */
.legal-body { font-size: 1.02rem; line-height: 2.05; }
.legal-body h2 { font-size: 1.28rem; margin-top: 2.6rem; }
.legal-toc { border-radius: var(--radius); background: var(--page-alt); }
.art-body { line-height: 2.05; }
.art-body p { margin-bottom: 1.6rem; }

/* --------------------------------------------------------------------------
   8. 响应式：窄屏下减少留白，保证不溢出
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .s6-thumb-sm { width: 88px; height: 64px; }
}
@media (max-width: 575.98px) {
  body { line-height: 1.85; }
  .s6-why-img { width: 96px; height: 96px; }
  .s6-chip { font-size: .82rem; padding: .3rem .85rem; }
}