/* ------------------------------------------------------------------
   服务网络 - 服务网点查询（纯列表版 v2，按蓝湖原型 2026-09 改版）
   页面：service-network-list.htm（配合共享 app.css 的 .top-banner / .column-menu / nav / footer）
------------------------------------------------------------------ */

/* 背景层：通栏全宽（二级菜单+筛选+卡片整体内容区） */
.service-network-list .snl-bg {
    padding: 24px 0 40px;
    background-color: #f4f6fa;
    background-image: url(../images/network-bg2.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;   /* 铺满中间内容区域，超出部分由背景色衔接 */
}

/* 顶部栏目图上的标题：覆盖全局白色，按需求改为黑色 */
.service-network-list .top-banner .banner-info .title {
    font-weight: bold;
    font-size: 48px;
    color: #000000;
}

.service-network-list .snl-body {
    max-width: 1220px;   /* 1220 - 10*2 内边距 = 内容宽1200，与原型容器一致 */
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ---------------- 整体两栏布局：左栏=二级菜单+宣传板，右栏=搜索+统计+列表+分页 ---------------- */
/* 网格4行：菜单|筛选区、(空)|统计行、宣传板|卡片列表、(空)|分页 —— 宣传板与卡片列表同行，上下边缘严格对齐 */
.service-network-list .snl-layout {
    display: grid;
    grid-template-columns: 306px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(876px, auto) auto;
    column-gap: 102px;   /* 306+102+792=1200，右栏宽792=384+24+384 */
    row-gap: 24px;
}

/* 包装容器不参与布局，子元素直接成为网格项 */
.service-network-list .snl-left {
    display: contents;
}

/* 二级菜单复用全局 .column-menu（当前项 sub-title-sel 红底白字），宽度高度与其它页面保持一致 */
.service-network-list .snl-left .column-menu {
    grid-column: 1;
    grid-row: 1;
}

.service-network-list .snl-promo {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    overflow: hidden;
}

.service-network-list .snl-promo img {
    position: absolute;   /* 脱离文档流，避免图片固有高度撑高栏，跟随实际高度裁切填充 */
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.service-network-list .snl-right {
    display: contents;
}

.service-network-list .snl-search {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}

.service-network-list .snl-search-head {
    flex-shrink: 0;
}

.service-network-list .snl-search-title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    line-height: 1.3;
    padding-left: 12px;
    border-left: 4px solid #BE0014;
}

.service-network-list .snl-search-tip {
    font-size: 12px;
    color: #999999;
    margin-top: 6px;
    padding-left: 16px;
}

.service-network-list .snl-selects {
    display: flex;
    gap: 12px;
}

.service-network-list .snl-selects .snl-select {
    width: 190px;
}

/* 搜索框高度56px */
.service-network-list .snl-selects .snl-select .el-input__inner {
    height: 56px;
    line-height: 56px;
    border-radius: 8px;
    border-color: #999999;
}

.service-network-list .snl-selects .snl-select .el-input__inner:hover,
.service-network-list .snl-selects .snl-select .el-input__inner:focus {
    border-color: #999999;   /* 覆盖 Element 默认的聚焦变蓝 */
}

.service-network-list .snl-selects .snl-select .el-input__suffix {
    line-height: 56px;   /* 下拉箭头随高度居中 */
}

/* 查询按钮（白色放大镜图标 + 红底） */
.service-network-list .snl-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-basis: 122px;
    height: 56px;
    background: #BE0014;
    color: #ffffff;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s;
}

.service-network-list .snl-search-btn:hover {
    background: #a50012;
}

.service-network-list .snl-search-btn .btn-icon {
    width: 18px;
    height: 18px;
}

/* ---------------- 统计行：右对齐 ---------------- */

.service-network-list .snl-count {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 14px;
    color: #4d5a75;
    margin: 18px 4px 14px 0;
}

.service-network-list .snl-count .num {
    color: #BE0014;
    font-weight: bold;
    font-size: 16px;
    margin: 0 2px;
}

/* ---------------- 右栏主体：网点卡片列表 ---------------- */

.service-network-list .snl-list {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 右栏792=384+24+384，两列恰好384 */
    gap: 24px;
    align-content: start;   /* 不足10条时卡片保持固有高度、剩余空间留白（容器本身仍占满876px行与宣传板对齐） */
}

.service-network-list .snl-item {
    padding: 22px 16px;
    min-height: 156px;
    box-sizing: border-box;
    transition: box-shadow .2s;
    background: #ffffff;   /* 原型双色底（原 #F6F7FA #FFFFFF 为无效简写） */
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
    border-radius: 16px;
    border: 1px solid #E4E7ED;
}

.service-network-list .snl-item:hover {
    box-shadow: 0 6px 20px rgba(43, 74, 138, .16);
}

.service-network-list .snl-item-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 16px;
    border-bottom: 1px solid #E4E7ED;
    padding: 0 0 13px 0;
}

.service-network-list .snl-item-icon {
    width: 32px;
    height: auto;
    margin-right: 8px;
    flex-shrink: 0;
}

.service-network-list .snl-item-row {
    display: flex;
    align-items: flex-start;
    font-size: 18px;
    color: #000000;
    line-height: 1.75;
    word-break: break-all;
}

.service-network-list .snl-item-row-label {
    color: #666666 !important;
}

.service-network-list .snl-row-icon {
    width: 32px;
    height: auto;
    margin: 0 8px 0 0;
    flex-shrink: 0;
}

.service-network-list .snl-empty {
    grid-column: 1 / -1;      /* 空态横跨两列 */
    text-align: center;
    color: #9aa5bd;
    font-size: 14px;
    padding: 60px 0;
}

/* ---------------- 分页：右对齐方块样式 ---------------- */

.service-network-list .snl-pagination {
    grid-column: 2;
    grid-row: 4;
    margin-top: 8px;
}

.service-network-list .snl-pagination .el-pagination {
    margin: 16px 0 0;
    padding: 0;
    text-align: right;
}

.service-network-list .snl-pagination .el-pagination .btn-prev,
.service-network-list .snl-pagination .el-pagination .btn-next {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e3e8f1;
    border-radius: 4px;
    color: #4d5a75;
}

.service-network-list .snl-pagination .el-pagination .btn-prev:disabled,
.service-network-list .snl-pagination .el-pagination .btn-next:disabled {
    color: #c4cbd9;
    cursor: not-allowed;
}

.service-network-list .snl-pagination .el-pager li {
    min-width: 32px;
    height: 32px;
    line-height: 30px;
    margin: 0 4px;
    background: #ffffff;
    border: 1px solid #e3e8f1;
    border-radius: 4px;
    color: #4d5a75;
}

.service-network-list .snl-pagination .el-pager li:hover {
    color: #BE0014;
}

.service-network-list .snl-pagination .el-pager li.active {
    background: #BE0014;
    border-color: #BE0014;
    color: #ffffff;
}

/* ---------------- 窄屏适配：与其它页面保持一致 ---------------- */

@media (max-width: 768px) {
    /* 二级菜单横滑样式由 app.css 全局规则处理，这里取消网格改纵向堆叠 */
    .service-network-list .snl-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .service-network-list .snl-left,
    .service-network-list .snl-right {
        display: block;   /* 恢复普通文档流，子元素纵向排列 */
    }

    .service-network-list .snl-search {
        width: 100%;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 16px;
        padding-top: 0;
    }

    .service-network-list .snl-selects {
        flex: 1 1 100%;
        flex-direction: column;
        gap: 10px;
        margin-left: 0;
    }

    .service-network-list .snl-selects .snl-select {
        width: 100%;
        margin: 0;
    }

    .service-network-list .snl-search-btn {
        width: 100%;
        flex-basis: 100%;   /* 覆盖桌面端 flex-basis:122px，移动端铺满 */
        margin-left: 0;
    }

    .service-network-list .snl-count {
        text-align: center;
        margin: 16px 0 12px;
    }

    /* 移动端不展示左侧竖版宣传板 */
    .service-network-list .snl-promo {
        display: none;
    }

    .service-network-list .snl-list {
        width: 100%;             /* 纵向布局下撑满，卡片单列100%宽 */
        min-height: 0;           /* 移动端不保留桌面端10条高度的占位 */
        grid-template-columns: 1fr;
    }

    /* 移动端分页：整体缩小为单行不换行、居中 */
    .service-network-list .snl-pagination {
        padding: 0 10px;
    }

    .service-network-list .snl-pagination .el-pagination {
        margin-top: 12px;
        text-align: center;
        white-space: nowrap;
    }

    .service-network-list .snl-pagination .el-pagination .btn-prev,
    .service-network-list .snl-pagination .el-pagination .btn-next {
        min-width: 24px;
        width: 24px;
        height: 24px;
        line-height: 22px;
    }

    .service-network-list .snl-pagination .el-pager li {
        min-width: 24px;
        width: 24px;
        height: 24px;
        line-height: 22px;
        margin: 0 2px;
        font-size: 12px;
    }

    .service-network-list .snl-pagination .el-pagination__jump {
        display: none;
    }
}