/* ================================================================
   ABOUT — 关于页专属样式
     · 公司介绍区 about-intro（3 列：head + text + pic，比例 1:3:2）
     · 企业文化六边形阵列（6 hex 向左箭头）
   依赖：tokens.css、base.css
   ================================================================ */

/* ================================================================
   通用内页内容区基础（page-section）
   未来其他内页（products/sustainability...）可复用
   ================================================================ */
.page-section {
  position: relative;
  padding: 90px 0 80px;
  background: #fff;
}
.page-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
}
.page-section__head {
  position: relative;
}
.page-section__head .triangle {
  display: block;
  width: 38px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
}
.page-section__head .cn {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.1;
}
.page-section__head .en {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

/* ================================================================
   ABOUT 公司介绍区
   横向 3 列：head (1/6) + text (1/2 = 3/6) + pic (1/3 = 2/6)
   背景使用与首页 about 区相同的漂浮绿色装饰三角
   ================================================================ */
.about-intro {
  position: relative;        /* 创建 stacking context */
  z-index: 11;               /* 必须高于 vision::before 的 z-index:6（vision 不是 stacking
                                 context，::before 漏到根，会盖住低 z-index 的兄弟） */
  background: #fff;
  overflow: hidden;          /* 装饰三角不溢出 */
  perspective: 1600px;       /* 为 .about__deco 的 3D transform 提供视点 */
}

/* ── 漂浮装饰三角（与首页 .about 同款）─────────────────────────
   5 个 deco 三角浮在背景上，由 js/pages/about.js 控制鼠标视差。
   ─────────────────────────────────────────────────────────── */
.about-intro .about__deco {
  position: absolute; inset: 0; pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
}
.about-intro .about__deco i {
  position: absolute; display: block;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.about-intro .about__deco i::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--green);
}
.about-intro .about__deco i.l1 { left: 71%; top: 8%; width: 280px; height: 130px;
                                  opacity: .18 !important; filter: blur(5px); }
.about-intro .about__deco i.l1::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.about-intro .about__deco i.l2 { left: 18%; top: 4%; width: 70px; height: 35px;
                                  opacity: .12 !important; filter: blur(3px); }
.about-intro .about__deco i.l2::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.about-intro .about__deco i.l3 { left: 33%; bottom: 12%; width: 110px; height: 65px;
                                  opacity: .15 !important; filter: blur(8px); }
.about-intro .about__deco i.l3::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.about-intro .about__deco i.r1 { left: -5%; top: 48%; width: 300px; height: 150px;
                                  opacity: .14 !important; filter: blur(10px); }
.about-intro .about__deco i.r1::before { clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.about-intro .about__deco i.r2 { right: 16%; bottom: 5%; width: 480px; height: 210px;
                                  opacity: .10 !important; filter: blur(12px); }
.about-intro .about__deco i.r2::before { clip-path: polygon(0 100%, 100% 100%, 100% 0); }

/* 3 列横向布局：head (1) + text (3) + pic (2) → 1:3:2 = 1/6 + 3/6 + 2/6 */
.about-intro__row {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/* 左列标题在 1/6 窄列里要缩小，否则「至正新材料」会被强制换行 */
.about-intro__row .page-section__head .cn {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
  letter-spacing: .12em;
}

/* ── Bricks 可视化编辑版：弹性行 ──
   CSS 只提供「弹性容器 + 列间距」；每列的宽度由该列的 Bricks `_width` 控制，
   所以可以在 Bricks 构建器里直接拖拽 / 输入数值调整左右列宽比例。 */
/* 方案：左列＝标题(上) + 公司配图(下)，右列＝介绍文字（磨砂玻璃卡片）。
   DOM 顺序 head→text→pic，用 grid 显式定位：head 左上、pic 左下、text 右侧跨两行。 */
.about-intro__flexrow {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: clamp(240px, 34%, 380px) 1fr;   /* 左：标题+图  右：文字 */
  grid-template-rows: auto 1fr;   /* 第 2 行填满剩余高度；配图靠底放（align-self:end）→ 底边与右侧文字卡底边对齐 */
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}
.about-intro__flexrow > * { width: auto !important; }   /* 覆盖 Bricks 内联列宽，交由 grid */
.about-intro__flexrow > .page-section__head { grid-column: 1; grid-row: 1; }         /* 标题（左上） */
.about-intro__flexrow > .about-intro__pic  { grid-column: 1; grid-row: 2; }          /* 配图（标题下方） */
.about-intro__flexrow > .about-intro__text { grid-column: 2; grid-row: 1 / span 2; } /* 文字（右侧，跨两行） */
/* 中文标题字号交给统一标题组件（section-head.css），此处不再覆盖 */
@media (max-width: 980px) {
  .about-intro__flexrow {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;   /* 移动端竖排：标题→图→文 */
  }
  .about-intro__flexrow > .page-section__head { grid-column: 1; grid-row: 1; }
  .about-intro__flexrow > .about-intro__pic  { grid-column: 1; grid-row: 2; }
  .about-intro__flexrow > .about-intro__text { grid-column: 1; grid-row: 3; }
}
/* 「关于」左列按钮（Bricks button 元素，class=about-intro__btn） */
.about-intro__btn,
.about-intro__btn.brxe-button {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  padding: 12px 30px;
  background: var(--green); color: #fff;
  border-radius: 999px;
  font-family: var(--font-cn); font-size: 15px; letter-spacing: .04em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .3s var(--ease-out);
}
.about-intro__btn:hover { background: var(--green-deep); color: #fff; }
.about-intro__text {
  font-family: var(--font-cn);
  color: #4A554E;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: .02em;
  text-align: justify;
  /* 磨砂玻璃卡片：半透明白底 + 背景模糊 + 柔边描边/投影 */
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 12px;
  padding: clamp(24px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px);
  box-shadow: 0 12px 44px -18px rgba(31, 92, 54, .18);
}
.about-intro__text p + p { margin-top: .9em; }
.about-intro__text mark {
  background: transparent;
  color: var(--green);            /* 标准品牌绿 #2F834E */
  font-weight: 600;
}
/* 保持配图原始比例、不裁切：容器高度随原图，img 按原始宽高比自适应（不强制 aspect-ratio、不用 cover） */
.about-intro__pic {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px -20px rgba(31,92,54,.25);
}
.about-intro__pic img {
  width: 100%; height: auto;
  display: block;
}
/* 桌面端：配图保持原始比例、靠左列底部放置。margin-bottom = 文字卡的底部内边距（clamp 完全一致）→
   配图底边上移到卡片「内容底」= 右侧最靠下一行文字的底边对齐（而非卡片外框底边，卡片底部还有 padding）。 */
@media (min-width: 981px) {
  .about-intro__flexrow > .about-intro__pic {
    align-self: end;
    margin-bottom: clamp(24px, 2.4vw, 40px);
  }
}
/* 图片右下角的标签条 */
.about-intro__pic-label {
  position: absolute;
  right: 0; bottom: 0;
  padding: 14px 22px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-intro__pic-label .en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink);
  font-weight: 600;
}

/* ================================================================
   ABOUT 企业文化六边形阵列 — 6 hex 向左箭头
   配对关系：
     愿景 VISION (绿)        ↔ 描述 "成为一家不停地研发..."
     使命 MISSION (蓝)       ↔ 描述 "让新材料造福人类生活"
     核心价值观 CORE (红)    ↔ 描述 "客户为先、创新驱动..."
   布局（flat-top hex）：
     col 0 (左, 箭头尖): values-desc
     col 1 (中):         vision, values
     col 2 (右):         vision-desc, mission, mission-desc
       ┌────── R ──────┐
       │    vis-desc   │
       │ vision        │
   L : │       mission │
       │ values        │
       │    mis-desc   │
       └───────────────┘
   ================================================================ */
/* 企业文化区：
   · 浅绿底色 #E8F3ED + 分子背景图
   · 顶部 V mask（白色三角，与上方 about-intro 衔接）
   · 内容包在 #cultureDrawer 里
   · hex 阵列入场用 buildCultureHexAssembly（从四周飞入拼合，仿首页 apps）
   · z-index:1 < about-intro 的 z-index:2，避免内容拉上去时露馅 */
.about-culture {
  position: relative;
  z-index: 10;                       /* 必须 > vision::before 的 z-index 6（vision 不是 stacking
                                         context，::before 跑到根上下文，单类 z-index 1 盖不住）*/
  padding: 240px 0 0 0;              /* 顶部 240（含 165 V mask + 75 间距），取消底 padding */
  background-color: #E8F3ED;
  background-image: url('https://v.sh-original.com/image/default/F9CC602AFA29495CBCC7BC0D50958AD0-6-2.jpg');  /* 企业文化分子背景part.jpg → 阿里云 VOD */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: visible;                 /* 让 layout 部分溢出到 vision 区上方 */
}
/* V mask：白色三角形（apex 朝下），把 about-culture 顶部 165px 切掉中央 V 形，
   让上方 about-intro 的白色"延伸"下来形成 V 缺口的视觉。
   z-index 5 保证盖住 drawer 拉上来的内容。 */
.about-culture::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 165px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 5;
  pointer-events: none;
}
/* drawer 容器 — 包裹 hex 阵和标题。GSAP 控制 transform:translateY。 */
.about-culture__drawer {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.about-culture__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;    /* hex 阵 2/3 + 标题 1/3 */
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 2;
  /* 不溢出 culture box —— 之前 margin-bottom -30 会让 layout 跨过 vision top
     盖住 V mask 顶部 30px，造成视觉上 V base 不全宽 */
  margin-bottom: 0;
}
/* 六边形容器：2.5W 宽 × 3H 高
   注意：所有 .culture-hex__cell.X 选择器都嵌套在 .culture-hex 下，
   以避开和 footer-cta.css 中 .vision (height: 65vh) 的同名冲突
   （specificity 提升到 20+，盖过单类 .vision 的 10）。 */
.culture-hex {
  --hex-w: clamp(150px, 17vw, 220px);  /* 放大：原 13vw 170max → 17vw 220max */
  --hex-h: calc(var(--hex-w) * 0.866);
  position: relative;
  width: calc(var(--hex-w) * 2.5);
  height: calc(var(--hex-h) * 3);
  margin: 0 auto;
}
.culture-hex .culture-hex__cell {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
  min-height: 0;                                 /* 抑制 .vision 的 min-height: 65vh */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  transition: transform .35s var(--ease-out);
}
/* GSAP 聚拢动画结束后会在每个 hex 上留下 inline transform: translate(0,0)，
   会盖过此处的 :hover scale（inline 优先）。用 !important 让悬停放大生效。 */
.culture-hex .culture-hex__cell:hover { transform: scale(1.05) !important; z-index: 2; }
/* 整个六边形可点击 → 跳转企业文化页对应板块。链接铺满 cell，受 cell 的 clip-path
   裁成六边形热区（clip-path 同时裁切指针事件，热区即可见六边形）。 */
.culture-hex .culture-hex__cell .culture-hex__link { position: absolute; inset: 0; z-index: 5; cursor: pointer; }

/* 标题 hex 文字 */
.culture-hex .culture-hex__cell .cn {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}
.culture-hex .culture-hex__cell .en {
  display: block;
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .15em;
  line-height: 1.4;
  font-weight: 600;
}
/* 描述 hex 长文字 */
.culture-hex .culture-hex__cell .desc {
  font-family: var(--font-cn);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  padding: 0 6%;
}

/* ── 位置（flat-top hex 紧密排列）─────────────────────────
   水平间距 0.75W（相邻列），垂直间距 0.5H（相邻列偏移）。
   ─────────────────────────────────────────────────────── */
/* col 2 row 0 — 右上：愿景描述 */
.culture-hex .culture-hex__cell.vision-desc  { left: calc(var(--hex-w) * 1.5);  top: 0; }
/* col 1 row 0.5 — 中上：愿景 (绿) */
.culture-hex .culture-hex__cell.vision       { left: calc(var(--hex-w) * 0.75); top: calc(var(--hex-h) * 0.5); }
/* col 0 row 1 — 左中：核心价值观描述（箭头尖） */
.culture-hex .culture-hex__cell.values-desc  { left: 0;                          top: var(--hex-h); }
/* col 2 row 1 — 右中：使命 (蓝) */
.culture-hex .culture-hex__cell.mission      { left: calc(var(--hex-w) * 1.5);  top: var(--hex-h); }
/* col 1 row 1.5 — 中下：核心价值观 (红) */
.culture-hex .culture-hex__cell.values       { left: calc(var(--hex-w) * 0.75); top: calc(var(--hex-h) * 1.5); }
/* col 2 row 2 — 右下：使命描述 */
.culture-hex .culture-hex__cell.mission-desc { left: calc(var(--hex-w) * 1.5);  top: calc(var(--hex-h) * 2); }

/* ── 配色 ───────────────────────────────────────────── */
.culture-hex .culture-hex__cell.vision    { background: linear-gradient(135deg, #B5D9C0 0%, #E2F1E6 100%); }
.culture-hex .culture-hex__cell.vision .cn,
.culture-hex .culture-hex__cell.vision .en { color: var(--green-deep); }

/* footer-cta.css 中 .vision::before 是页脚 V mask（165px 高浅绿三角，z-index 6）。
   它会"继承"到这里的 .culture-hex__cell.vision 上把文字盖住。禁用之。 */
.culture-hex .culture-hex__cell.vision::before { content: none; display: none; }

.culture-hex .culture-hex__cell.mission   { background: linear-gradient(135deg, #BCD7E6 0%, #E2EDF3 100%); }
.culture-hex .culture-hex__cell.mission .cn,
.culture-hex .culture-hex__cell.mission .en { color: #2C5582; }

.culture-hex .culture-hex__cell.values    { background: linear-gradient(135deg, #FAC4C4 0%, #FCE4E4 100%); }
.culture-hex .culture-hex__cell.values .cn,
.culture-hex .culture-hex__cell.values .en { color: var(--red); }

/* 描述 hex：纯白底 + 轻边框 */
.culture-hex .culture-hex__cell.vision-desc,
.culture-hex .culture-hex__cell.mission-desc,
.culture-hex .culture-hex__cell.values-desc {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(47,131,78,.10);
}

/* 标题区右侧（与 hex 阵列并排） */
.about-culture__head {
  text-align: left;
  padding-left: 0;
}
.about-culture__head .triangle {
  display: block;
  width: 38px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
  margin-left: -34px;
}
.about-culture__head .cn {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.about-culture__head .en {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 980px) {
  /* about-intro：3 列改 1 列堆叠 */
  .about-intro__row { grid-template-columns: 1fr; }
  /* about-culture：标题块在 hex 阵下方 */
  .about-culture__layout { grid-template-columns: 1fr; }
}

/* ================================================================
   footer-cta V mask 颜色匹配 — 仅 about 页
   footer-cta.css 中 .vision::before 默认 #E2EEE6（匹配首页 news 区）。
   about 页上方是 about-culture (#E8F3ED)，需要 override。
   ================================================================ */
section.vision::before {
  background: #E8F3ED;
}