/* ============================================================================
 * site.css —— 南谷AI工作室官网全局样式
 *
 * ⚠️ 本文件是**设计令牌的唯一权威**（《技术架构设计》§5.3 / 主站需求 §5.3）。
 *    产品区 CSS **只允许追加 `--c-product-*` 新变量并微调 --wrap**，
 *    **禁止重定义**本文件里的任何令牌（构建期守卫会检查）。
 *
 * 判据：**删掉产品区 CSS 后，产品页应变成「主站风格的产品页」而不是崩掉。**
 * ========================================================================== */

:root {
  /* ── 主色：取自 Logo 蓝段，偏青（与 Logo 青绿端能接上）── */
  --c-primary:        #2E7BE6;
  --c-primary-strong: #1B5FC4;
  --c-primary-soft:   #EAF2FE;

  /* ── 品牌渐变：**只用于 Logo 与首屏主视觉，不用于按钮与文字** ── */
  --g-brand: linear-gradient(120deg, #143A8F 0%, #1E6FD9 45%, #2FD3A8 100%);

  /* ── 辅助色（只用于强调，小面积）── */
  --c-accent-green:   #38B26A;
  --c-accent-yellow:  #F5B31C;
  --c-accent-orange:  #F2733F;

  /* ── 中性色 ── */
  --c-text:           #1F2733;
  --c-text-sub:       #5A6675;
  --c-text-mute:      #8A95A3;
  --c-bg:             #FFFFFF;
  --c-bg-soft:        #F6F8FB;
  --c-border:         #E3E8EF;
  --c-danger:         #D93B3B;

  /* ── 圆角与阴影 ── */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,.06);
  --sh-2: 0 8px 24px rgba(16,24,40,.08);
  --sh-3: 0 16px 40px rgba(16,24,40,.10);

  /* ── 间距：8pt 网格 ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px;

  /* ── 版心 ── */
  --wrap: 1200px;  --wrap-narrow: 820px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  /* 中文正文最小 16px，永不小于 14px（UI 规范禁止 12px 及以下） */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 可见焦点环（可访问性硬要求，不许 outline:none） */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ============================ 排版层级 ============================ */
h1, h2, h3 { line-height: 1.3; margin: 0 0 var(--s-4); font-weight: 700; }
h1 { font-size: 48px; line-height: 1.25; }
h2 { font-size: 32px; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.4; }

p { margin: 0 0 var(--s-4); }

/* 行宽控制在每行 30–40 个汉字 */
.prose { max-width: 38em; }

/* ============================ 布局 ============================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.section { padding-block: var(--s-8); }
.section--soft { background: var(--c-bg-soft); }

/* ============================ 骨架注入区 ============================ */
/* 占位注释被 Caddy 替换成 partial 内容；这里只处理替换后的成品样式 */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  height: 72px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 34px; width: auto; }

.site-nav { display: flex; gap: var(--s-5); margin-inline-start: auto; align-items: center; }
.site-nav a {
  color: var(--c-text-sub); font-size: 16px; font-weight: 500;
  padding: var(--s-2) 0; text-decoration: none;
}
.site-nav a:hover { color: var(--c-primary); }
/* 当前页高亮：只认 aria-current，避免两套选中逻辑 */
.site-nav a[aria-current="page"] { color: var(--c-primary); font-weight: 600; }

/* 导航右侧的转化按钮（与导航项视觉可分） */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 44px;              /* 触摸目标 ≥ 44px */
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-strong); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary-soft); text-decoration: none; }

/* 面包屑（产品区必需，v2.0 起是强制项） */
.breadcrumb {
  font-size: 14px; color: var(--c-text-mute);
  padding-block: var(--s-3);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--s-2); color: var(--c-border); }

/* ============================ 页脚 ============================ */
.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  padding-block: var(--s-7) var(--s-5);
  font-size: 15px; color: var(--c-text-sub);
}
.site-footer__cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-footer h2 { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--c-text-sub); }
.site-footer__legal {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: 14px; color: var(--c-text-mute);
}

/* ============================ 首页专属 ============================ */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero__kicker {
  display: inline-block; margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  background: var(--c-primary-soft); color: var(--c-primary-strong);
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
}
.hero h1 { font-size: 56px; letter-spacing: -.02em; }
.hero__sub { font-size: 20px; color: var(--c-text-sub); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__meta { margin-top: var(--s-4); font-size: 15px; color: var(--c-text-mute); }

/* 核心业务三块 */
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--sh-1);
}
.card h3 { margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }

/* 产品卡片 */
.product-card {
  display: flex; gap: var(--s-5); align-items: flex-start;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2);
}
.product-card__icon { width: 88px; height: 88px; flex: 0 0 auto; }
.product-card__body { flex: 1 1 auto; min-width: 0; }
.product-card__meta { font-size: 14px; color: var(--c-text-mute); margin-bottom: var(--s-3); }
.product-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* 空状态（必须有出口，不许只写「暂无数据」） */
.empty {
  text-align: center; padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  color: var(--c-text-sub);
}

/* ============================ 响应式 ============================ */
@media (max-width: 1023px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .hero { padding-block: var(--s-7) var(--s-6); }
  .hero h1 { font-size: 32px; }
  .hero__sub { font-size: 17px; }
  .site-header__inner { height: 60px; }
  .site-nav { display: none; }          /* 移动端导航进抽屉，由 site.js 接管 */
  .product-card { flex-direction: column; }
  .section { padding-block: var(--s-7); }
}

/* ============================ 动效降级 ============================ */
/* 所有滚动动效在 prefers-reduced-motion 下必须关闭 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}