/* ============================================================
   服务流程页 - 布艺配饰风时间线布局
   ============================================================ */

/* ---------- 详细服务流程时间线 ---------- */
.timeline-section { background: var(--cream); }
.timeline {
    position: relative; max-width: 1000px; margin: 0 auto; padding: 20px 0;
}
/* 中央虚线竖轴 */
.timeline::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, var(--lotus) 0 10px, transparent 10px 20px);
    transform: translateX(-50%);
}

/* 单步：默认左侧 */
.tl-item {
    position: relative; width: 50%; padding: 0 50px 50px 0; margin-left: 0;
}
/* 右侧交替 */
.tl-item.right {
    margin-left: 50%; padding: 0 0 50px 50px;
}

/* 编号节点 */
.tl-node {
    position: absolute; top: 0; right: -28px; width: 56px; height: 56px;
    border-radius: 50%; background: var(--white); border: 2px dashed var(--lotus-deep);
    display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 3;
}
.tl-item.right .tl-node { right: auto; left: -28px; border-color: var(--sage-deep); }
.tl-num {
    font-family: var(--f-serif); font-size: 1.1rem; color: var(--lotus-deep); font-weight: 600;
}
.tl-item.right .tl-num { color: var(--sage-deep); }

/* 内容卡片 */
.tl-card {
    background: var(--white); border-radius: var(--radius); padding: 28px 30px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .4s, box-shadow .4s; position: relative;
}
/* 卡片指向节点的小三角 */
.tl-card::before {
    content: ""; position: absolute; top: 24px; right: -10px; width: 20px; height: 20px;
    background: var(--white); border-right: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.tl-item.right .tl-card::before {
    right: auto; left: -10px;
    border-right: none; border-top: none;
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* 步骤图标 */
.tl-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    background: var(--lotus-soft); color: var(--lotus-deep); margin-bottom: 16px;
}
.tl-item.right .tl-icon { background: var(--sage-soft); color: var(--sage-deep); }
.tl-icon svg { width: 24px; height: 24px; }

.tl-card h3 { margin-bottom: 10px; }
.tl-desc { font-size: .92rem; margin-bottom: 18px; }

/* 交付物区块 */
.tl-deliver {
    background: var(--cream-2); border-radius: 10px; padding: 14px 18px;
    border-left: 3px solid var(--lotus-deep);
}
.tl-item.right .tl-deliver { border-left-color: var(--sage-deep); }
.dl-label {
    display: block; font-size: .76rem; letter-spacing: 2px; color: var(--ink-mute);
    text-transform: uppercase; margin-bottom: 8px;
}
.tl-deliver ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tl-deliver li {
    font-size: .85rem; color: var(--ink-soft); position: relative; padding-left: 14px;
}
.tl-deliver li::before {
    content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--lotus-deep);
}
.tl-item.right .tl-deliver li::before { background: var(--sage-deep); }

/* ---------- 流程保障承诺卡片 ---------- */
.guarantee-section { background: var(--cream-2); }
.guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gua-card {
    background: var(--white); border-radius: var(--radius); padding: 32px 24px;
    text-align: center; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .4s, box-shadow .4s; position: relative;
}
/* 错落排布：1、3 下沉 */
.gua-card:nth-child(1), .gua-card:nth-child(3) { transform: translateY(20px); }
.gua-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.gua-card:nth-child(1):hover, .gua-card:nth-child(3):hover { transform: translateY(14px); }
.gua-ic {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
    display: grid; place-items: center;
}
.gua-ic.lotus { background: var(--lotus-soft); color: var(--lotus-deep); }
.gua-ic.sage { background: var(--sage-soft); color: var(--sage-deep); }
.gua-ic svg { width: 28px; height: 28px; }
.gua-card h3 { margin-bottom: 10px; }
.gua-card p { font-size: .9rem; }

/* ---------- 周期说明表 ---------- */
.cycle-section { background: var(--cream); }
.cycle-table {
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.ct-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1.8fr; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--line); transition: background .3s;
}
.ct-row:last-child { border-bottom: none; }
.ct-row:not(.ct-head):hover { background: var(--cream-2); }
.ct-head {
    background: var(--lotus-soft); font-weight: 600; color: var(--ink);
    font-size: .9rem; letter-spacing: 1px;
}
.ct-cell { font-size: .92rem; color: var(--ink-soft); }
.ct-head .ct-cell { color: var(--ink); }
.ct-num {
    font-family: var(--f-serif); color: var(--lotus-deep); font-weight: 600;
    margin-right: 10px;
}
.cycle-note {
    text-align: center; font-size: .85rem; color: var(--ink-mute);
    margin-top: 24px; font-style: italic;
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
    /* 时间线改为单侧 */
    .timeline::before { left: 28px; }
    .tl-item, .tl-item.right {
        width: 100%; margin-left: 0; padding: 0 0 40px 70px;
    }
    .tl-node, .tl-item.right .tl-node {
        left: 0; right: auto; width: 56px; height: 56px;
    }
    /* 三角箭头统一朝左 */
    .tl-card::before, .tl-item.right .tl-card::before {
        left: -10px; right: auto;
        border: none; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
        border-top: none; border-right: none;
        transform: rotate(45deg);
    }
    .tl-item.right .tl-icon { background: var(--sage-soft); color: var(--sage-deep); }
    .tl-item.right .tl-deliver { border-left-color: var(--sage-deep); }
    .tl-item.right .tl-deliver li::before { background: var(--sage-deep); }

    /* 保障卡片两列 */
    .guarantee-grid { grid-template-columns: 1fr 1fr; }
    .gua-card:nth-child(1), .gua-card:nth-child(3) { transform: none; }
    .gua-card:nth-child(1):hover, .gua-card:nth-child(3):hover { transform: translateY(-6px); }

    /* 周期表堆叠 */
    .ct-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
    .ct-head { display: none; }
    .ct-cell { font-size: .9rem; }
    .ct-cell:first-child { font-weight: 600; color: var(--ink); }
}
@media (max-width: 560px) {
    .guarantee-grid { grid-template-columns: 1fr; }
    .tl-card { padding: 22px 20px; }
    .tl-icon { width: 42px; height: 42px; }
    .tl-icon svg { width: 20px; height: 20px; }
}