/* ============================================================
 * APRIL AMC — About Us page
 * 全局样式（导航/页脚/容器/字体/按钮/背景）继承 common.css
 * 本文件只定义关于页独有的内容区块，按 April AM 原型还原
 * ============================================================ */

/* ============== Hero（暗色满屏通栏） ============== */
.about-hero {
  position: relative;
  height: 735px;
  color: #fff;
  overflow: hidden;
}
.about-hero-bg {
  position: absolute; inset: 0;
  background: url('../../images/about/hero-bg.png') center/cover no-repeat;
}
/* 暗色渐变蒙层继承自 common.css 的 .about-hero-bg::after */
.about-hero .container { position: relative; z-index: 1; }
.about-hero-inner {
  max-width: 1060px;
  padding-top: 245px;  /* 胶囊文字距顶部 245px */
}
.hero-pill {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 60px;  /* 拉长版 */
  border-radius: 20px;
  background: rgba(0,0,0,.36);
  font-size: 16px; font-weight: 200; letter-spacing: 0.44px;
  color: #fff;
  margin-bottom: 16px;
}
.about-hero h1 {
  font-size: 56px; font-weight: 200; letter-spacing: 1.56px;
  line-height: 1.25; color: #fff;
  margin-bottom: 28px;
}
.about-hero .about-p {
  font-size: 16px; font-weight: 200; letter-spacing: 0.44px;
  line-height: 1.65; color: #fff;
  max-width: 884px;  /* 与大标题第二行右边缘对齐 */
  text-align: justify;
}

/* ============== Brand Band（满屏白底通栏：左图 + 叠加标题 + 右文） ============== */
.brand-band {
  background: #fff;
  margin-top: 60px;  /* 原型：hero 底 735 → brand-band 顶 795，间距 60px */
}
.brand-band-grid {
  display: grid;
  grid-template-columns: 693fr 747fr;  /* 原型：左图 693 / 右文 747 */
  min-height: 460px;
  max-width: 1440px;
  margin: 0 auto;
}
.brand-band-media {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}
.brand-band-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.brand-band-overlay {
  position: absolute;
  left: 96px; top: 157px;  /* 原型：Our brand 距 band 顶 952-795=157px */
  color: #fff; max-width: 500px;
  pointer-events: none;
}
.brand-band-overlay .tag {
  font-size: 18px; font-weight: 200; letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 14px;
  text-transform: none;
}
.brand-band-overlay h2 {
  font-size: 36px; font-weight: 200; letter-spacing: 1px;
  line-height: 1.3; color: #fff;
}
.brand-band-text {
  padding: 111px 139px 96px 108px;  /* 原型：文字距顶 111 / 距底 96 / 左 108（图右缘 693→文字 801）/ 右 139 */
}
.brand-band-text p {
  font-size: 18px; font-weight: 200; letter-spacing: 0.5px;
  line-height: 1.3; color: #000;
  text-align: justify;
  max-width: 500px;
}
.brand-band-text p + p { margin-top: 19px; }  /* 原型两段间距 */

/* 中文版：原型 #s10 文案块为三段、字距 2px、距 band 上下各 100px */
html[lang="zh"] .brand-band-text { padding: 100px 139px 100px 108px; }
html[lang="zh"] .brand-band-text p { letter-spacing: 2px; line-height: 1.45; }
html[lang="zh"] .brand-band-text p + p { margin-top: 27px; }
/* 中文版小字/卡片正文：原型颜色 #888888（英文版保持 #000） */
html[lang="zh"] .strengths-head .eyebrow { color: #888; }
html[lang="zh"] .s-col p { color: #888; }
html[lang="zh"] .philosophy-card p { color: #888; }

/* ============== About Strengths（页面底色 F6F5F1 上，5 列带分隔线） ============== */
/* 页面 body 已是 var(--paper-bg) = #F6F5F1，故本区块不设独立背景 */
.about-strengths { padding: 78px 0 96px; }  /* 原型：band 底 1255→标题 1333=78；内容底 1707→philosophy 1803=96 */
.strengths-head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 72px;  /* 原型：小字底 1417→图标顶 1489=72 */
  padding: 0 24px;
}
.strengths-head h2 {
  font-size: 36px; font-weight: 200; letter-spacing: 1px;
  line-height: 1.3; color: #000;
  margin-bottom: 16px;  /* 原型：标题 1333+45 → 小字 1394，间距 16 */
}
.strengths-head .eyebrow {
  font-size: 18px; font-weight: 200; letter-spacing: 0.5px;
  color: #000;
  line-height: 1.3;
  white-space: nowrap;  /* 原型一行展示 */
}
.strengths-grid {
  display: grid;
  grid-template-columns: 255fr 269fr 255fr 269fr 188fr;  /* 原型各列左缘：102/357/626/881/1150 */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 102px;  /* 原型内容 102→1338 */
}
.s-col {
  text-align: left;  /* 原型：图标/标题/正文同列左对齐 */
  position: relative;
}
.s-col + .s-col::before {
  content: '';
  position: absolute;
  left: -41px; top: -6px;  /* 原型：分隔线在各列文字左缘左侧 41px，1483→1729 */
  height: 246px;
  width: 1px;
  background: #DFDFDF;
}
.s-col .icon-box {
  height: 42px;  /* 图标底对齐于 1489+42=1531（原型图标底 1529~1533） */
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.s-col .icon { display: block; }  /* SVG 56 画布内字形即 36×43/36×36/40×40/40×40/43×39，按 56 渲染 */
.s-col h3 {
  font-size: 18px; font-weight: 200; letter-spacing: 0.5px;
  line-height: 1.25; color: #000;
  margin: 20px 0 0;  /* 原型：图标底 1531 → 标题顶 1551 */
  min-height: 66px;  /* 原型：标题顶 1551 → 正文顶 1617，各列正文顶对齐 */
  white-space: nowrap;  /* 标题不随列宽折行（原型 Quantitative research 一行；含 <br> 的标题仍分行） */
}
.s-col p {
  font-size: 14.4px; font-weight: 200; letter-spacing: 0.4px;
  line-height: 1.25;  /* 原型 18px/行，5 行 h=90 */
  color: #000;
  text-align: justify;
  width: 174px;
  max-width: 100%;
}

/* ============== Philosophy（满屏白底，3 张图片卡） ============== */
.philosophy { background: #fff; padding: 78px 0 83px; }  /* 原型：区块 1803→标题 1881=78；卡片底 2401→区块底 2484=83 */
.philosophy-head {
  text-align: center;
  max-width: 890px;
  margin: 0 auto 60px;  /* 原型：小字底 1978 → 卡片顶 2038=60 */
  padding: 0 24px;
}
.philosophy-head h2 {
  font-size: 36px; font-weight: 200; letter-spacing: 1px;
  line-height: 1.3; color: #000;
  margin-bottom: 16px;  /* 原型：标题 1881+45 → 小字 1942，间距 16 */
}
.philosophy-head .sub {
  font-size: 14px; font-weight: 300; letter-spacing: 0.3px;  /* 字重 300；letter-spacing 微调保证一行内能放下 */
  line-height: 1.6; color: #888;
  max-width: 100%; white-space: nowrap;  /* 一行显示 */
  text-align: center;
  margin: 0 auto;
}
.philosophy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 99px;  /* 原型：卡片 3×400 + 间距 20，两侧 99 */
}
.philosophy-card {
  border: 1px solid #E4E4E4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  min-height: 363px;  /* 原型三卡统一高 363 */
}
.philosophy-card .img {
  height: 210px;
  background: #D8D8D8 center/cover no-repeat;
  border-radius: 16px 16px 0 0;
}
.philosophy-card .body {
  padding: 20px 20px 17px;  /* 与标题行高 23 配合使整卡恰为 363（原型文字底距卡底 ~19） */
}
html .philosophy-card h3,
.philosophy-card h3 {
  font-size: 20px; font-weight: 300; letter-spacing: 0.5px;  /* 字重 300 */
  line-height: 23px; color: #000;  /* 原型标题行高 23 */
  margin-bottom: 19px;  /* 原型：标题顶 2268 → 正文顶 2310 */
}
.philosophy-card p {
  font-size: 14px; font-weight: 300; letter-spacing: 0.39px;  /* 字重 300 */
  line-height: 18px;  /* 原型实测行距 18px（3/3/4 行） */
  color: #000;  /* 原型英文卡 #000；中文版覆写为 #888 */
  text-align: justify;
}

/* ============== About CTA（暗色满屏通栏 + 底图） ============== */
.about-cta {
  position: relative;
  height: 424px;
  color: #fff;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.about-cta-bg {
  position: absolute; inset: 0;
  background: url('../../images/about/cta-bg.png') center/cover no-repeat;
  z-index: 0;
}
.about-cta-bg::after {  /* 轻柔暗色渐变保证白字可读 */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 100%);
}
.about-cta-inner { position: relative; z-index: 1; padding: 0 24px; }
.about-cta .eyebrow {
  font-size: 16px; font-weight: 200; letter-spacing: 0.44px;
  color: #fff;
  margin-bottom: 14px;
}
.about-cta h3 {
  font-size: 36px; font-weight: 200; letter-spacing: 1px;
  line-height: 1.3; color: #fff;
  margin: 0 auto 28px;
  white-space: nowrap;  /* 一行显示 */
}
.about-cta .cta-btn { margin-bottom: 18px; }
.about-cta .legal {
  font-size: 14px; font-weight: 200; letter-spacing: 0.39px;
  color: rgba(255,255,255,.8);
}

/* ============== 响应式 ============== */
@media (max-width: 1200px) {
  .brand-band-grid { grid-template-columns: 1fr; }
  .strengths-head .eyebrow { white-space: normal; }
  .brand-band-text { padding: 48px 116px 64px; justify-content: center; text-align: left; }
  .strengths-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; padding: 0 80px; }
  .s-col + .s-col::before { display: none; }
  .philosophy-cards { grid-template-columns: 1fr; padding: 0 80px; }
}
@media (max-width: 768px) {
  .about-hero { height: 600px; }
  .about-hero-inner { padding-top: 80px; }
  .about-hero h1 { font-size: 40px; }
  .about-hero .about-p { max-width: 100%; }
  .brand-band-overlay { left: 32px; }
  .about-strengths { padding: 72px 0 64px; }
  .strengths-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 40px; }
  .philosophy { padding: 64px 0 72px; }
  .about-cta { height: auto; padding: 72px 0 64px; }
  .about-cta h3 { font-size: 28px; }
}