/* ==========================================================================
   About Us 页面 · 图文增强样式
   依赖 index.css / index.min.css 中定义的设计变量：
   --brand --ink --ink-dim --ink-faint --bg --bg-panel --bg-hover --border --grid --mono --sans
   命名前缀统一使用 .about- ，避免与全站样式冲突。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 顶部实景区（替代原纯色 page-hero）
   -------------------------------------------------------------------------- */
.about-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:460px;
  background:#141414;
  border-bottom:1px solid var(--border);
}
.about-hero-media{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.about-hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}
.about-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.78) 42%,rgba(12,12,12,.36) 100%);
}
.about-hero .container{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:72px}
.about-hero-kicker{
  font-family:var(--mono);font-size:1.1rem;font-weight:600;
  color:var(--brand);text-transform:uppercase;letter-spacing:.14em;
  display:block;margin-bottom:16px;
}
.about-hero .page-title{color:#fff;font-size:3.6rem;line-height:1.12;max-width:24ch}
.about-hero-sub{
  font-family:var(--mono);font-size:1.2rem;color:rgba(255,255,255,.8);
  text-transform:uppercase;letter-spacing:.1em;display:block;
  margin-top:18px;max-width:64ch;line-height:1.9;
}
.about-hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.about-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  padding:7px 14px;
}
.about-chip i{color:var(--brand);font-size:1.1rem}

/* --------------------------------------------------------------------------
   2. 通用图片容器（figure + 角标说明）
   -------------------------------------------------------------------------- */
.about-figure{
  position:relative;
  display:block;
  margin:0;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-panel);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.about-figure img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.about-figure:hover{border-color:rgba(194,0,14,.28);box-shadow:0 18px 44px rgba(0,0,0,.09)}
.about-figure:hover img{transform:scale(1.03)}
.about-figure figcaption{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--bg);
  font-family:var(--mono);font-size:1.15rem;line-height:1.6;color:var(--ink-dim);
}
.about-figure figcaption .about-pin{color:var(--brand);flex-shrink:0;padding-top:2px}
.about-figure figcaption b{color:var(--ink);font-weight:600}

/* 图注叠加在图片底部时（用于无独立 caption 条的窄位） */
.about-figure--overlay figcaption{
  position:absolute;left:0;right:0;bottom:0;
  border-top:none;
  background:linear-gradient(0deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.55) 60%,rgba(10,10,10,0) 100%);
  color:rgba(255,255,255,.86);
  padding:32px 18px 14px;
}
.about-figure--overlay figcaption b{color:#fff}

/* 图片角标（沿用模板中已有的 data-label 约定） */
.about-frame-label::after{
  content:attr(data-label);
  position:absolute;top:-1px;left:-1px;z-index:3;
  font-family:var(--mono);font-size:1rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--brand);
  padding:4px 12px;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   3. 两栏（文字 / 图片）布局
   -------------------------------------------------------------------------- */
.about-split{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:32px;
  align-items:stretch;
}
.about-split--list{grid-template-columns:1.25fr .75fr}
/* 文字框随图片拉伸时，让文字在框内垂直居中，避免下半部留出大片空白 */
.about-split > .frame-box{display:flex;align-items:center}
/* 竖幅图限高：既保留人像比例，又不把相邻文字框拉得过高 */
.about-tall{aspect-ratio:4/5;max-height:440px;height:100%}

/* 宽幅全景图（保持不变形，宽度铺满） */
.about-panorama{aspect-ratio:21/9;width:100%}
.about-panorama img{object-position:center 55%}

/* --------------------------------------------------------------------------
   4. 三图条（等比方图，带地理位置图注）
   -------------------------------------------------------------------------- */
.about-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}
.about-strip .about-figure img{aspect-ratio:1/1}

/* --------------------------------------------------------------------------
   5. Mission / Vision 图文卡（上图下文）
      后台填写的正文可能很长，若图片放在文字旁边并随内容拉伸，
      竖图会被拉到上千像素。改为图片固定 16:9 置顶，文字在下，
      卡片高度随文字自然增长，图片不再变形拉伸。
   -------------------------------------------------------------------------- */
.about-card-media{
  display:block;
  padding:0 !important;
}
.about-card-media .about-figure{
  border:none;
  border-bottom:1px solid var(--border);
  aspect-ratio:16/9;
}
.about-card-media .about-figure img{object-position:center 40%}
.about-card-body{padding:28px;display:flex;flex-direction:column;gap:12px}

/* --------------------------------------------------------------------------
   7. 现场足迹画册（GEO 地理信息承载区）
   -------------------------------------------------------------------------- */
.about-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}
.about-gallery .about-figure img{aspect-ratio:16/9}
.about-note{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:1.15rem;color:var(--ink-faint);
  margin-top:16px;flex-wrap:wrap;
}
.about-note i{color:var(--brand)}

/* --------------------------------------------------------------------------
   9. 栅格列数：用类名替代模板里的内联 grid-template-columns
      （内联样式优先级高于样式表中的 @media 规则，会导致手机上仍是多列挤在一起）
   -------------------------------------------------------------------------- */
.about-grid-2{grid-template-columns:repeat(2,1fr)}
.about-grid-4{grid-template-columns:repeat(4,1fr)}
.about-dash-2{grid-template-columns:repeat(2,1fr)}

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .about-grid-4{grid-template-columns:repeat(2,1fr)}
  .about-hero .page-title{font-size:3rem}
  .about-split,
  .about-split--list{grid-template-columns:1fr}
  .about-tall{aspect-ratio:4/3;max-height:none}
  .about-gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .about-hero{min-height:380px}
  .about-hero .container{padding-top:52px;padding-bottom:52px}
  .about-hero .page-title{font-size:2.5rem}
  .about-hero-sub{font-size:1.1rem}
  .about-panorama{aspect-ratio:16/9}
  .about-strip{grid-template-columns:1fr;gap:18px}
  .about-strip .about-figure img{aspect-ratio:4/3}
  .about-gallery{grid-template-columns:1fr;gap:18px}
  .about-grid-2,.about-grid-4,.about-dash-2{grid-template-columns:1fr}
  .about-card-body{padding:24px 20px}
}