/* ==========================================================
   页面样式：首页 / 关于 / 预约 / 案例 / 案例详情 / 联系我们 /
   团建文化 / 新闻 / 新闻详情 / 在施工地 / 工地详情 / 设计团队
   ========================================================== */

/* ==================== 首页 ==================== */
#index .box { padding: 50px 0; }
#index .box:nth-child(2n - 1) { background: var(--bg-gray); }

#index .box .advantage { display: flex; flex-wrap: wrap; }

#index .box .advantage .item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--white);
    padding: 30px 10px;
    box-shadow: 0 0 5px #e3e3e3;
    margin: 0 10px 20px;
    box-sizing: border-box;
}

#index .box .advantage .item .icon { height: 60px; width: 60px; }
#index .box .advantage .item .title { margin-bottom: 5px; font-size: 25px; color: var(--text-1); text-align: center; }
#index .box .advantage .item .desc { margin: 0; font-size: 14px; color: var(--text-2); text-align: center; }
#index .box .advantage .banner { padding: 0 10px; box-sizing: border-box; width: 100%; }

#index .box .styleList { display: flex; align-items: center; padding-bottom: 20px; }

#index .box .styleList .item {
    font-size: 12px;
    border-radius: 3px;
    font-weight: 500;
    padding: 9px 0;
    border: 1px solid var(--border);
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: var(--text-2);
}

#index .box .styleList .item:hover { background: var(--primary-bg); color: var(--primary); }

#index .box .case { display: flex; justify-content: space-between; }
#index .box .case .img { border: 4px solid var(--border); }
#index .box .case .img img { width: 100%; }
#index .box .case-banner { width: 100%; margin-top: 20px; }

#index .box .team,
#team .team {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -12px;
}

/* 卡片间距：左右 12px、下方 24px */
#index .box .team > .col-6,
#team .team > .col-6 {
    padding: 0 12px 24px;
}

#index .box .team .item,
#team .team .item {
    position: relative;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    padding: 30px 18px 24px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    transition: transform .35s ease, box-shadow .35s ease;
}

#index .box .team .item::before,
#team .team .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), #63d6a7);
}

#index .box .team .item:hover,
#team .team .item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .13);
}

#index .box .team .item .avatar,
#team .team .item .avatar {
    position: relative;
    height: 144px;
    text-align: center;
}

#index .box .team .item .avatar img,
#team .team .item .avatar img {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 0 0 2px rgba(31, 179, 124, .4), 0 10px 22px rgba(0, 0, 0, .14);
    transition: width .35s ease, height .35s ease, border-radius .35s ease, transform .35s ease, box-shadow .35s ease;
}

/* 团队卡片：悬停时头像由圆形展开为完整照片（浮层覆盖，不推动下方内容） */
#index .box .team .item:hover .avatar img,
#team .team .item:hover .avatar img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(31, 179, 124, .55), 0 12px 26px rgba(0, 0, 0, .18);
}

#index .box .team .item .title-tag,
#team .team .item .title-tag {
    display: inline-block;
    margin: 18px 0 10px;
    padding: 3px 18px;
    font-size: 13px;
    color: var(--brand);
    background: rgba(31, 179, 124, .1);
    border: 1px solid rgba(31, 179, 124, .35);
    border-radius: 20px;
}

#index .box .team .item .name,
#team .team .item .name {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: 4px;
}

#index .box .team .item .line,
#team .team .item .line {
    width: 34px;
    height: 2px;
    margin: 0 auto 16px;
    background: var(--brand);
    border-radius: 2px;
}

#index .box .team .item .experience,
#team .team .item .experience {
    display: flex;
    align-items: center;
    padding: 12px 6px;
    margin-bottom: 14px;
    background: #f8f9fb;
    border-radius: 8px;
}

#index .box .team .item .experience .stat,
#team .team .item .experience .stat { flex: 1; }
#index .box .team .item .experience .value,
#team .team .item .experience .value { font-size: 16px; font-weight: 700; color: var(--text-1); }
#index .box .team .item .experience .num,
#team .team .item .experience .num { font-size: 24px; color: var(--brand); }
#index .box .team .item .experience .unit,
#team .team .item .experience .unit { font-size: 13px; color: var(--text-3); margin-left: 2px; font-weight: 400; }
#index .box .team .item .experience .label,
#team .team .item .experience .label { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
#index .box .team .item .experience .divider,
#team .team .item .experience .divider { width: 1px; height: 34px; background: #e5e8ee; }

#index .box .team .item .text,
#team .team .item .text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 48px;
    margin-bottom: 16px;
    line-height: 24px;
    color: var(--text-3);
}

#index .box .team .item .btn,
#team .team .item .btn {
    display: block;
    width: 150px;
    margin: 0 auto;
    padding: 10px 0;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border-radius: 24px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

#index .box .team .item .btn:hover,
#team .team .item .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(31, 179, 124, .4);
}

#index .box .process { display: flex; flex-wrap: wrap; }
#index .box .process .banner { width: 100%; display: block; height: 423px; object-fit: cover; }

/* 左右两列各自纵向排列，使每个条目等高且与图片列对齐 */
#index .box .process .col-8,
#index .box .process .col-16 {
    display: flex;
    flex-direction: column;
}

#index .box .process .left {
    background: #383749;
    padding: 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #fbfbfb;
}

#index .box .process .left .title { font-size: 20px; color: #fcfcfc; margin-bottom: 10px; }
#index .box .process .left .desc { font-size: 14px; color: #afaeb3; }

#index .box .process .right {
    background: #f0f0f0;
    padding: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fbfbfb;
}

#index .box .process .right p { margin: 0; font-size: 14px; color: #666; }

#index .box .news { display: flex; }

#index .box .news .item {
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--white);
    border-radius: 5px;
    margin: 0 5px;
}

#index .box .news .item img { width: 100%; height: 185px; display: block; object-fit: cover; }

#index .box .news .item .title { margin: 8px 0; font-size: 19px; line-height: 25px; font-weight: 700; color: var(--text-1); height: 49px; }
#index .box .news .item .desc { font-size: 14px; line-height: 27px; height: 54px; color: var(--text-3); }

#index .box .processList { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0; }

#index .box .processList .item {
    background: #fcfcfc;
    text-align: center;
    padding: 20px 0;
    border-radius: 8px;
    box-sizing: border-box;
}

#index .box .processList .item img { height: 50px; width: 50px; }
#index .box .processList .item p { margin: 10px 0; font-size: 20px; font-weight: 700; color: #666; }

#index .box .propaganda { display: flex; flex-wrap: wrap; }

#index .box .propaganda .text { display: flex; background: var(--white); flex-wrap: wrap; align-items: center; }
#index .box .propaganda .text .title { text-align: center; font-size: 40px; color: #4cb887; line-height: 226px; margin: 0; }
#index .box .propaganda .text .slogan { color: #4cb887; margin: 0 0 10px; font-size: 20px; }
#index .box .propaganda .text .desc { margin: 0 0 5px; color: #666; font-size: 16px; }

#index .box .propaganda .img { width: 100%; height: 258px; object-fit: cover; }
#index .box .propaganda .banner { width: 100%; height: 484px; object-fit: cover; }

/* ==================== 关于我们 ==================== */
#about .content .item .introduction { display: flex; flex-wrap: wrap; }

#about .content .item .introduction .title { font-size: 34px; color: var(--text-1); font-weight: 700; margin: 0 0 20px; }
#about .content .item .introduction hr { margin: 0 0 30px; height: 4px; width: 100px; background: var(--text-1); border: none; }
#about .content .item .introduction .text { font-size: 18px; margin: 0 0 20px; color: var(--text-2); line-height: 1.8; }
#about .content .item .introduction .banner { width: 100%; height: 642px; display: block; object-fit: cover; }
#about .content .item .introduction .line { font-size: 16px; color: var(--text-1); margin: 0 0 30px; }
#about .content .item .introduction .line img { height: 16px; width: 16px; }

#about .content .item .culture { display: flex; flex-wrap: wrap; }

#about .content .item .culture .line { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
#about .content .item .culture .line img { height: 85px; width: 100%; }
#about .content .item .culture .line .title { font-size: 22px; color: var(--text-1); margin: 0 0 10px; }
#about .content .item .culture .line .desc { font-size: 16px; color: var(--text-2); }
#about .content .item .culture img { width: 100%; height: 421px; object-fit: cover; }

#about .content .item .advantage { display: flex; flex-wrap: wrap; }
#about .content .item .advantage .banner { height: 621px; width: 100%; display: block; object-fit: cover; }
#about .content .item .advantage img { width: 100%; height: 106px; display: block; object-fit: cover; }
#about .content .item .advantage .line { display: flex; flex-wrap: wrap; margin-bottom: 30px; align-items: center; }
#about .content .item .advantage .line .title { font-size: 22px; font-weight: 700; color: var(--text-1); margin: 0 0 10px; }
#about .content .item .advantage .line .desc { font-size: 16px; color: var(--text-2); margin: 0; }

/* ==================== 在线预约 ==================== */
#appointment { display: flex; flex-wrap: wrap; }

#appointment .item {
    font-size: 14px;
    color: var(--text-2);
    line-height: 40px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}

#appointment .item .title {
    font-size: 14px;
    color: var(--text-2);
    padding-right: 12px;
    white-space: nowrap;
    width: 80px;
    text-align: right;
}

#appointment .item textarea {
    width: 100%;
    resize: none;
    min-height: 33px;
    padding: 5px 15px;
    line-height: 1.5;
    display: block;
    box-sizing: border-box;
    font-size: inherit;
    color: var(--text-2);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
}

#appointment .item input {
    background: var(--white);
    border-radius: 4px;
    border: 1px solid var(--border);
    box-sizing: border-box;
    color: var(--text-2);
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    width: 100%;
}

#appointment .item .code { position: absolute; right: 0; bottom: 0; top: 0; }

#appointment .btn { display: flex; justify-content: center; min-width: 172px; }

#appointment .btn .border {
    border-radius: 50%;
    width: 172px;
    height: 172px;
    background: #fcfcfc;
    border: 1px solid var(--danger);
    transition: .2s;
    box-shadow: 0 0 15px rgb(231 76 60 / 60%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#appointment .btn .border:hover { height: 140px; width: 140px; transition: .2s; }
#appointment .btn .border:hover .content { height: 96px; width: 96px; transition: .2s; }

#appointment .btn .border .content {
    cursor: pointer;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--danger);
    border-radius: 50%;
    font-size: 28px;
    color: #fff;
    line-height: 1.2;
    box-shadow: 0 0 20px rgb(231 76 60 / 40%);
}

#appointment .btn .border .content p { margin: 0; }
#appointment .banner { width: 100%; display: block; height: 258px; }

/* ==================== 装修案例 ==================== */
#case .tab { border-right: 2px solid var(--border-light); }

#case .tab .item {
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
    font-size: 14px;
    color: var(--text-1);
    cursor: pointer;
    border-right: 2px solid var(--border-light);
    margin-right: -2px;
    display: block;
    text-decoration: none;
}

#case .tab .tab-active { border-color: var(--primary) !important; }

#case .content .item .flex { display: flex; flex-wrap: wrap; }

#case .content .item .flex .box { padding: 5px; border: 1px solid #dddcdc; margin: 0 8px 10px; }

#case .content .item .flex .box .banner { width: 100%; height: 220px; display: block; cursor: pointer; object-fit: cover; }

#case .content .item .flex .box .info { display: flex; flex-wrap: wrap; padding: 15px; }
#case .content .item .flex .box .info .name { font-size: 16px; color: var(--text-1); margin: 0 0 10px; }
#case .content .item .flex .box .info .size { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
#case .content .item .flex .box .info .avatar { width: 100%; height: 90px; display: block; border-radius: 5px; object-fit: cover; }

#case .content .item .flex .box .info .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
    text-align: center;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    outline: 0;
    text-decoration: none;
}

/* ==================== 案例详情 ==================== */
#caseDetail .box { display: flex; flex-wrap: wrap; align-items: center; }

#caseDetail .box .iframe,
#caseDetail .box .content {
    padding: 20px;
    box-sizing: border-box;
    background-image: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    border-radius: 10px;
}

#caseDetail .box .content .title { text-align: center; margin-bottom: 30px; font-size: 20px; color: var(--text-1); }
#caseDetail .box .content .item { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 0; border-bottom: 1px dashed #fff; }
#caseDetail .box .content .item p { color: var(--text-2); font-size: 14px; }

#caseDetail .box .content .team { display: flex; flex-wrap: wrap; margin-top: 40px; align-items: center; }
#caseDetail .box .content .team .avatar { border: 2px solid #f2f2f2; height: 80px; width: 80px; border-radius: 50%; display: block; }
#caseDetail .box .content .team .name { font-size: 16px; color: var(--text-1); }

#caseDetail .box .content .team .call {
    background-color: var(--primary-bg);
    border-color: var(--primary-border);
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: var(--primary);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}

#caseDetail .box .content .team .desc { font-size: 14px; color: var(--text-2); }

/* ==================== 联系我们 ==================== */
#contact .box { display: flex; flex-wrap: wrap; }
#contact .box .title { font-size: 36px; color: var(--orange); margin: 0; }
#contact .box .desc { margin: 20px 0; line-height: 28px; color: var(--text-2); font-size: 14px; }
#contact .box .info { line-height: 30px; font-size: 14px; color: var(--text-2); }
#contact .box .info p { margin: 0; }
#contact .box .banner { width: 100%; height: 181px; margin-top: 5px; object-fit: cover; }

/* 地图弹窗：公司信息卡片 */
.company-info-card {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 18px 16px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .20), 0 2px 8px rgba(0, 0, 0, .06);
    border: 1px solid rgba(255, 255, 255, .4);
    font-size: 13px;
    line-height: 1.5;
    color: #1e2a3a;
    pointer-events: auto;
}

.company-info-card .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid #f0b400;
    padding-bottom: 6px;
}

.company-info-card .brand-icon {
    background: #f0b400;
    color: #1e2a3a;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(240, 180, 0, .25);
}

.company-info-card .company-name { font-size: 17px; font-weight: 700; color: #0b1a2b; letter-spacing: .3px; line-height: 1.3; }

.company-info-card .detail-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 2px 0; }
.company-info-card .detail-row .label { font-weight: 600; color: #4a5a6e; min-width: 28px; flex-shrink: 0; font-size: 13px; }
.company-info-card .detail-row .value { color: #1e2a3a; word-break: break-word; font-size: 13px; }

.company-info-card .detail-row .value a {
    color: #1a6fb0;
    text-decoration: none;
    border-bottom: 1px dotted rgba(26, 111, 176, .25);
}

.company-info-card .detail-row .value a:hover { border-bottom-color: #1a6fb0; }

.company-info-card .footer-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9edf2;
    font-size: 11px;
    color: #7a8a9e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-info-card .footer-note .dot { width: 5px; height: 5px; background: #4caf50; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* 地图弹窗容器微调 */
.leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .15) !important;
    padding: 0 !important;
    overflow: hidden;
}

.leaflet-popup-content { margin: 0 !important; padding: 0 !important; min-width: auto !important; max-width: 300px !important; }
.leaflet-popup-tip { background: rgba(255, 255, 255, .95) !important; }

.leaflet-popup-close-button {
    top: 6px !important;
    right: 8px !important;
    font-size: 18px !important;
    color: #6a7a8e !important;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    transition: .2s;
}

.leaflet-popup-close-button:hover { background: rgba(0, 0, 0, .08); color: #1e2a3a !important; }

/* 地图控件微调 */
.leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px);
    padding: 2px 10px;
    border-radius: 12px 0 0 0;
}

.leaflet-control-zoom { border-radius: 10px !important; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .12) !important; }
.leaflet-control-zoom a { background: rgba(255, 255, 255, .9) !important; color: #1e2a3a !important; font-weight: 600; }

/* 右上角小标签 */
.info-control {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(4px);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    color: #1e2a3a;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    font-weight: 500;
    letter-spacing: .2px;
}

/* ==================== 团建文化 ==================== */
#culture .tab {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding-bottom: 26px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

#culture .tab .item {
    padding: 7px 22px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-2);
    background: var(--bg-gray);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s ease;
}

#culture .tab .item:hover {
    color: var(--primary);
    background: var(--primary-bg);
    border-color: var(--primary-border);
}

#culture .tab .tab-active {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
}

#culture .tab .tab-active:hover { color: var(--white); }

#culture .content .item .distance { padding: 50px 0; }
#culture .content .item .text { color: #666; text-indent: 32px; }

#culture .content .item .img-list { display: flex; flex-wrap: wrap; }
#culture .content .item .img-list .box { margin: 0 10px; }
#culture .content .item .img-list .box img { width: 100%; height: 220px; border: 2px solid var(--border); object-fit: cover; }

#culture .content .item .video { text-align: center; margin: 0 0 20px; font-size: 26px; color: #666; font-weight: 700; }
#culture .content .item iframe { width: 100%; height: 700px; border: 1px solid var(--border); box-shadow: 0 0 3px 3px var(--border); }

/* ==================== 新闻列表 ==================== */
#news .box { display: flex; flex-wrap: wrap; }
#news .box .tab { background: var(--white); }
#news .box .tab .logo { border-bottom: 1px solid var(--bg-gray); padding: 10px 15px; }
#news .box .tab .logo img { height: 68px; width: 100%; display: block; }

#news .box .tab .item {
    display: block;
    line-height: 60px;
    font-size: 17px;
    color: var(--text-1);
    border-bottom: 1px solid var(--bg-gray);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

#news .box .tab .tab-active { color: var(--danger); }
#news .box .content .box { display: none; }

#news .box .content .item {
    text-decoration: none;
    display: flex;
    background: var(--white);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 6%);
}

#news .box .content .item .position { height: 150px; position: relative; }
#news .box .content .item img { width: 100%; height: 150px; display: block; object-fit: cover; }
#news .box .content .item .position .title { font-size: 20px; font-weight: 600; color: var(--text-2); margin: 0 0 10px; }
#news .box .content .item .position .desc { line-height: 1.25; color: var(--text-3); margin: 0; font-size: 16px; }

#news .box .content .item .position .bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; }
#news .box .content .item .position .bottom .create_time { font-size: 14px; color: var(--text-3); }

/* ==================== 新闻详情 ==================== */
#strategyDetail .box { background: var(--white); padding: 20px; border-radius: 8px; }
#strategyDetail .box .title { text-align: center; font-size: 20px; color: var(--text-1); margin-bottom: 20px; }
#strategyDetail .box .desc { display: flex; align-items: center; padding: 20px 0; }
#strategyDetail .box .desc .size { text-align: center; }
#strategyDetail .box .desc .size span { display: inline-block; padding: 0 10px; }
#strategyDetail .box .content p { text-align: center; }
#strategyDetail .box .content img { max-width: 100%; }

/* ==================== 在施工地 ==================== */
#scene .item { background: var(--bg-gray); margin-bottom: 20px; }

#scene .scene-empty { background: var(--bg-gray); padding: 60px 0; text-align: center; font-size: 16px; color: var(--text-3); }

#scene .item .top { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 10px; border-bottom: 1px solid var(--text-2); }
#scene .item .top .text { font-size: 18px; color: var(--text-1); text-align: center; }
#scene .item .top .text .size { font-size: 14px; margin-left: 10px; }
/* 工地标题链接：点击跳转详情页 */
#scene .item .top .scene-link {
    display: inline-block;
    text-decoration: none;
    color: var(--text-1);
    transition: color .2s;
}
#scene .item .top .scene-link:hover { color: var(--brand); }
#scene .item .top .scene-link .size { font-size: 14px; margin-left: 10px; }

/* 工程进度下拉选择框（替代分类标签） */
.scene-select {
    height: 32px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 12px;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    max-width: 100%;
}
.scene-select:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.scene-select option { color: var(--text-1); background: #fff; }

#scene .item .bottom { padding: 30px; }
#scene .item .bottom .progress-image-group { margin-bottom: 30px; }
#scene .item .bottom .progress-image-group:last-child { margin-bottom: 0; }
#scene .item .bottom .group-label { display: flex; align-items: center; margin-bottom: 14px; }
#scene .item .bottom .group-label .classify { background: var(--brand); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 3px; margin-right: 10px; }
#scene .item .bottom .group-label .name { font-size: 16px; color: var(--text-1); font-weight: 500; }
#scene .item .bottom .group-label .current { font-size: 12px; color: var(--brand); margin-left: 10px; }
#scene .item .bottom .group-label .time { font-size: 12px; color: var(--text-3); margin-left: 12px; }
#scene .item .bottom .group-images .empty-tip { width: 100%; padding: 30px 0; text-align: center; font-size: 14px; color: var(--text-3); }
#scene .item .bottom .group-images { display: flex; flex-wrap: wrap; margin: -10px; }
#scene .item .bottom .group-images > .col-6 { padding: 10px; }
#scene .item .bottom .img { display: block; }
#scene .item .bottom .img img { height: 280px; width: 100%; object-fit: cover; display: block; }

/* 进度条 */
.process-steps { display: flex; justify-content: space-between; position: relative; }

.step { display: flex; flex-direction: column; align-items: center; z-index: 2; flex: 1; }

.step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #c0c4cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    margin-bottom: 6px;
    position: relative;
}

.step.active .step-icon { background: #1890ff; }
.step.completed .step-icon { background: #52c41a; }

.step-label { font-size: 12px; color: #999; text-align: center; line-height: 1.4; }
.step.active .step-label { color: #1890ff; font-weight: 500; }
.step.completed .step-label { color: #52c41a; }

.progress-line { position: absolute; top: 14px; left: 10%; right: 10%; height: 2px; background: #c0c4cc; z-index: 1; }
.progress-fill { height: 100%; background: #52c41a; width: 0; transition: width .3s; }

.scene-box { background: var(--bg-gray); padding: 30px 20px; box-sizing: border-box; display: flex; margin-bottom: 20px; }
.scene-box .box-flex { display: flex; justify-content: space-between; align-items: center; }
.scene-box div { font-size: 14px; }
.scene-box .box-circle { background: #22262b; border-radius: 50%; color: #fff; width: 64px; height: 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 14px; white-space: nowrap; }
.scene-box .box-circle div { line-height: 1; }

/* ==================== 工地详情 ==================== */
#sceneDetail .box { padding: 30px 20px; background: var(--white); }
#sceneDetail .box .name { text-align: center; font-size: 24px; font-weight: 700; color: var(--text-1); padding-bottom: 20px; }

/* 顶部三列信息 */
#sceneDetail .box .process { border: 1px solid var(--border-light); border-radius: 6px; }
#sceneDetail .box .process .top { display: flex; flex-wrap: wrap; padding: 20px 0; }
#sceneDetail .box .process .top .item { text-align: center; box-sizing: border-box; }
#sceneDetail .box .process .top .item p { margin: 0; }
#sceneDetail .box .process .top .item p:first-child { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }
#sceneDetail .box .process .top .item p.value { font-size: 16px; color: var(--text-1); font-weight: 500; }
#sceneDetail .box .process .top .border { border-right: 1px solid var(--border-light); border-left: 1px solid var(--border-light); }

/* 当前进度条 */
#sceneDetail .box .process .progress-wrap { display: flex; align-items: center; gap: 12px; padding: 0 10%; margin-top: 6px; }
#sceneDetail .box .process .progress-label { font-size: 13px; color: var(--text-3); white-space: nowrap; }
#sceneDetail .box .process .progress-line { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-gray); overflow: hidden; }
#sceneDetail .box .process .progress-fill { height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; }
#sceneDetail .box .process .progress-text { font-size: 13px; color: var(--brand); font-weight: 600; }

/* 施工时间线 */
#sceneDetail .box .process .bottom { display: flex; padding: 28px 6px 24px; }
#sceneDetail .box .process .bottom .item { flex: 1; text-align: center; position: relative; min-width: 0; }
#sceneDetail .box .process .bottom .item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--border-light);
}
#sceneDetail .box .process .bottom .item.done:not(:last-child)::after { background: #67c23a; }
#sceneDetail .box .process .bottom .item .circle {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 2px solid #c0c4cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #c0c4cc;
    background: var(--white);
    position: relative;
    z-index: 1;
}
#sceneDetail .box .process .bottom .item.done .circle { border-color: #67c23a; color: #67c23a; background: #f0f9eb; }
#sceneDetail .box .process .bottom .item.current .circle { border-color: var(--brand); color: var(--white); background: var(--brand); box-shadow: 0 0 0 4px rgba(31, 179, 124, .15); }
#sceneDetail .box .process .bottom .item .name { margin: 10px 0 4px; font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sceneDetail .box .process .bottom .item.done .name,
#sceneDetail .box .process .bottom .item.current .name { color: var(--text-1); font-weight: 500; }
#sceneDetail .box .process .bottom .item .time { margin: 0; font-size: 12px; color: var(--text-3); }

/* 工程进度表 */
#sceneDetail .box .table { margin-top: 24px; }
#sceneDetail .box .table .name {
    background: #f5f7fa;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-3);
    font-weight: bold;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
#sceneDetail .box .table table { width: 100%; border-spacing: 0 !important; border: 1px solid #ebeef5; border-radius: 0 0 6px 6px; }
#sceneDetail .box .table table th {
    text-align: center;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    padding: 12px 0;
    box-sizing: border-box;
    vertical-align: middle;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 400;
    background: var(--white);
}
#sceneDetail .box .table table th:last-child { border-right: none; }
#sceneDetail .box .table table tr:last-child th { border-bottom: none; }
#sceneDetail .box .table table .title th { background: #f5f7fa; color: var(--text-3); font-weight: 600; }
#sceneDetail .box .table table .classify-row th { background: #fcfde6; color: var(--text-2); font-weight: 600; font-size: 13px; padding: 8px 0; }
#sceneDetail .box .table table .data-row th { color: var(--text-2); }
#sceneDetail .box .table table .data-row:hover th { background: #f5f7fa; }
#sceneDetail .box .table table .data-row .current { color: var(--brand); font-size: 12px; }
#sceneDetail .box .table table .data-row .unfinished { color: var(--text-3); }

/* 查看工地图按钮 */
#sceneDetail .box .table table .btn {
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 14px;
    color: var(--white);
    background-color: var(--brand);
    border: none;
    display: inline-block;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    font-weight: 500;
    transition: background .2s;
}
#sceneDetail .box .table table .btn:hover { background-color: var(--brand-dark); }
#sceneDetail .box .table table .btn.disabled { background-color: var(--border-light); color: var(--text-3); cursor: not-allowed; }

/* 工程 Tab（胶囊式多行适配） */
#sceneDetail .box .tab {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-top: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}
#sceneDetail .box .tab .item {
    padding: 7px 22px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-2);
    background: var(--bg-gray);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .25s ease;
}
#sceneDetail .box .tab .item:hover { color: var(--primary); background: var(--primary-bg); border-color: var(--primary-border); }
#sceneDetail .box .tab .tab-active { color: var(--white); background: var(--primary); border-color: var(--primary); font-weight: 700; }
#sceneDetail .box .tab .tab-active:hover { color: var(--white); }

/* 施工图片墙 */
#sceneDetail .box .content { margin-top: 20px; }
#sceneDetail .box .content .item { display: none; }
#sceneDetail .box .content .item.content-active { display: block; }
#sceneDetail .box .content .item .list { display: flex; flex-wrap: wrap; margin: -8px; }
#sceneDetail .box .content .item .list > .col-8 { box-sizing: border-box; padding: 8px; }
#sceneDetail .box .content .item .list .img { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg-gray); }
#sceneDetail .box .content .item .list .img img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .3s; }
#sceneDetail .box .content .item .list .img:hover img { transform: scale(1.03); }
#sceneDetail .box .content .item .list .img .img-name { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--text-2); text-align: center; }
#sceneDetail .box .content .item .empty-tip { padding: 60px 0; text-align: center; font-size: 14px; color: var(--text-3); background: var(--bg-gray); border-radius: 6px; }

/* 未查询到工程空状态 */
#sceneDetail .box.empty { padding: 80px 20px; text-align: center; }
#sceneDetail .box.empty .empty-title { margin: 0; font-size: 20px; color: var(--text-1); font-weight: 600; }
#sceneDetail .box.empty .empty-desc { margin: 12px 0 24px; font-size: 14px; color: var(--text-3); }
#sceneDetail .box.empty .empty-btn {
    display: inline-block;
    padding: 8px 28px;
    border-radius: 20px;
    color: var(--white);
    background: var(--brand);
    text-decoration: none;
    transition: background .2s;
}
#sceneDetail .box.empty .empty-btn:hover { background: var(--brand-dark); }

/* ==================== 设计团队 ==================== */
/* 卡片样式与首页共享，见 #index .box .team 定义 */

#footer .box > .col-6 img { width: auto; max-width: 100%; display: block; }

/* ==========================================================
   移动端适配（≤767px）
   ========================================================== */
@media (max-width: 767px) {
    #index .box .processList .item { margin: 5px; }

    /* 团队卡片：移动端不展开照片，避免照片遮住预约按钮 */
    #index .box .team .item .avatar,
    #team .team .item .avatar { height: auto; }
    #index .box .team .item:hover .avatar img,
    #team .team .item:hover .avatar img {
        position: static;
        width: 142px;
        height: 142px;
        border-radius: 50%;
        transform: none;
    }

    /* 团建文化：胶囊标签间距与字号缩小 */
    #culture .tab { gap: 10px; padding-bottom: 20px; }
    #culture .tab .item { padding: 6px 16px; font-size: 14px; }

    /* 固定高度大图改为自适应比例，避免变形 */
    #culture .content .item .img-list .box img,
    #case .content .item .flex .box .banner,
    #scene .item .bottom .img img,
    #index .box .propaganda .img,
    #index .box .propaganda .banner,
    #contact .box .banner {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    /* 视频 iframe 自适应 */
    #culture .content .item iframe { height: auto; aspect-ratio: 16 / 9; }

    /* 关于页小图标保持比例 */
    #about .content .item .culture .line img,
    #about .content .item .advantage .line img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    /* 工地详情：信息列堆叠、时间线改垂直、表格横滚、图片双列 */
    #sceneDetail .box { padding: 16px 12px; }
    #sceneDetail .box .name { font-size: 20px; padding-bottom: 14px; }

    /* 顶部信息：三列堆叠，列间用上边框分隔 */
    #sceneDetail .box .process .top .item { padding: 10px 0; }
    #sceneDetail .box .process .top .item + .item { border-top: 1px solid var(--border-light); }
    #sceneDetail .box .process .top .border { border-right: none; border-left: none; }

    /* 进度条紧凑 */
    #sceneDetail .box .process .progress-wrap { padding: 0 5%; }

    /* 时间线：改为垂直布局（圆圈居左 + 竖线连接） */
    #sceneDetail .box .process .bottom {
        flex-direction: column;
        padding: 14px 0 10px 6px;
    }
    #sceneDetail .box .process .bottom .item {
        flex: none;
        position: relative;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 14px 0 14px 48px;
        min-height: 32px;
    }
    /* 竖线：圆圈中心 x = 16px，2px 线宽 → left: 15px；首尾节点线只画一半 */
    #sceneDetail .box .process .bottom .item::before {
        content: '';
        position: absolute;
        left: 15px;
        top: -14px;
        bottom: -14px;
        width: 2px;
        background: var(--border-light);
    }
    #sceneDetail .box .process .bottom .item:first-child::before { top: 50%; }
    #sceneDetail .box .process .bottom .item:last-child::before { bottom: 50%; }
    #sceneDetail .box .process .bottom .item.done::before { background: #67c23a; }
    /* 移除桌面版横向连接线 */
    #sceneDetail .box .process .bottom .item:not(:last-child)::after { display: none; }
    #sceneDetail .box .process .bottom .item .circle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1;
    }
    #sceneDetail .box .process .bottom .item .name {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-1);
        white-space: normal;
        overflow: visible;
    }
    #sceneDetail .box .process .bottom .item.todo .name { color: var(--text-3); font-weight: 400; }
    #sceneDetail .box .process .bottom .item .time {
        margin: 0 0 0 auto;
        font-size: 12px;
        padding-left: 10px;
        white-space: nowrap;
    }

    /* Tab 胶囊紧凑 */
    #sceneDetail .box .tab { gap: 10px; }
    #sceneDetail .box .tab .item { padding: 6px 16px; font-size: 13px; }

    /* 进度表：保持最小宽度，横向滚动 */
    #sceneDetail .box .table { overflow-x: auto; }
    #sceneDetail .box .table table { min-width: 560px; }

    /* 图片双列，描述单行截断 */
    #sceneDetail .box .content .item .list .img img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    #sceneDetail .box .content .item .list .img .img-name {
        padding: 6px 8px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 空状态按钮便于点按 */
    #sceneDetail .box.empty .empty-btn { padding: 10px 44px; }

    /* 移动端地图弹窗卡片 */
    .company-info-card { padding: 12px 14px 14px; min-width: 170px; max-width: 240px; font-size: 12px; }
    .company-info-card .company-name { font-size: 15px; }
    .company-info-card .brand-icon { width: 26px; height: 26px; font-size: 13px; }
    .leaflet-popup-content { max-width: 250px !important; }
}

/* ==========================================================
   平板 & 桌面适配（768px 以上）
   ========================================================== */
/* 平板（768-1199px）：首页多列区块由 4 列降为 2 列，避免卡片过窄 */
@media (min-width: 768px) and (max-width: 1199px) {
    #index .box .advantage > div,
    #index .box .team > div,
    #index .box .news > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* 工地详情：时间线节点文字紧凑，避免拥挤换行 */
    #sceneDetail .box .process .progress-wrap { padding: 0 5%; }
    #sceneDetail .box .process .bottom .item .name { font-size: 12px; }
    #sceneDetail .box .process .bottom .item .time { font-size: 11px; }
}

/* 小屏桌面（768-1919px）：补全 col-xl-push-4 在 <1920px 时的居中效果 */
@media (min-width: 768px) and (max-width: 1919px) {
    #index .box > .col-16:not(.col-push-4),
    #about > .col-16:not(.col-push-4),
    #case > .col-16:not(.col-push-4),
    #appointment > .col-16:not(.col-push-4),
    #team > .col-16:not(.col-push-4),
    #caseDetail > .col-16:not(.col-push-4),
    #news > .col-16:not(.col-push-4),
    #strategyDetail > .col-16:not(.col-push-4),
    #scene > .col-16:not(.col-push-4),
    #footer > .col-16:not(.col-push-4) {
        margin-left: 16.6666666666%;
    }

    /* 新闻页：内容区补全 col-xl-push-1 */
    #news .box > .col-19:not(.col-push-1) { margin-left: 4.1666666666%; }
}