/*
 * About 页新增区块：#about-profile（公司与业务）。
 *
 * 边界：所有选择器都以该根 ID 开头，不触碰旧运行时依赖的 #about-who / #about-capability
 * 等既有接口，也不引入 .huiling-about-intro（该类名被 commercial-copy 测试断言为不得存在）。
 *
 * 设计对齐（本区块夹在 #about-capability 与 #end-section 之间，必须说同一种视觉语言）：
 * 1. 背景透明。相邻区块的 background 全是 rgba(0,0,0,0)，共用页面底层画布；
 *    自己刷一块不透明色再拿 ::before 盖住画布，会在滚动中露出明显的接缝。
 * 2. 排版用页面自带的编辑式尺度：#about-capability-title 是 12vw，本区块作为它的
 *    下级章节取 7.5vw，仍远大于常规网页标题，避免像另一个站的模块。
 * 3. 间距、栅格、颜色一律取页面变量（--base-padding-y / --grid-gap / --color-*），
 *    不自造一套 rem 体系。
 * 4. 非对称版式：大标题占左侧 7 列，导语退到右侧 5 列，与能力范围区块同构。
 */

#about-profile {
  /* 本区块所处的滚动区间里，固定画布 #canvas 渲染的是品牌蓝（上方能力范围的
     白卡片同样落在这片蓝上），不是页面前半段的黑。--color-off-white-semi 的 0.7
     是照黑底调的，放到蓝底上会发灰，因此这里单独抬一档。 */
  --about-profile-muted: rgba(240, 241, 250, 0.82);
  --about-profile-line: rgba(240, 241, 250, 0.38);
  position: relative;
  isolation: isolate;
  color: var(--color-off-white, #f0f1fa);
  font-family: Satoshi, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial,
    sans-serif;
  /* 上内边距必须大于固定 #header 的高度，否则区块顶部对齐视口时 eyebrow 会被
     header 压住（实测 header 底边：1440→146px、1024→128px、768→96px、390→76px；
     旧值 2.5 倍在桌面只有 125px，不够）。3.5 倍在各档都留出余量：
     1440→175px、1024→143px，且仍是页面自己的节奏单位。 */
  padding-top: calc(var(--base-padding-y) * 3.5);
  padding-bottom: calc(var(--base-padding-y) * 3);
}

/* 继续用 .section 的 12 列栅格，内层重建同一套列，好让子元素直接定位。 */
#about-profile > #about-profile-inner {
  position: relative;
  z-index: 3;
  /* 1 / -1 而非 span 12：.section 在 812px 以下只有 6 列，用 -1 才不会撑出隐式列。 */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap, 2vw);
  width: 100%;
  max-width: 100%;
}

#about-profile #about-profile-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1.5em;
  color: var(--color-green, #c1ff00);
  font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

#about-profile #about-profile-eyebrow::before {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-green, #c1ff00);
  content: "";
}

/* 编辑式主标题：对齐 #about-capability-title 的 vw 尺度与 1em 行高。 */
#about-profile #about-profile-title {
  grid-column: 1 / span 7;
  margin: 0;
  font-size: 7.5vw;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
}

/* 导语退到右侧，与大标题构成非对称关系，而不是压在标题正下方。 */
#about-profile #about-profile-lead {
  grid-column: 9 / span 4;
  align-self: end;
  margin: 0;
  padding-bottom: 0.6em;
  color: var(--about-profile-muted);
  font-size: clamp(0.875rem, 1vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
}

/* 业务事实：只放影响选型的字段，不放工商登记信息。
   细分隔线 + 小字段名 + 重值，与页面其它数据型元素同一种处理。 */
#about-profile #about-profile-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap, 2vw);
  row-gap: 2.5em;
  width: 100%;
  margin: clamp(3.5rem, 7vw, 7rem) 0 0;
}

#about-profile .about-profile-fact {
  padding-top: 1.1em;
  border-top: 1px solid var(--about-profile-line);
  min-width: 0;
}

#about-profile .about-profile-fact-key {
  margin: 0 0 0.7em;
  color: var(--about-profile-muted);
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.06em;
}

#about-profile .about-profile-fact-value {
  margin: 0;
  font-size: clamp(0.9375rem, 1.25vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/*
 * 正文退到右半区，左侧留白 —— 与标题的左重右轻形成反向平衡。
 *
 * 起始列必须是 7 而不是 6。#about-profile-facts 是跨满 12 列的 4 等分网格，
 * 四个字段落在父栅格的 1-3 / 4-6 / 7-9 / 10-12 列；第 6 列是字段②的末列，
 * 正文从那里起就卡在字段②中间，左边缘不对齐任何一条分隔线。
 * 实测 1440px 下两段分别偏左 110px 与 56px——偏差还彼此不等，
 * 所以既不贴线、也不成比例，这是这一屏「乱」的实际来源。
 *
 * 第 7 列与 4 等分网格第 3 格起点在数学上重合（gap 项抵消）：
 *   父列 7 起点        = 6·[(W−11g)/12 + g] = W/2 + 0.5g
 *   4 等分第 3 格起点  = 2·(W−3g)/4 + 2g    = W/2 + 0.5g
 * 本块自身的 2 等分列同理对上字段③④，两段正文各自贴住一条分隔线。
 *
 * ≤1024px 时字段收成 2 列、本块收成 1/-1 的 2 列，同跨度同列数自动对齐，
 * 那一段无需额外处理。
 */
#about-profile #about-profile-story {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap, 2vw);
  row-gap: 1.5em;
  width: 100%;
  margin-top: clamp(3rem, 6vw, 6rem);
}

#about-profile .about-profile-paragraph {
  margin: 0;
  color: var(--about-profile-muted);
  font-size: clamp(0.8125rem, 0.95vw, 1rem);
  font-weight: 400;
  line-height: 1.75;
}

@media (max-width: 1024px) {
  #about-profile #about-profile-title {
    grid-column: 1 / -1;
    font-size: 9vw;
  }

  #about-profile #about-profile-lead {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: 1.5em;
    padding-bottom: 0;
    max-width: 34em;
  }

  #about-profile #about-profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #about-profile #about-profile-story {
    grid-column: 1 / -1;
  }
}

@media (max-width: 812px) {
  #about-profile {
    /* 窄视口 header 底边约 76~96px，base-padding-y 收到 30px，需要 3 倍才够。 */
    padding-top: calc(var(--base-padding-y) * 3);
    padding-bottom: calc(var(--base-padding-y) * 2.5);
  }

  #about-profile #about-profile-title {
    font-size: 11vw;
  }

  #about-profile #about-profile-story {
    grid-template-columns: minmax(0, 1fr);
  }

  #about-profile .about-profile-fact {
    padding-top: 0.9em;
  }
}

@media (max-width: 480px) {
  #about-profile #about-profile-facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.6em;
  }
}