/* =========================================================
   页面级组件 · 子页面专属（pages.css）
   ---------------------------------------------------------
   本文件只写「页面内容组件」：栏目头、面包屑、新闻瀑布流、文章排版、FAQ、分页、CTA。
   顶栏 / 抽屉 / 页脚 / 移动端快捷条 / 语言选择器 一律不在这里 —— 它们属于全站外壳，
   样式在 main.css + sections.css，由所有页面共用，改一处全站生效。

   设计约束：
   1. 只用设计令牌（tokens.css），不写死色值，主题一改全站跟着变。
   2. 不用 aspect-ratio / inset 简写（微信 X5、旧 Android WebView 不支持），
      宽高比一律用 padding-top 百分比实现。
   3. 移动端新闻列表用多列布局（columns）做真瀑布流：卡片高度不必相等、错落排布，
      且永不产生横向滚动——列宽由容器算，不再用 minmax(290px,1fr) 这类硬最小宽度。
   ========================================================= */

/* ---------- 横向滚动根治（勿回退为 html+body 双 overflow-x）----------
   standards 模式下垂直滚动根是 html。若同时给 body 设 overflow-x:hidden，body 会被
   迫成为嵌套滚动容器，iOS/微信 X5 内核据此把「滚动」委托给 body，而页面滚动实际发生在
   html，二者错位 → 手机端整页无法下滑（经典 X5 垂直滚动杀手）。
   长效修法：只约束 html 的横向溢出，body 不再设 overflow。横向溢出源（.section--page-head::before
   的 120vw 金晕、hero 金晕）本就位于各自 overflow:hidden 的父级内被裁切，绝不外溢撑宽文档，
   因此去掉 body 的 overflow 约束不会重现横向滚动条。 */
html {
  overflow-x: hidden;
}

body {
  max-width: 100%;
}

/* ---------- 栏目头：与首页 .hero 同基调（墨黑 + 金晕），顶栏透明浮于其上 ---------- */
.section--page-head {
  position: relative;
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.9);
  /* 上下留白令牌化收紧：顶栏悬浮只需补偿 header 高度 + 少量呼吸空间，避免「上下太宽」。
     注：移动端紧凑化规则统一放在所有基础规则「之后」（见本段末尾 @media），
     以修复层叠顺序——此前 @media 早于同名基础规则，被其后基础规则覆盖而失效。 */
  padding-top: calc(var(--header-h) + clamp(1rem, 2.5vw, 1.75rem));
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}

/* 金晕：与首页 hero 同源。用 overflow:hidden 的父级裁切，绝不会撑宽文档 */
.section--page-head::before {
  content: "";
  position: absolute;
  top: -45%;
  left: 50%;
  width: 120vw;
  height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201, 169, 106, 0.2), transparent 65%);
  pointer-events: none;
}

.section--page-head .container {
  position: relative;
}

.section--page-head .section-head {
  max-width: 860px;
}

.section--page-head h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.24;
  color: #fff;
  margin-top: 0.6rem;
  margin-bottom: 0.7rem;
}

.section--page-head .lead {
  color: rgba(255, 255, 255, 0.68);
}

.section--page-head .eyebrow {
  color: var(--c-gold-light);
}

/* 统计条：与首页 .hero__stats 同款胶囊 */
.section--page-head .hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.section--page-head .hero__stats span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  font-size: var(--fs-tiny);
}

/* 小屏更紧凑：置于全部基础规则之后，确保移动端覆盖真正生效（修复层叠顺序）。 */
@media (max-width: 720px) {
  .section--page-head {
    padding-top: calc(var(--header-h) + 0.9rem);
    padding-bottom: 0.9rem;
  }

  .section--page-head h1 {
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
  }

  .section--page-head .hero__stats {
    margin-top: 0.9rem;
  }
}

/* ---------- 面包屑 ---------- */
.crumbs {
  font-size: var(--fs-tiny);
  color: var(--c-text-faint);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.crumbs a {
  color: var(--c-text-faint);
  transition: color var(--dur-fast) var(--ease);
}

.crumbs a:hover {
  color: var(--c-gold-deep);
}

.crumbs span {
  opacity: 0.55;
}

/* =========================================================
   新闻列表 · 瀑布流
   ========================================================= */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  /* 列轨道用 minmax(0,1fr) 而非 minmax(290px,1fr)：
     后者在窄屏会强行维持 290px 把容器撑出横向滚动条（历史 bug 根因）。 */
}

@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手机端真瀑布流：多列布局，卡片按内容高度错落填充，不再强求等高 */
@media (max-width: 720px) {
  .news-grid {
    display: block;
    columns: 2;
    column-gap: 0.7rem;
  }

  .news-card {
    display: block;
    width: 100%;
    margin: 0 0 0.7rem;
    /* 防止卡片被拆到两列之间 */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 三种封面比例交替 → 视觉错落，是真瀑布流而不是等高网格 */
  .news-card__media {
    padding-top: 75%;
  }
  .news-card:nth-child(3n + 2) .news-card__media {
    padding-top: 100%;
  }
  .news-card:nth-child(4n + 3) .news-card__media {
    padding-top: 58%;
  }
}

/* 超窄屏（≤360px）单列，保证标题与摘要有足够阅读宽度 */
@media (max-width: 380px) {
  .news-grid {
    columns: 1;
  }
  .news-card__media,
  .news-card:nth-child(3n + 2) .news-card__media,
  .news-card:nth-child(4n + 3) .news-card__media {
    padding-top: 56%;
  }
}

/* ---------- 新闻卡片 ---------- */
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-gold);
  box-shadow: var(--sh-md);
}

/* 整卡可点：链接包住封面与正文，键盘可聚焦、触屏点按区域最大化 */
.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.news-card__media {
  position: relative;
  width: 100%;
  padding-top: 58%;
  background: var(--bg-alt);
  overflow: hidden;
}

.news-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.news-card:hover .news-card__media img {
  transform: scale(1.04);
}

/* 无图卡片：不塌陷，用品牌金渐层占位，保证列表整齐 */
.news-card__media--empty {
  background: linear-gradient(135deg, rgba(201, 169, 106, 0.16), rgba(201, 169, 106, 0.04));
}

.news-card__media--empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  border: 1px solid rgba(168, 135, 75, 0.35);
  background: radial-gradient(circle, rgba(201, 169, 106, 0.5), transparent 70%);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(0.85rem, 1.6vw, 1.15rem);
}

.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: var(--fs-tiny);
  color: var(--c-text-faint);
}

.news-card__cat {
  color: var(--c-gold-deep);
  font-weight: 600;
}

.news-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 600;
  line-height: 1.42;
  color: var(--c-text);
}

.news-card__title a {
  color: inherit;
}

.news-card:hover .news-card__title {
  color: var(--c-gold-deep);
}

.news-card__excerpt {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--fg-soft);
  /* 多行截断：手机瀑布流下摘要长度不一正是错落感的来源 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__more {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-gold-deep);
}

/* ---------- 空态 ---------- */
.empty {
  background: var(--c-white);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
  text-align: center;
  color: var(--c-text-faint);
}

/* =========================================================
   新闻详情 · 文章排版
   ========================================================= */

.article {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 3vw, 2.25rem);
  box-shadow: var(--sh-sm);
}

.article__head {
  margin-bottom: 1.25rem;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: var(--fs-tiny);
  color: var(--c-text-faint);
}

.article__cover {
  width: 100%;
  border-radius: var(--r-md);
  margin: 0 0 1.25rem;
}

.article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 1.75rem 0 0.75rem;
  padding-left: 0.65rem;
  border-left: 3px solid var(--c-gold);
  line-height: 1.35;
}

.article h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin: 1.35rem 0 0.6rem;
}

.article p {
  margin: 0 0 0.95rem;
  color: #33353a;
}

.article ul {
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
  list-style: disc;
}

.article li {
  margin: 0 0 0.4rem;
  color: #33353a;
}

.article blockquote {
  margin: 0 0 1.1rem;
  padding: 0.65rem 1rem;
  border-left: 3px solid var(--c-gold-light);
  background: var(--bg-alt);
  color: var(--fg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.article img {
  border-radius: var(--r-md);
  margin: 1rem 0;
}

/* 正文里的长串 URL / 长单词不允许撑破容器（手机端横向滚动的另一常见来源） */
.article p,
.article li,
.article h1,
.article h2,
.article h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 标签 */
.tag {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.6rem;
  font-size: var(--fs-tiny);
  color: var(--fg-soft);
  margin: 0 0.35rem 0.35rem 0;
}

/* ---------- FAQ ---------- */
.faq {
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--border);
}

.faq h2 {
  margin-top: 0;
  border-left: 0;
  padding-left: 0;
}

.faq__item {
  padding: 0.7rem 0;
  border-bottom: 1px solid #f0ece4;
}

.faq__item:last-child {
  border-bottom: 0;
}

.faq__q {
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.faq__a {
  margin: 0;
  color: var(--fg-soft);
  font-size: var(--fs-small);
}

/* ---------- 文末 CTA ---------- */
.cta-box {
  background: var(--c-ink-soft);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3.4vw, 2.25rem);
  margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.cta-box h2 {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
  color: var(--c-gold-light);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.cta-box p {
  margin: 0 0 1.1rem;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- 分页 ---------- */
.pager {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--fg-soft);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pager a:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
}

.pager .is-on {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  border-color: transparent;
  color: #1a1508;
  font-weight: 700;
}

/* ---------- 相关文章 ---------- */
.related {
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.related h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin: 0 0 1rem;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (min-width: 640px) {
  .related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 品类页产品网格（/catalog/:id） ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (min-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

.cat-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold);
}

/* 正方形封面：用 padding-top 百分比而非 aspect-ratio，兼容旧 WebView */
.cat-card__media {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--bg-alt);
  overflow: hidden;
}

.cat-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-card__body {
  display: block;
  padding: 0.55rem 0.7rem 0.7rem;
}

.cat-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
}

.cat-card__sku {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-tiny);
  color: var(--c-text-faint);
  font-family: var(--font-mono);
  overflow-wrap: break-word;
}

/* ---------- 进场动效（与首页 .reveal 同口径；无 JS / 不支持时默认可见） ---------- */
html.rv-on .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

html.rv-on .rv.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}