/* ============================================================
 * Landing 页专属样式（~115 行新增类）
 *
 * 设计原则：
 *  - 全部基于 style.css 的 :root 变量与既有基类（.info-card / .capability-card
 *    / .modal-btn / .onboard-step-num），不引入新色相、新字号、新圆角。
 *  - 流程段连线必须用 SVG（R-004 / R-005 合规）—— 见 landing-step-arrow。
 *  - 响应式断点沿用全站 900 / 768 / 480，无新断点。
 *
 * 复用清单（零新增样式）：
 *  :root 变量 / .topbar / .modal-btn--primary / .info-card / .info-card-desc
 *  / .capability-rail .capability-card / .onboard-step-num / .auth-login-btn
 * ============================================================ */

/* --- 通用段落容器：4 段共用 max-width / padding / border-top
     不接管子元素布局，子布局由各段内部 grid/flex 自治（避免 R-005 多坐标系） --- */
.landing-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 32px;
  border-top: 1px solid var(--border);
}

/* --- topbar 文字链接（Landing 内部用 + 工具页「了解更多」共用） --- */
.topbar-link {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.topbar-link:hover {
  color: var(--primary);
  background: var(--primary-bg);
}

/* --- 通用段落标题（与工具页 .topbar h1 字号 20px 一致） --- */
.landing-section-title {
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

/* ============= Section 1: Hero 区 ============= */
.landing-hero {
  padding: 96px 32px 80px;
  text-align: center;
  border-top: none;              /* 第一段不分隔 */
}
.landing-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.landing-hero-title {
  margin: 0 0 16px;
  font-size: 32px;               /* 全页唯一比工具页 h1(20px) 大的元素 */
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.01em;
}
.landing-hero-subtitle {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.landing-hero-cta {
  display: inline-flex;
  gap: 12px;
  justify-content: center;
}
.landing-hero-primary {
  min-height: 40px;              /* 比 .modal-btn 默认 32px 略高，Hero CTA 更醒目 */
  padding: 0 24px;
  font-size: 14px;
  text-decoration: none;         /* <a> 跳转，去掉下划线 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============= Section 2: 问题陈述段 ============= */
.landing-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.landing-pain-card {
  gap: 8px;
  padding: 20px;
}
.landing-pain-icon {
  font-size: 28px;
  line-height: 1;
}
.landing-pain-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.landing-pain-desc {
  /* 复用 .info-card-desc 字号 / 行高 / 颜色；去掉 2 行截断（Landing 描述不截断） */
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* ============= Section 3: 使用流程段 ============= */
.landing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;  /* 步骤-箭头-步骤-箭头-步骤 */
  align-items: start;
  gap: 16px;
}
.landing-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.landing-step-num {
  /* 复用 .onboard-step-num：22×22 主色圆底白字 / 12px / 600
     这里不写任何样式，仅语义占位 */
}
.landing-step-title {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.landing-step-desc {
  text-align: center;
}
.landing-step-arrow {
  display: flex;
  align-items: center;
  /* 用 padding-top 对齐到序号位置（22 + 6），避免 transform 脱离 grid 流 */
  padding-top: 28px;
}

/* ============= Section 4: 功能亮点段 ============= */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;          /* 强制行内卡片等高（描述 1 行也撑到同行最高） */
}

/* 单卡样式：从 style.css:4231 .capability-rail .capability-card 复制
   （landing 没了 .capability-rail 父级，必须在此显式定义）。
   保持与工具页同血统：横向布局 / 左主色边 / padding-left 14px。 */
.landing-feature-grid .capability-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  border-left: 4px solid var(--primary);
  padding-left: 14px;
}

/* 描述强制占 2 行高度（即使内容只 1 行也留白），避免卡片视觉一高一矮 */
.landing-feature-grid .capability-card-desc {
  min-height: calc(2 * 1.5em);  /* 2 行 × 1.5 行高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============= Footer（2026-06-28 重设计：居中三层 + 圆点分隔 + 主色链接） ============= */
.landing-footer {
  border-top: 1px solid var(--border);   /* 与上段落视觉分隔 */
  background: var(--panel);
  padding: 24px 32px;                    /* 20px → 24px，三层内容需要更多呼吸 */
}
.landing-footer-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;                /* 关键：从 space-between 改纵向堆叠 */
  align-items: center;                   /* 关键：中轴线居中 */
  gap: 8px;                              /* 行间基础间距 8px */
  text-align: center;
  font-size: 12px;                       /* 全局基础字号，层 3 沿用 */
  color: var(--muted);
}

/* --- 通用行容器（用于 identity 和 copy 层；links 层独立布局见下） --- */
.landing-footer-row {
  display: inline-flex;
  align-items: baseline;                 /* 圆点与文字基线对齐，更精致 */
  gap: 8px;                              /* 圆点两侧 8px */
  flex-wrap: wrap;                       /* 极窄屏（<360px）姓名/邮箱会换行，不溢出 */
  justify-content: center;
}

/* --- 圆点分隔符（仅 identity 层使用；links 已纵向堆叠无需分隔） --- */
.landing-footer-dot {
  color: var(--border);                  /* 弱化到边框灰，避免抢戏 */
  user-select: none;
}

/* --- 层 1：身份 --- */
/* 「作者：」前缀弱化（与 role 同级灰），引导语义但不抢戏，姓名仍是视觉主角 */
.landing-footer-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.landing-footer-identity strong {
  color: var(--text);                    /* 姓名主色加粗 */
  font-weight: 600;
  font-size: 13px;                       /* 比其他项大 1px，建立层级 */
}
.landing-footer-identity [data-config="author-role"] {
  color: var(--muted);                   /* 背景灰 */
  font-size: 12px;
}

/* --- 层 2：联系（邮箱 / GitHub / 知乎）统一横排 + 圆点分隔 + 浅灰「联系卡」容器 --- */
/* 2026-06-28 v3：解决「联系渠道没分组感」+「层 1 横 / 层 2 纵节奏断裂」 */
/*  - flex-direction: row（横排）→ 与层 1 圆点节奏一致 */
/*  - 外层 card 浅灰背景 + 圆角 + padding → 三个联系方式被「包住」，形成视觉分组 */
.landing-footer-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;                       /* 极窄屏可换行，不溢出 */
  gap: 10px;                             /* 圆点两侧间距（与层 1 的 8px 接近，节奏一致） */
  padding: 8px 16px;                     /* 卡片内边距，营造容器感 */
  background: var(--bg);                 /* 浅灰背景，与 panel 区分 */
  border: 1px solid var(--border);
  border-radius: 8px;                    /* 圆角，柔化卡片 */
  margin-top: 4px;                       /* 与层 1 留出呼吸 */
}
.landing-footer-links a {
  color: var(--primary);                 /* 主色链接 */
  text-decoration: none;
  font-size: 12px;
  transition: color var(--transition-fast);
}
.landing-footer-links a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 链接 + 图标水平排列（图标颜色继承 currentColor → 跟随链接主色 / hover 加深） */
.landing-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.landing-footer-icon {
  flex-shrink: 0;
}

/* --- 层 3：版权（最弱） --- */
.landing-footer-copy {
  margin-top: 4px;                       /* 在 gap:8px 基础上额外 +4，做仪式感分隔 */
  font-size: 11px;                       /* meta 字号，最小 */
  color: var(--muted);
}

/* ============= 响应式（沿用全站 900 / 768 / 480 三档，无新断点） ============= */
@media (max-width: 900px) {
  .landing-hero-title { font-size: 28px; }
  .landing-hero-subtitle { font-size: 15px; }
  .landing-section { padding: 48px 32px; }
}

@media (max-width: 768px) {
  .landing-hero { padding: 64px 16px 48px; }
  .landing-hero-title { font-size: 24px; }
  .landing-pain-grid,
  .landing-feature-grid { grid-template-columns: 1fr; }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-step-arrow { display: none; }   /* 移动端隐藏 SVG 连线，序号本身表顺序 */
  /* Footer：保持居中（与桌面端布局语言一致），仅收紧 padding/gap */
  .landing-footer { padding: 20px 16px; }
  .landing-footer-inner { gap: 6px; }
  .landing-section { padding: 40px 16px; }
}

@media (max-width: 480px) {
  .landing-hero-title { font-size: 22px; }
  .landing-section { padding: 32px 16px; }
  .landing-footer-row { gap: 6px; }
}