/* ============================================================
   LAKEFOX section-platforms — 交易平台下载（任务 18）
   依赖 base.css 令牌（禁止裸 hex / 禁止 section 内发明令牌）：
     --space-* 间距 / --radius-* 圆角 / --duration-* 动效 / --ease-out
     --acc（bullet 图标，白底 ≈5.7:1 ✓）
     --data-bg / --data-text（视觉卡深蓝金字 ≈5.9:1 ✓，DESIGN-SPEC §2.2）
     --color-foreground / --color-card-background（scheme 令牌，fallback 品牌色）
   RTL：水平方向一律逻辑属性；交替反转用 flex-direction row/row-reverse（RTL 下自动镜像）
   动效：仅 transform / background-color（≤200ms，--duration-fast 150ms）
   ============================================================ */

.lf-platforms {
  padding-block: var(--section-pad); /* 48px 移动端区块节奏（base.css §6 令牌） */
}

/* ---------- 标题（t: sections.platforms.title，h2 字号由 base.css 阶梯提供） ---------- */
.lf-platforms__header {
  text-align: center; /* 对称居中场景允许物理等价写法 */
  margin-block-end: var(--space-10);
}

.lf-platforms__title {
  color: inherit;
  margin: 0;
}

/* ---------- 平台卡（交替图文，移动端单列堆叠） ---------- */
.lf-platform-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-8);
}

/* ---------- 文字侧 ---------- */
.lf-platform-card__name {
  color: inherit;
  margin-block: 0 var(--space-3);
}

.lf-platform-card__tagline {
  margin-block: 0 var(--space-6);
  max-width: var(--measure-intro);
  color: var(--color-foreground, var(--text-primary));
}

.lf-platform-card__features {
  list-style: none;
  margin-block: 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.lf-platform-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-foreground, var(--text-primary));
}

/* 卖点图标：砖红（白底 ≈5.7:1 ✓，§4 color-not-only 以图标+文字双通道） */
.lf-platform-card__features svg {
  flex: none;
  margin-block-start: var(--space-1);
  color: var(--acc);
}

/* ---------- 下载按钮组（4 个，每屏单 primary → 统一 outline 次级处理） ---------- */
.lf-platform-card__downloads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.lf-platform-card__download svg {
  flex: none;
}

/* ---------- 视觉侧（token 深蓝数据卡 + arch 水印；无外部图片 URL） ---------- */
.lf-platform-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--data-bg); /* 深蓝专业数据区，DESIGN-SPEC §2.2 */
  color: var(--data-text);
}

/* arch 水印：opacity ≤.1 / z-0 / pointer-events none（base.css .lf-watermark 契约） */
.lf-platform-card__watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
  opacity: 0.1;
  pointer-events: none;
}

.lf-platform-card__visual img {
  position: relative;
  z-index: 1;
  max-width: 60%;
  height: auto;
}

.lf-platform-card__badge {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* 徽章眉题：采纳 .lf-eyebrow .lf-eyebrow--inverse（深底金字），本语境覆盖更小更宽的字阶 */
.lf-platform-card__badge-label {
  display: block; /* 覆盖 eyebrow 的 inline-block，徽章占满整行 */
  font-size: var(--text-1); /* 深底小徽章更小（eyebrow 基类为 --text-3） */
  letter-spacing: var(--tracking-wide); /* 更宽字距（eyebrow 基类为 --tracking-caps） */
  margin-block-end: var(--space-2);
}

.lf-platform-card__badge-name {
  display: block;
  font-family: var(--font-heading-family);
  font-size: var(--text-h3); /* 曲线统一到字阶（原 clamp 下沿/上沿一致，仅中值收敛） */
  color: var(--text-inverse); /* 白 on 深蓝 ≈11.5:1 ✓ */
  margin-block-end: var(--space-2);
}

.lf-platform-card__badge-note {
  font-size: var(--text-3);
  color: var(--data-text);
}

/* ---------- Web Trader 网页版登录入口 ---------- */
.lf-platforms__login {
  text-align: center;
  margin-block-start: var(--space-8);
}

/* 链接按钮采纳 base.css .lf-btn--link（44px 触摸目标/下划线/砖红 hover），无额外皮层声明 */
.lf-platforms__login-link svg {
  color: var(--acc);
}

/* ---------- 响应式：tablet 起图文双列交替 ---------- */
@media (min-width: 768px) {
  /* 桌面节奏收敛：与其他首页区块一致取 --section-pad-lg（原未放大） */
  .lf-platforms {
    padding-block: var(--section-pad-lg);
  }

  .lf-platform-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
  }

  .lf-platform-card__body,
  .lf-platform-card__visual {
    flex: 1 1 50%;
  }

  /* 交替反转：MT4 左文右卡 / MT5 右文左卡；row-reverse 在 RTL 下自动镜像 */
  .lf-platform-card--reversed {
    flex-direction: row-reverse;
  }

  .lf-platform-card__visual {
    min-height: 320px;
  }
}

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

/* ---------- 客户 2026-09：灰色底 + 右侧插图 + 深色下载按钮 ---------- */
.lf-platforms--bg-soft {
  background: var(--soft);
}

/* 右侧插图：样式对齐首页「屡获殊荣的 MT5 交易平台」右列（圆角 + 悬浮投影，无卡片壳） */
.lf-platform-card__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-float);
}

/* 深色胶囊下载按钮：左侧品牌图标 + 右侧两行文案（参考客户示例图） */
.lf-platform-card__downloads {
  flex-wrap: wrap;
}

.lf-dl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-5);
  min-inline-size: 168px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--text-inverse, #fff);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.lf-dl:hover {
  transform: translateY(-2px);
  background: var(--dark);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}

.lf-dl__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-inverse, #fff);
}

.lf-dl__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.lf-dl__text small {
  font-size: 11.5px;
  opacity: 0.72;
  white-space: nowrap;
}

.lf-dl__text b {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* 右侧为图片时的面板：去掉装饰壳，让插图（圆角 + 投影）直接浮在灰底上 */
.lf-platform-card__visual--img {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
}

/* 客户 2026-09：右侧配图占满整列（参考首页 .lf-app__visual 的图片铺满方式） */
.lf-platform-card__visual--img img,
.lf-platform-card__img {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* 卡片标题颜色（客户 2026-09：platforms 页左标题改朱砂） */
.lf-platforms--title-accent .lf-platform-card__name {
  color: var(--acc);
}