/* ==================== 概念设计阶段 - 独立样式文件 ==================== */
/* 基于 Figma 设计稿: node-id=669-3928 */
/* 无容器设计 - 每个元素独立绝对定位 */
/* 三语言分页，每个语言页面单独调整副标题位置 */

/* ==================== 基础定位变量 ==================== */
:root {
    --steps-base-top: calc(29rem); /* 轮播容器下方，下移2rem */
    --steps-base-left: calc(14rem); /* 左侧边距，左移一点给更多空间 */
    --icon-size: calc(2.5rem); /* 图标尺寸 */
    --icon-half: calc(1.25rem); /* 图标半宽 */
    --title-row1-top: calc(var(--steps-base-top) + 3.9375rem); /* 第一行标题统一高度 */
    --title-row2-top: calc(var(--steps-base-top) + 8rem); /* 第二行标题统一高度，再提高 */
    --subtitle-offset: calc(1.85rem); /* 副标题相对标题的偏移 */
    /* 第一个页面的卡片间距间距变量 - 继续拉大间距 */
    --col-gap-1-2: calc(30rem); /* 1到2的间距，左移3rem */
    --col-gap-2-3: calc(32rem); /* 2到3的间距，左移3rem */
    --col-gap-4-5: calc(29rem); /* 4到5的间距，继续增大 */
    --col-gap-5-6: calc(39rem); /* 5到6的间距，继续增大 */
    /* 第二行垂直位置 */
    --row2-top-offset: calc(5rem); /* 第二行图标相对第一行的垂直偏移，继续减小 */
}

/* ==================== 图标通用样式 ==================== */
.main-content > .step-icon {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 10;
}

.main-content > .step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 标题容器通用样式 ==================== */
/* 标题中心与图标中心对齐 */
.main-content > .step-title-wrapper {
    position: absolute;
    display: flex;
    align-items: flex-start;
    transform: translateX(-50%); /* 中心对齐 */
}

.main-content > .step-title-wrapper .step-title {
    font-family: var(--font-family);
    font-size: calc(1em);
    line-height: calc(1.6rem);
    font-weight: 700;
    color: #000000;
    text-transform: none;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* ==================== 副标题容器通用样式 ==================== */
/* 副标题左边缘与标题左边缘对齐 - 需要根据语言单独调整 */
.main-content > .step-subtitle-wrapper {
    position: absolute;
    display: flex;
    align-items: flex-start;
}

.main-content > .step-subtitle-wrapper .step-subtitle {
    font-family: 'ChillDINGothic', DIN-regular, sans-serif;
    font-size: calc(0.8em);
    line-height: calc(1.25rem);
    letter-spacing: calc(0.10625rem);
    color: #565656;
    text-transform: none;
    margin: 0;
    max-width: calc(24rem);
    text-align: left;
}

/* ==================== 图标位置 - 第一行下边缘对齐 ==================== */
/* 第一行图标下边缘对齐，间距增大 */
/* 位置 1 */
.step-icon.pos-1 {
    left: var(--steps-base-left);
    top: calc(var(--steps-base-top) + 0.9375rem);
}
/* 位置 2 - 1 + col-gap-1-2 */
.step-icon.pos-2 {
    left: calc(var(--steps-base-left) + var(--col-gap-1-2));
    top: calc(var(--steps-base-top) + 0.9375rem);
}
/* 位置 3 - 2 + col-gap-2-3 */
.step-icon.pos-3 {
    left: calc(var(--steps-base-left) + var(--col-gap-1-2) + var(--col-gap-2-3));
    top: calc(var(--steps-base-top) + 0.9375rem);
}
/* 位置 4 - 在1和2之间偏下 */
.step-icon.pos-4 {
    left: calc(var(--steps-base-left) + 16rem);
    top: calc(var(--steps-base-top) + var(--row2-top-offset));
}
/* 位置 5 - 4 + col-gap-4-5 */
.step-icon.pos-5 {
    left: calc(var(--steps-base-left) + 16rem + var(--col-gap-4-5));
    top: calc(var(--steps-base-top) + var(--row2-top-offset));
}
/* 位置 6 - 5 + col-gap-5-6 */
.step-icon.pos-6 {
    left: calc(var(--steps-base-left) + 16rem + var(--col-gap-4-5) + var(--col-gap-5-6));
    top: calc(var(--steps-base-top) + var(--row2-top-offset));
}

/* ==================== 标题位置 - 中心对齐图标中心 ==================== */
/* 位置 1 - 标题定位到图标中心 */
.step-title-wrapper.pos-1 {
    left: calc(var(--steps-base-left) + var(--icon-half));
    top: var(--title-row1-top);
}
/* 位置 2 */
.step-title-wrapper.pos-2 {
    left: calc(var(--steps-base-left) + var(--col-gap-1-2) + var(--icon-half));
    top: var(--title-row1-top);
}
/* 位置 3 */
.step-title-wrapper.pos-3 {
    left: calc(var(--steps-base-left) + var(--col-gap-1-2) + var(--col-gap-2-3) + var(--icon-half));
    top: var(--title-row1-top);
}
/* 位置 4 */
.step-title-wrapper.pos-4 {
    left: calc(var(--steps-base-left) + 16rem + var(--icon-half));
    top: var(--title-row2-top);
}
/* 位置 5 */
.step-title-wrapper.pos-5 {
    left: calc(var(--steps-base-left) + 16rem + var(--col-gap-4-5) + var(--icon-half));
    top: var(--title-row2-top);
}
/* 位置 6 */
.step-title-wrapper.pos-6 {
    left: calc(var(--steps-base-left) + 16rem + var(--col-gap-4-5) + var(--col-gap-5-6) + var(--icon-half));
    top: var(--title-row2-top);
}

/* ==================== 副标题位置 - 基础定位（各语言页面需覆盖） ==================== */
/* 副标题 top 位置统一 */
.step-subtitle-wrapper.pos-1,
.step-subtitle-wrapper.pos-2,
.step-subtitle-wrapper.pos-3 {
    top: calc(var(--title-row1-top) + var(--subtitle-offset));
}

.step-subtitle-wrapper.pos-4,
.step-subtitle-wrapper.pos-5,
.step-subtitle-wrapper.pos-6 {
    top: calc(var(--title-row2-top) + var(--subtitle-offset));
}

/* ==================== SVG 连接线容器样式 ==================== */
.step-connectors-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.step-connectors-svg line {
    stroke: #D9D9D9;
    stroke-width: 1;
    stroke-dasharray: 5, 5;
}