:root {
  /* ↓↓↓↓↓↓↓↓ 可自定义参数 ↓↓↓↓↓↓↓↓ */
  --bdc-duo-icon-left:  44px;    /* ★ 左列图标大小 */
  --bdc-duo-icon-right: 44px;    /* ★ 右列图标大小 */
  --bdc-duo-icon-scale: 1;       /* ★ 图标整体缩放系数 */
  --bdc-duo-gap:        16px;    /* 图标与文字间距 */
  --bdc-duo-item-gap:   38px;    /* 每组图文之间的纵向间距 */
  --bdc-duo-col-gap:    34px;    /* 三栏之间的横向间距 */
  --bdc-duo-title:      17px;    /* 标题字号 */
  --bdc-duo-text:       13px;    /* 正文字号 */
  --bdc-duo-fg:         #33383F; /* 文字颜色 */
  --bdc-duo-muted:      #7A828C; /* 次要文字颜色 */
  --bdc-duo-accent:     #161D60; /* 标题强调色 */
  --bdc-duo-radius:     10px;    /* 中间大图圆角 */
  --bdc-duo-center-w:   100%;    /* ★ 中间大图宽度，支持 px 或 % */
  --bdc-duo-center-h:   520px;   /* ★ 中间大图高度，支持 px 或 auto（auto=按原图比例） */
  --bdc-duo-center-fit: cover;   /* ★ 填充方式：cover / contain / fill / scale-down */
  --bdc-duo-slide:      72px;    /* ★ 滑入距离 */
  --bdc-duo-dur:        .9s;     /* ★ 滑入时长 */
  --bdc-duo-delay:      .05s;    /* ★ 动画延迟 */
  /* ↑↑↑↑↑↑↑↑ 可自定义参数 ↑↑↑↑↑↑↑↑ */
}

.bdc-duo,
.bdc-duo * { box-sizing: border-box; }

.bdc-duo {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0;
  color: var(--bdc-duo-fg);
  font-family: inherit;
}

.bdc-duo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 30%) minmax(0, 1fr);
  gap: var(--bdc-duo-col-gap);
  align-items: stretch;
}

/* ---------- 左右图文列 ---------- */
.bdc-duo__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--bdc-duo-item-gap);
  min-width: 0;
}

.bdc-duo__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bdc-duo-gap);
}

.bdc-duo__body { min-width: 0; }

.bdc-duo__title {
  margin: 0 0 8px;
  font-size: var(--bdc-duo-title);
  font-weight: 700;
  color: var(--bdc-duo-accent);
  line-height: 1.35;
}

.bdc-duo__text {
  margin: 0;
  font-size: var(--bdc-duo-text);
  line-height: 1.75;
  color: var(--bdc-duo-muted);
}

/* 左列：图标在文字右侧、文字右对齐（还原参考图效果） */
.bdc-duo__col--left .bdc-duo__item {
  flex-direction: row-reverse;
  text-align: right;
}

/* ---------- ★ 图标：尺寸可分别自定义 ---------- */
.bdc-duo__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  calc(var(--bdc-duo-icon, var(--bdc-duo-icon-left))  * var(--bdc-duo-icon-scale));
  height: calc(var(--bdc-duo-icon, var(--bdc-duo-icon-left))  * var(--bdc-duo-icon-scale));
}

.bdc-duo__col--right .bdc-duo__icon {
  width:  calc(var(--bdc-duo-icon, var(--bdc-duo-icon-right)) * var(--bdc-duo-icon-scale));
  height: calc(var(--bdc-duo-icon, var(--bdc-duo-icon-right)) * var(--bdc-duo-icon-scale));
}

.bdc-duo__icon > svg,
.bdc-duo__icon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
  color: var(--bdc-duo-accent);
}

/* ---------- 中间大图（宽 / 高 / 填充方式均可调） ---------- */
.bdc-duo__center {
  min-width: 0;
  /* min() 保证宽度百分比或 px 都不会撑破所在列 */
  width: min(var(--bdc-duo-center-w), 100%);
  margin-inline: auto;
  align-self: center;
  border-radius: var(--bdc-duo-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 14, 50, .18);
}

.bdc-duo__center img {
  display: block;
  width: 100%;
  height: var(--bdc-duo-center-h);
  object-fit: var(--bdc-duo-center-fit);
}

/* ---------- ★ 滑入特效（由 JS 添加 bdc-duo--anim / bdc-duo--in） ---------- */
.bdc-duo--anim .bdc-duo__col--left {
  opacity: 0;
  transform: translateX(calc(-1 * var(--bdc-duo-slide)));
  transition:
    opacity var(--bdc-duo-dur) ease,
    transform var(--bdc-duo-dur) cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--bdc-duo-delay);
  will-change: opacity, transform;
}

.bdc-duo--anim .bdc-duo__col--right {
  opacity: 0;
  transform: translateX(var(--bdc-duo-slide));
  transition:
    opacity var(--bdc-duo-dur) ease,
    transform var(--bdc-duo-dur) cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--bdc-duo-delay);
  will-change: opacity, transform;
}

.bdc-duo--anim .bdc-duo__center {
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity var(--bdc-duo-dur) ease,
    transform var(--bdc-duo-dur) ease;
}

/* 进入视口后归位 */
.bdc-duo--anim.bdc-duo--in .bdc-duo__col--left,
.bdc-duo--anim.bdc-duo--in .bdc-duo__col--right {
  opacity: 1;
  transform: translateX(0);
}

.bdc-duo--anim.bdc-duo--in .bdc-duo__center {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .bdc-duo__grid { grid-template-columns: 1fr; }
  .bdc-duo__center { order: -1; max-width: 480px; margin: 0 auto; }  /* 手机端大图放最前 */
  .bdc-duo__col--left .bdc-duo__item { flex-direction: row; text-align: left; }  /* 手机端统一样式 */
}

/* 尊重系统「减少动态效果」设置：直接显示，不做滑入 */
@media (prefers-reduced-motion: reduce) {
  .bdc-duo--anim .bdc-duo__col--left,
  .bdc-duo--anim .bdc-duo__col--right,
  .bdc-duo--anim .bdc-duo__center {
    opacity: 1;
    transform: none;
    transition: none;
  }
}