/* ============================================================
   产品页 · 系统区块视觉区统一（2026-10-30）
   目标：
   1) 六个系统区块的图片区尺寸一致（同一外框比例，内部自适应压缩）
   2) 图文左右交替：FinMe 文左 / FinSim 图左 / FinTwin 文左 /
      FinGo 图左 / FinFee 文左 / FinCall 图左
   说明：内部示意 UI 全部是矢量，按容器高度等比缩放，不裁切、不变形。
   ============================================================ */

/* ---------- 1. 统一外框比例 ---------- */
body.v5-site main .feature-row .feature-visual{
  aspect-ratio: 4 / 3;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
/* FinMe 那张是 16:9 的平台全景图，左右两侧都排了系统卡，不能裁切；
   外框与其他五块同为 4:3，图按原比例完整居中显示。 */
body.v5-site main .feature-row#finme .feature-visual img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- 2. 卡片式产品 UI：填满外框 ---------- */
body.v5-site main .feature-row .feature-visual .wf-product-visual{
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}
body.v5-site main .feature-row .feature-visual .wf-product-ui{
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}
body.v5-site main .feature-row .feature-visual .wf-product-ui > .wf-ui-header{
  flex: 0 0 auto;
}
body.v5-site main .feature-row .feature-visual .wf-product-ui > .wf-ui-note{
  flex: 0 0 auto;
  margin-top: auto;
}

/* ---------- 3. 纯 SVG 的两块（FinFee / FinCall）---------- */
body.v5-site main .feature-row#finfee .feature-visual > svg,
body.v5-site main .feature-row#fincall .feature-visual > svg{
  width: 100%;
  height: 100%;
  display: block;
  padding: 10px;
  box-sizing: border-box;
}

/* ---------- 4. FinSim：拓扑图 + 水锤曲线 ---------- */
body.v5-site main #finsim .wf-product-ui > .wf-ui-network{
  flex: 1 1 46%;
  min-height: 0;
  position: relative;
  padding: 9px 10px 0;
  overflow: hidden;
}
body.v5-site main #finsim .wf-ui-network > svg{
  position: absolute;
  left: 10px; right: 10px; top: 9px; bottom: 0;
  width: calc(100% - 20px);
  height: calc(100% - 9px);
}
body.v5-site main #finsim .wf-product-ui > .wf-waterhammer{
  flex: 1 1 54%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.v5-site main #finsim .wf-hammer-head{ flex: 0 0 auto; }
body.v5-site main #finsim .wf-hammer-footer{ flex: 0 0 auto; }
body.v5-site main #finsim .wf-hammer-chart{
  position: relative;
  flex: 1 1 auto;
  min-height: 52px;
}
body.v5-site main #finsim .wf-hammer-chart > svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- 5. FinTwin：拓扑舞台 ---------- */
body.v5-site main #fintwin .wf-twin-stage{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.v5-site main #fintwin .wf-twin-eyebrow{ flex: 0 0 auto; }
body.v5-site main #fintwin .wf-twin-stage > svg{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: block;
}
body.v5-site main #fintwin .wf-twin-footer{ flex: 0 0 auto; }

/* ---------- 6. FinGo：三步流程 + 反馈曲线 ---------- */
body.v5-site main #fingo .wf-fingo-panel{
  flex: 0 0 auto;
  margin: 20px 0 14px;
}
body.v5-site main #fingo .wf-fingo-feedback{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.v5-site main #fingo .wf-fingo-feedback > .wf-feedback-title,
body.v5-site main #fingo .wf-fingo-feedback > .wf-feedback-line{ flex: 0 0 auto; }
body.v5-site main #fingo .wf-fingo-feedback > svg{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 0;
}

/* ---------- 7. 窄屏：取消固定比例，恢复自然高度 ----------
   手机上一屏只看得到一块，不需要横向对齐；硬压成 5:4 会让
   卡片内文字挤在一起、曲线被裁。这里全部退回自然流式布局。 */
@media (max-width: 980px){
  body.v5-site main .feature-row .feature-visual{
    aspect-ratio: auto;
    display: block;
  }
  body.v5-site main .feature-row#finme .feature-visual img{
    height: auto;
    object-fit: fill;
  }
  body.v5-site main .feature-row .feature-visual .wf-product-ui{
    height: auto;
    display: block;
  }
  body.v5-site main .feature-row .feature-visual .wf-product-ui > .wf-ui-note{
    margin-top: 10px;
  }

  body.v5-site main #finsim .wf-product-ui > .wf-ui-network{ flex: 0 0 auto; }
  body.v5-site main #finsim .wf-ui-network > svg{
    position: static;
    width: 100%;
    height: auto;
  }
  body.v5-site main #finsim .wf-product-ui > .wf-waterhammer{ display: block; }
  body.v5-site main #finsim .wf-hammer-chart{ position: static; min-height: 0; }
  body.v5-site main #finsim .wf-hammer-chart > svg{
    position: static;
    width: 100%;
    height: auto;
  }

  body.v5-site main #fintwin .wf-twin-stage{ display: block; flex: 0 0 auto; }
  body.v5-site main #fintwin .wf-twin-stage > svg{ width: 100%; height: auto; }

  body.v5-site main #fingo .wf-fingo-panel{ margin: 16px 0 12px; }
  body.v5-site main #fingo .wf-fingo-feedback{ display: block; flex: 0 0 auto; }
  body.v5-site main #fingo .wf-fingo-feedback > svg{ width: 100%; height: auto; }

  body.v5-site main .feature-row#finfee .feature-visual > svg,
  body.v5-site main .feature-row#fincall .feature-visual > svg{ height: auto; }
}