/* =========================================================================
   ccrelay 首页专属样式（纯静态，零第三方依赖）
   仅放首页独有规则：hero 元信息条 / 服务对象卡 / 核心价值 bento / 信任要点+数据条。
   engraved 图标 sprite 由 base.gohtml 注入，本页用 .icon + <use> 复用。
   颜色/圆角/阴影/字体一律取 landing.css :root token，禁硬编码十六进制。
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* Hero 元信息条 .hero-meta：三枚 engraved chip 横排，破格点出服务三件套      */
/* 克制居中、chip 与文字基线对齐、不抢 h1/CTA；窄屏自然换行。               */
/* ---------------------------------------------------------------------- */

.hero-meta {
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  max-width: 720px;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.hero-meta-text { line-height: 1.4; }

/* ---------------------------------------------------------------------- */
/* #who 服务对象：三等分编辑式卡，左上序号 + engraved chip + 标题正文        */
/* card-detail 提供 hairline 暖边/极柔阴影/无 hover 位移；这里只排版。       */
/* ---------------------------------------------------------------------- */

.who-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.who-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 26px;
  overflow: hidden;
}

/* 编辑式大序号：老式衬线斜体，淡墨置于右上，破格但不喧宾 */
.who-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-style: italic;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--border);
}

.who-card .icon-chip { align-self: flex-start; }

.who-body { display: block; }

.who-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.who-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 36ch;
}

/* ---------------------------------------------------------------------- */
/* #value 核心价值 bento：1 主卡（跨上排两列）+ 4 卫星卡                     */
/* 上排 = 主卡(span 2) + 1 卫星；下排 = 3 卫星 → 3×2 槽位无空洞。           */
/* grid 默认 stretch：同行卡片等高、底边对齐；卡为 flex column，内容顶对齐。 */
/* ---------------------------------------------------------------------- */

.value-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
}

.value-card .icon-chip { align-self: flex-start; }

.value-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.value-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 60ch;
}

/* chip 与标题之间收紧（chip 用 gap:14px，标题与正文用更紧的内距） */
.value-card h3 + p { margin-top: -4px; }

/* 主卡：领起 kicker + 大标题 + 导语 + 要点表，编辑式纵向节奏 */
.value-main { gap: 12px; }

.value-main .kicker { margin: 6px 0 0; }

.value-main h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.value-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 52ch;
}

.value-main .feature-points { margin-top: 4px; }

@media (min-width: 901px) {
  .value-main { grid-column: span 2; }
}

/* ---------------------------------------------------------------------- */
/* #portals 入口卡：本页四列；entry-card 内换用 engraved icon-chip          */
/* （entry-card / entry-index / entry-go 形制在 shared.css，本页只覆写列数  */
/* 与 chip 上距）                                                          */
/* ---------------------------------------------------------------------- */

#portals .entry-card-grid { grid-template-columns: repeat(4, 1fr); }

/* entry-card 内 chip 与序号错位共存：chip 在内容流，序号绝对定位右上 */
.entry-card .icon-chip { align-self: flex-start; }

/* ---------------------------------------------------------------------- */
/* #pricing 价格快照：卡片骨架（.price-grid/.price-card/.price-badge/       */
/* .price-stock）全部取自 shared.css，与服务介绍页价卡同族、同一批 token；  */
/* 本页只补「精简卡」少了权益清单之后的两处收尾。                          */
/* 列数与断点（≤900 两列 / ≤600 单列）同样由 shared.css 的 .price-grid 管， */
/* 这里不重复定义，免得首页与服务介绍页的价卡在窄屏上各走各的。            */
/* ---------------------------------------------------------------------- */

/* 精简卡里 CTA 前面就是库存条：24px 是两者的间距下限。只写 margin-top:auto
   不够——三张卡等高时 auto 收敛到 0，按钮会贴上库存条。 */
#pricing .price-stock { margin-bottom: 24px; }

/* 一句话说明的长短不一（窄列会折成两行），CTA 吸底保证三张卡按钮同一基线。
   服务介绍页由 .price-points + .btn 起同样作用，那条规则依赖权益清单，
   精简卡没有清单，故按 #pricing 作用域另给一条。 */
#pricing .price-card .btn { margin-top: auto; }

/* 「查看完整对比」一行轻引导：完整权益清单 / 档位对比 / FAQ 不进首页。
   形态照搬服务介绍页的 .price-redeem-entry，但那条定义在 services.css，
   首页不加载那张表（跨页复用的价卡组件才进 shared.css，这行只有首页有）。 */
.price-compare-note {
  margin: 28px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 15px 行内链接：白/纸底上 --accent 只有 4.23 / 3.98:1 */
.price-compare-note .link-underline {
  color: var(--accent-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* #trust 信任要点 .trust-points：engraved chip 前缀的要点列表（替散装圆点） */
/* ---------------------------------------------------------------------- */

.trust-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trust-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 60ch;
}

.trust-points .icon-chip { margin-top: 1px; }

/* ---------------------------------------------------------------------- */
/* 信任数据条 .trust-strip / .trust-stat / .trust-num / .trust-label       */
/* ---------------------------------------------------------------------- */

/* minmax(0, 1fr) 而不是 1fr：fr 轨道的默认最小值是 auto，即「最长的不可断单词」。
   中文的「住宅 / 全托管」是 2–3 个可断的字，英文的 trust-num 是一个整词——一个
   超出列宽的词会把三列一起撑宽，把 .how-grid 顶出 .container，整页出现横向滚动
   （只在 769–869px 与 901–1050px 两个视口带发作，桌面截图上看不见）。配合下面
   .trust-num 的 overflow-wrap，最坏情况是那个词换行，而不是整页横滚。 */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.trust-num {
  font-family: var(--font-serif);
  /* 记忆点 2 · 老式衬线数字（信任条大数字） */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--accent);
  /* 兜底，不是常态：正常情况下这里放的是能在列宽内排下的短词（见 home.gohtml
     里 .trust-num 的宽度预算注释）。加这条只是为了让「有人换了个长词」的后果
     退化成难看的断行，而不是整页横向滚动。 */
  overflow-wrap: anywhere;
}

.trust-label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.trust-note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 收尾 CTA 小字 .footer-cta-note 已移到 landing.css：服务介绍页的 footer-cta
   也用这个 class，但那页只加载 shared.css / guide.css / services.css，规则留在
   这里等于只有首页生效。同理适用于任何 footer-cta 里出现的 class。 */

/* ---------------------------------------------------------------------- */
/* 响应式：≤900 两列 / ≤768 / ≤600 单列（无横向溢出、热区≥44px）            */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .who-grid { grid-template-columns: repeat(2, 1fr); }

  /* 两列下第三张服务对象卡跨两列补齐，保持无空洞 */
  .who-grid .who-card:last-child { grid-column: span 2; }

  .who-card p { max-width: none; }

  /* #value 两列：主卡跨两列领起，4 卫星 2+2 铺满，无空洞 */
  .value-grid { grid-template-columns: repeat(2, 1fr); }

  .value-main { grid-column: span 2; }

  #portals .entry-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* 窄屏三标签竖排：整组居中（margin-inline:auto + fit-content），但 chip 共享
     同一左缘（align-items:flex-start），避免各行独立居中导致图标左缘参差。 */
  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 14px 0;
  }

  .who-grid { grid-template-columns: 1fr; }

  .who-grid .who-card:last-child { grid-column: auto; }

  .value-grid { grid-template-columns: 1fr; }

  .value-main { grid-column: auto; }

  #portals .entry-card-grid { grid-template-columns: 1fr; }

  .trust-strip { grid-template-columns: 1fr; }
}