/* ==================== 生产制造阶段 - 独立样式文件 ==================== */
/* 4卡片单行布局 */

/* ==================== 基础定位变量 ==================== */
:root {
    --pp-base-top: calc(29rem);
    --pp-base-left: calc(18rem); /* 左移2rem: 25rem - 2rem */
    --pp-icon-size: calc(2.5rem);
    --pp-icon-half: calc(1.25rem);
    --pp-title-top: calc(var(--pp-base-top) + 3.9375rem);
    --pp-subtitle-offset: calc(1.85rem);
    /* 4个卡片等距排列 */
    --pp-col-gap: calc(26.5rem);
}

/* ==================== 图标通用样式 ==================== */
.main-content > .step-icon {
    position: absolute;
    width: var(--pp-icon-size);
    height: var(--pp-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(22rem);
    text-align: left;
}

/* ==================== 图标位置 - 4个单行，pos-2和pos-4下移4rem ==================== */
.step-icon.pos-1 {
    left: var(--pp-base-left);
    top: calc(var(--pp-base-top) + 0.9375rem);
}
.step-icon.pos-2 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap));
    top: calc(var(--pp-base-top) + 0.9375rem + 4rem); /* 下移4rem */
}
.step-icon.pos-3 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap) * 2);
    top: calc(var(--pp-base-top) + 0.9375rem);
}
.step-icon.pos-4 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap) * 3);
    top: calc(var(--pp-base-top) + 0.9375rem + 4rem); /* 下移4rem */
}

/* ==================== 标题位置 - pos-2和pos-4下移4rem ==================== */
.step-title-wrapper.pos-1 {
    left: calc(var(--pp-base-left) + var(--pp-icon-half));
    top: var(--pp-title-top);
}
.step-title-wrapper.pos-2 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap) + var(--pp-icon-half));
    top: calc(var(--pp-title-top) + 4rem); /* 下移4rem */
}
.step-title-wrapper.pos-3 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap) * 2 + var(--pp-icon-half));
    top: var(--pp-title-top);
}
.step-title-wrapper.pos-4 {
    left: calc(var(--pp-base-left) + var(--pp-col-gap) * 3 + var(--pp-icon-half));
    top: calc(var(--pp-title-top) + 4rem); /* 下移4rem */
}

/* ==================== 副标题 top 位置 - pos-2和pos-4下移4rem ==================== */
.step-subtitle-wrapper.pos-1,
.step-subtitle-wrapper.pos-3 {
    top: calc(var(--pp-title-top) + var(--pp-subtitle-offset));
}
.step-subtitle-wrapper.pos-2,
.step-subtitle-wrapper.pos-4 {
    top: calc(var(--pp-title-top) + var(--pp-subtitle-offset) + 4rem); /* 下移4rem */
}

/* ==================== 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;
}