/* ============================================================
   LAKEFOX — section-about-content.css
   品牌故事 + 监管合规 + 公司信息（sections/about-content.liquid 顶部自引）
   结构（Trust & Authority 模式：叙事 → 监管徽章 Proof → fact 卡 → 时间线 → 公司信息）
   布局：移动优先 1 列 → 768 双列 → 1024 三列/四徽章横排（DESIGN-SPEC §6 breakpoint-consistency）
   令牌：仅 var() 引用，无裸 hex（rgba(10,10,10,·) 为曜石黑 --bg-dark 透明化，§2.7 例外）
   对比度锁定配对（§2.10 实测表）：深蓝卡 --data-bg + --data-text ≈5.9:1 ✓；
       深蓝 + 白 --text-inverse ≈11.5:1 ✓（SSL 徽章，任务 18 视觉卡同款）
   水印：.lf-watermark（opacity .1 / z-0 / pointer-events none）icon-dome 品牌连续性（§九.3）
   RTL：水平方向一律逻辑属性；叙事行 [dir="rtl"] .lf-rtl-text 行高 1.75（base.css §11）
   ============================================================ */

/* 区块垂直节奏：移动端 ≥48px，桌面端取更大阶梯（DESIGN-SPEC §6 section spacing hierarchy） */
.lf-about {
  display: grid;
  gap: var(--space-12); /* 区块间间距（回到 48px 阶梯；原 60px 为离阶派生值，DESIGN-SPEC §6 统一阶梯） */
  padding-block: var(--section-pad); /* 区块垂直节奏 ≥48px（§六） */
}

@media (min-width: 768px) {
  .lf-about {
    padding-block: var(--section-pad-lg); /* 桌面端 72px（§六 section spacing hierarchy） */
  }
}

/* 区块标题：对称居中（物理写法豁免）；base.css h2 全局衬线 + clamp 字阶 */
.lf-about__title {
  margin: 0 0 40px; /* 下边距 40px（客户 2026-09） */
  text-align: center;
}

/* 区块内子标题（h3）：清全局边距，颜色继承 scheme foreground */
.lf-about__subtitle {
  margin: 0;
}

/* ===== 品牌故事：移动堆叠 → 768 双列（文字 5fr / 视觉 4fr） ===== */
.lf-about__story {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .lf-about__story {
    grid-template-columns: 5fr 4fr;
    align-items: stretch;
  }
}

.lf-about__story-copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

/* 叙事行长控制（§三 line-length：35-75ch） */
.lf-about__story-text {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure-long); /* 长文行长 68ch（§三 line-length） */
}

.lf-about__para {
  margin: 0;
  color: var(--color-foreground, var(--text-primary)); /* 白底深字 ≈14.7:1 ✓ */
}

/* 地域定位行：金色 globe 图标 + 辅助文字（双通道，非纯色传达） */
.lf-about__region {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-about__region-icon {
  display: inline-flex;
  flex: none;
  color: var(--acc); /* 装饰性点缀，旁有文字双通道 */
}

/* 视觉卡：.lf-data 深蓝底金字（base.css §7，≈5.9:1 ✓）
   水印 icon-dome currentColor=金（继承 .lf-data 的 --data-text），opacity .1 压底 */
.lf-about__story-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  padding: var(--space-8);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* 内容层 z-1 压在水印（z-0）之上（§5 z-index-management） */
.lf-about__story-visual-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
}

.lf-about__story-visual-brand {
  font-family: var(--font-heading-family), Georgia, 'Times New Roman', serif;
  font-size: var(--text-7); /* 22px 展示小标题（§四 字阶） */
  font-weight: 700;
  line-height: var(--leading-heading);
}

/* 视觉卡标签：lf-eyebrow lf-eyebrow--inverse 组件接管字阶/字距/大写/配色（liquid 已加类）；
   此处仅保留透明度降调（深蓝卡上的辅助金标，≥3:1 大字辅助 §四.1） */
.lf-about__story-visual-tag {
  opacity: 0.85;
}

/* ===== 监管与合规：徽章组 1 → 2 → 4 列（§6 网格阶梯） ===== */
.lf-about__regulatory {
  display: grid;
  gap: var(--space-8);
}

.lf-about__regulatory-head {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.lf-about__regulatory-note {
  margin: 0;
  max-width: var(--measure-long); /* 长文行长 68ch（§三） */
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-about__regulatory-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .lf-about__regulatory-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .lf-about__regulatory-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 徽章卡：lf-card 组件接管底/边/圆角/阴影（liquid 已加类），此处仅保留网格与内边距 */
.lf-about__regulatory-item {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  align-content: start;
  padding: var(--space-6);
}

/* 图标 chip：lf-icon-chip 组件接管（48px 基类，liquid 已加类；金色图标 + 品牌色浅底自适应明暗 scheme §5.2 同款） */

.lf-about__regulatory-label {
  font-size: var(--text-3); /* 14px 辅助标签（§四.1 允许场景） */
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-about__regulatory-value {
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

/* SSL 安全徽章：深蓝数据卡（--data-bg + 金/白，≈5.9:1 / ≈11.5:1 ✓）
   —— 安全证明视觉中心（Trust & Authority：security badge 突出） */
.lf-about__regulatory-item--ssl {
  background: var(--data-bg);
  border-color: transparent;
}

.lf-about__regulatory-item--ssl .lf-about__regulatory-icon {
  color: var(--data-text);
  background: var(--color-card-background, var(--bg-gray));
  background: color-mix(in srgb, var(--data-text) 16%, var(--data-bg));
}

.lf-about__regulatory-item--ssl .lf-about__regulatory-label {
  color: var(--data-text); /* 深蓝底金标 ≈5.9:1 ✓（锁定配对） */
}

.lf-about__regulatory-item--ssl .lf-about__regulatory-value {
  color: var(--text-inverse); /* 深蓝底白字 ≈11.5:1 ✓（任务 18 实测） */
}

/* ===== 核心信息（fact 卡）：1 → 2 → 3 列 ===== */
.lf-about__facts {
  display: grid;
  gap: var(--space-8);
}

.lf-about__facts-head {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.lf-about__facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .lf-about__facts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .lf-about__facts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* fact 卡：lf-card lf-card--hover 组件接管底/边/圆角/阴影/hover 上移 -4px（liquid 已加类），
   此处仅保留横向图标 + 文字布局 */
.lf-about__fact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
}

/* fact 图标：lf-icon-chip 组件接管（48px 基类，liquid 已加类） */

.lf-about__fact-body {
  display: grid;
  gap: var(--space-1);
}

.lf-about__fact-label {
  font-size: var(--text-3); /* 14px 辅助标签 */
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-about__fact-value {
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

/* ===== 发展历程：垂直时间线（桌面金色竖线 + 节点） ===== */
.lf-about__timeline {
  display: grid;
  gap: var(--space-8);
}

.lf-about__timeline-head {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.lf-about__timeline-note {
  margin: 0;
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-about__timeline-rail {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  /* 竖线：inset-inline-start 逻辑定位，RTL 自动镜像；金色淡化（装饰 ≤35% 不抢内容） */
  .lf-about__timeline-rail {
    position: relative;
    padding-inline-start: var(--space-8);
  }

  .lf-about__timeline-rail::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.375rem; /* 与年份徽章圆点对齐（pill 半径 1.25rem / 2） */
    inset-block: 0;
    width: 2px;
    background: var(--acc);
    opacity: 0.35;
  }
}

.lf-about__timeline-item {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .lf-about__timeline-item {
    grid-template-columns: 6rem 1fr; /* 年份列 + 卡片列 */
    gap: var(--space-6);
    align-items: start;
  }
}

/* 年份徽章：lf-badge 组件接管胶囊/加粗基/行高（liquid 已加类）；
   深蓝底金字锁定配对保留（--data-bg/--data-text ≈5.9:1 ✓，任务 18 数据徽章同款） */
.lf-about__timeline-year {
  justify-content: center; /* 年份文本居中（lf-badge 基类未覆盖） */
  width: fit-content;
  min-width: 6rem;
  padding: var(--space-2) var(--space-4);
  background: var(--data-bg);
  color: var(--data-text);
  font-size: var(--text-3); /* 14px 辅助徽章字阶（行高由 lf-badge 基类 --leading-snug 提供） */
  font-weight: 700; /* 年份强调，覆盖 lf-badge 基类 600 */
  font-variant-numeric: tabular-nums; /* 等宽数字防跳动（§6 number-tabular） */
  white-space: nowrap;
}

/* 时间线卡：lf-card 组件接管底/边/圆角/阴影（liquid 已加类），此处仅保留网格与内边距 */
.lf-about__timeline-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
}

.lf-about__timeline-title {
  margin: 0; /* base.css h4 全局字阶 */
}

.lf-about__timeline-desc {
  margin: 0;
  max-width: var(--measure-long); /* 长文行长 68ch（§三） */
  color: var(--color-text-secondary, var(--text-secondary));
}

/* ===== 公司信息：dl 行（移动堆叠 → 768 双列 标签/值） ===== */
.lf-about__company {
  display: grid;
  gap: var(--space-8);
}

.lf-about__company-head {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

/* 公司信息卡：lf-card 组件接管底/边/圆角/阴影（liquid 已加类），此处仅保留网格与内边距 */
.lf-about__company-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6);
}

.lf-about__company-row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .lf-about__company-row {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
    gap: var(--space-6);
  }
}

.lf-about__company-term {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

.lf-about__company-icon {
  display: inline-flex;
  flex: none;
  color: var(--acc); /* 装饰性点缀，旁有文字双通道 */
}

.lf-about__company-desc {
  margin: 0;
  color: var(--color-foreground, var(--text-primary));
}

/* 电话/邮箱链接：下划线链接（§5.1 Link 变体契约；hover 砖红白底 ≈5.7:1 ✓） */
.lf-about__company-desc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lf-about__company-desc a:hover {
  color: var(--acc);
}

/* 减少动态偏好：关闭卡片 hover 过渡（transition 现由 .lf-card--hover 提供，此处局部强化；
   base.css §12 全局兜底之外） */
@media (prefers-reduced-motion: reduce) {
  .lf-about__fact-card {
    transition: none;
  }
}


/* 客户 2026-09：故事区眉题去下边距（仅本部分作用域；不影响 product-detail 其它模块） */
.lf-about__story-copy .lf-pdetail__eyebrow {
  margin-block-end: 0;
}

/* ---------- 右侧照片拼贴 + 行情浮标（客户 2026-09，参考 xm.com/cn/about 右栏） ---------- */
.lf-about__collage {
  display: none;
  /* 父容器是 flex，需显式占满宽度 */
  inline-size: 100%;
  flex: 1 1 auto;
  min-inline-size: 0;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.lf-about__story-visual--collage {
  /* 客户 2026-09：去掉右侧插图的背景色（原深青面板），照片直接浮在页面上 */
  background: none;
  box-shadow: none;
  padding: 0;
}

.lf-about__story-visual--collage .lf-about__collage { display: grid; }
.lf-about__story-visual--collage .lf-about__story-visual-inner,
.lf-about__story-visual--collage .lf-watermark { display: none; }

.lf-about__collage-tile {
  display: block;
  border-radius: var(--radius-card, 16px);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 45%, transparent);
}

.lf-about__story-visual--collage .lf-about__collage {
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-5);
  /* 参考 xm.com/cn/about 右栏（relative flex justify-center items-center）：
     整组配图在栏内水平居中，行情浮标环绕四周 */
  justify-content: center;
  align-items: center;
  max-inline-size: 560px;
  margin-inline: auto;
}

.lf-about__collage-tile--a { aspect-ratio: 1 / 1; }
.lf-about__collage-tile--b { aspect-ratio: 3 / 4; margin-block-start: var(--space-9); }
.lf-about__collage-tile--c { aspect-ratio: 4 / 3; margin-block-start: calc(var(--space-6) * -1); }
.lf-about__collage-tile--d { aspect-ratio: 16 / 7; margin-block-start: calc(var(--space-4) * -1); }

.lf-about__chip {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 var(--space-2);
  align-items: center;
  padding: 10px var(--space-5);
  border-radius: 9999px;
  background: var(--bg-white);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--ink) 50%, transparent), inset 0 0 0 1px var(--gray);
  font-size: 14px;
  line-height: 1.25;
}

.lf-about__chip + .lf-about__chip { margin-block-start: 0; }

.lf-about__chip b { font-weight: 700; color: var(--ink); }
.lf-about__chip i { font-style: normal; color: var(--ink-2); }
.lf-about__chip em { grid-column: 1 / -1; font-style: normal; color: var(--up); font-size: 12px; }
.lf-about__chip--1 { inset-block-start: 8%; inset-inline-start: 2%; }
.lf-about__chip--2 { inset-block-start: 38%; inset-inline-end: 2%; }
.lf-about__chip--3 { inset-block-end: 30%; inset-inline-start: 14%; }

/* ---------- 右栏配图加载动效（客户 2026-09）：4 图与 3 个浮标同时淡入上浮 ---------- */
@keyframes lf-collage-in {
  from { opacity: 0; transform: translateY(22px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.lf-about__collage-tile,
.lf-about__chip {
  animation: lf-collage-in 2.1s var(--ease) both;
}

/* 客户 2026-09：整组一次性加载，不做错峰（全部同时入场） */

@media (prefers-reduced-motion: reduce) {
  .lf-about__collage-tile,
  .lf-about__chip {
    animation: none;
  }
}