/* box-sizing 重置 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================
   news.html 行业观察 — 页面专属样式
   视觉语言与 /insights、/products 等内页保持一致：
   亮色渐变 Hero（文字 + 右侧内容卡片）、白底 block 列表、深蓝渐变 CTA。
   ============================================ */

/* Hero */

/* hero 指标行（与内页一致） */
.hero__metric {
  font-size: var(--text-sm, 14px);
  color: var(--color-text-tertiary, #8c95a3);
  margin-bottom: var(--space-8, 32px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.hero__metric-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success, #12b76a);
  animation: xlxPulse 2s ease infinite;
  flex-shrink: 0;
}
@keyframes xlxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Hero 右视觉：最新研究卡片栈 ── */
.news-hero-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* ── Section Head ── */
.news-section--observe {
  padding: var(--section-padding-y, 88px) 0;
}
/* 首屏留白 */
.BrandHero + .news-section--observe { padding-top: clamp(40px, 4vw, 56px); }
/* 版心 */
.news-section--observe .container { max-width: var(--container-main); }

.news-section__head {
  max-width: 780px;
  margin-bottom: 32px;
}
.news-section__desc {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-secondary, #57606a);
}

/* ── Block 卡片列表 ── */
.news-card-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.NewsCard {
  background: var(--card-surface-bg);
  border: 1px solid var(--card-surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--card-elevated-shadow);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.NewsCard:hover {
  border-color: rgba(36, 84, 255, 0.28);
  box-shadow: 0 14px 36px rgba(24, 32, 51, 0.10);
}

.NewsCard__link {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 32px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}

.NewsCard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ff 0%, #e8fbff 100%);
}
.NewsCard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.NewsCard__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.NewsCard__fallback span {
  font-size: 30px;
  letter-spacing: 0.26em;
  color: #ffffff;
  text-indent: 0.26em;
}
.NewsCard__fallback--blue { background: linear-gradient(135deg, #2f6bff 0%, #0a3dff 46%, #1858ff 100%); }
.NewsCard__fallback--purple { background: linear-gradient(135deg, #7b61ff 0%, #635bff 46%, #8f7bff 100%); }
.NewsCard__fallback--teal { background: linear-gradient(135deg, #00b9d8 0%, #0090c5 60%, #00d4ff 100%); }

.NewsCard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
  min-width: 0;
}
.NewsCard__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.NewsCard__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-primary, #2454FF);
  background: rgba(36, 84, 255, 0.08);
}
.NewsCard__date {
  font-size: 14px;
  color: var(--color-text-tertiary, #8c95a3);
}
.NewsCard__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-primary, #1f2329);
  transition: color .25s ease;
}
.NewsCard:hover .NewsCard__title { color: var(--brand-primary, #2454FF); }
.NewsCard__excerpt {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-secondary, #57606a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.NewsCard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--brand-primary, #2454FF);
}
.NewsCard__more svg { width: 16px; height: 16px; transition: margin-left .25s ease; }
.NewsCard:hover .NewsCard__more svg { margin-left: 4px; }

.NewsCardList__empty {
  padding: 72px 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-tertiary, #8c95a3);
  border: 1px dashed var(--color-border-default, rgba(0, 0, 0, 0.12));
  border-radius: 16px;
}

/* ═══════════════════════════════════════════
   CTA（与 /insights、/products 一致的深蓝渐变通栏）
   ═══════════════════════════════════════════ */
.cta-section {
  position: relative;
  padding: var(--space-16, 88px) 0;
  overflow: hidden;
  background: linear-gradient(135deg, #0A1F5C 0%, #0A3DFF 50%, #7B61FF 100%);
}
.cta-section__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99, 91, 255, .08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(255, 176, 32, .06) 0%, transparent 50%);
}
.cta-section__content {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.cta-section__content,
.cta-section__content h2,
.cta-section__content .lead,
.cta-section__content p {
  text-align: center;
}
.cta-section__content .lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cta-section h2 { color: #FFFFFF; }
.cta-section .lead { color: rgba(255, 255, 255, 0.8); }
.cta-section .btn--secondary {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}
.cta-section .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

/* 响应式 */
@media (max-width: 860px) {
  .news-section--observe { padding: 56px 0; }
  .NewsCard__link {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }
  .NewsCard__media { aspect-ratio: 16 / 9; }
  .NewsCard__title { font-size: 20px; }
}

@media (max-width: 520px) {
  .news-section--observe { padding: 44px 0; }
  .news-card-list { gap: 18px; }
  .NewsCard__link { padding: 14px; }
  .NewsCard__title { font-size: 18px; line-height: 1.5; }
  .NewsCard__excerpt { -webkit-line-clamp: 2; }
  .NewsCard__fallback span { font-size: 22px; letter-spacing: .2em; text-indent: .2em; }
}

/* Hero 右侧：研究趋势面板 */
.news-hero-stack { max-width: min(100%, 560px); margin: 0 auto; }
.ResearchTrendPanel {
  width: 100%;
  background: var(--card-surface-bg, #FFFFFF);
  border: 1px solid var(--card-surface-border, #E2E7F0);
  border-radius: var(--radius-card-lg, 18px);
  box-shadow: var(--card-elevated-shadow, 0 6px 24px rgba(24, 32, 51, .06));
  overflow: hidden;
}
.ResearchTrendPanel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-surface-border, #E2E7F0);
  background: var(--bg-section, #F7F9FD);
}
.ResearchTrendPanel__title { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.ResearchTrendPanel__meta { font-size: 14px; color: var(--color-text-tertiary); }
.ResearchTrendPanel__empty { padding: 24px 20px; font-size: 14px; color: var(--color-text-secondary); }
.ResearchTrendPanel__featured {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; text-decoration: none;
  transition: background .18s ease;
}
.ResearchTrendPanel__featured:hover { background: var(--bg-section, #F7F9FD); }
.ResearchTrendPanel__topic {
  align-self: flex-start;
  font-size: 14px; line-height: 1.6; padding: 1px 8px; border-radius: 4px;
  background: var(--bg-soft-brand, #EEF3FF); color: var(--brand-primary, #2454FF);
}
.ResearchTrendPanel__featuredTitle {
  font-size: 17px; line-height: 1.5; font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ResearchTrendPanel__summary {
  font-size: 15px; line-height: 1.7; color: var(--color-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ResearchTrendPanel__metaRow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 2px; font-size: 14px; color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ResearchTrendPanel__more { color: var(--brand-primary, #2454FF); font-size: 14px; }
.ResearchTrendPanel__list { border-top: 1px solid var(--card-surface-border, #E2E7F0); }
.ResearchTrendPanel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--card-surface-border, #E2E7F0);
  text-decoration: none;
  transition: background .18s ease;
}
.ResearchTrendPanel__item:last-child { border-bottom: 0; }
.ResearchTrendPanel__item:hover { background: var(--bg-section, #F7F9FD); }
.ResearchTrendPanel__itemTopic {
  font-size: 14px; line-height: 1.6; padding: 1px 7px; border-radius: 4px;
  background: var(--bg-section, #F7F9FD); color: var(--color-text-secondary);
  border: 1px solid var(--border-subtle, #E2E7F0); white-space: nowrap;
}
.ResearchTrendPanel__itemTitle {
  font-size: 14px; line-height: 1.5; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ResearchTrendPanel__itemDate { font-size: 14px; color: var(--color-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  .news-hero-stack { max-width: none; }
  .ResearchTrendPanel__item { grid-template-columns: minmax(0, 1fr) auto; }
  .ResearchTrendPanel__itemTopic { display: none; }
}

/* ==========================================================================
   Global Layout
   ========================================================================== */

:root {
  --xlx-page-inset: 24px; /* <=390：左右各 12px */
  --xlx-page-gutter: 12px;
  --container-wide: calc(100vw - var(--xlx-page-inset));
  --container-main: calc(100vw - var(--xlx-page-inset));
  --container-content: calc(100vw - var(--xlx-page-inset));
  --container-padding-inline: 0px;
}

@media (min-width: 391px) {
  :root {
    --xlx-page-inset: 28px;
    --xlx-page-gutter: 14px;
  }
}

@media (min-width: 431px) {
  :root {
    --xlx-page-inset: 32px;
    --xlx-page-gutter: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --xlx-page-inset: 48px;
    --xlx-page-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --xlx-page-inset: 72px;
    --xlx-page-gutter: 36px;
  }
}

@media (min-width: 1280px) {
  :root {
    --xlx-page-inset: 96px;
    --xlx-page-gutter: 48px;
  }
}

@media (min-width: 1440px) {
  :root {
    --xlx-page-inset: 144px;
    --xlx-page-gutter: 72px;
  }
}

@media (min-width: 1600px) {
  :root {
    --xlx-page-inset: 220px;
    --xlx-page-gutter: 110px;
  }
}

@media (min-width: 1920px) {
  :root {
    --xlx-page-inset: 360px;
    --xlx-page-gutter: 180px;
  }
}

/* 主背景继续全宽；这里只控制内部内容版心 */
.container,
.site-container,
.SiteHeader__inner {
  max-width: var(--container-main);
}

/* 防止网格/双栏子项因长文本撑破版心 */
.container > *,
.site-container > *,
.SiteHeader__inner > * {
  min-width: 0;
}


/* CTA */
.cta-section .btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.cta-section .btn:hover {
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.cta-section .btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.90);
  outline-offset: 3px;
}
.cta-section .btn:active { transform: translateY(0); }