﻿/* ========== 快捷服务区域（容器与标题） ========== */

/* 快捷服务区域（白色背景与底部留白；页面级局部令牌集中声明处） */
.main-page__quick {
    padding-bottom: 24px;
    background: var(--website-surface);
    /* 卡片与控制按钮边框色（无全局等价，本地专属） */
    --quick-border: #d9d9d9;
    /* 图标底座浅蓝底色（无全局等价，本地专属） */
    --quick-icon-bg: rgba(12, 126, 217, .09);
    /* 卡片默认阴影（无全局等价，本地专属） */
    --quick-card-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    /* 卡片激活阴影（悬停/聚焦主题蓝投影） */
    --quick-card-shadow-active: 0 10px 20px rgb(12 126 217 / 24%);
    /* 控制按钮默认阴影 */
    --quick-control-shadow: 0 4px 10px rgb(0 0 0 / 14%);
    /* 控制按钮激活阴影（悬停/聚焦上移投影） */
    --quick-control-shadow-active: 0 8px 16px rgb(12 126 217 / 28%);
}

/* 快捷服务内容容器（移动端占满宽，左右内边距 20px，桌面居中宽度见断点层） */
.main-page__quick-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
}

/* 快捷服务标题区域（居中留白） */
.main-page__quick-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

/* 快捷服务标题内容（主题文字与装饰线；双类名提级防全局 h1~h6 覆盖，显式补齐字体属性） */
.main-page__quick-heading .main-page__quick-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: var(--website-primary);
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

/* 快捷服务标题文字（继承标题容器样式） */
.main-page__quick-heading .main-page__quick-title > * {
    color: inherit;
    font: inherit;
}

/* 快捷服务标题装饰线（两侧短线） */
.main-page__quick-heading .main-page__quick-title::before,
.main-page__quick-heading .main-page__quick-title::after {
    width: 24px;
    height: 1px;
    background: var(--website-primary);
    content: "";
}

/* ========== 快捷服务轮播（卡片与控制） ========== */

/* 快捷服务轮播容器（控制按钮与视口同行） */
.main-page__quick-nav {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
}

/* 快捷服务可视区域（隐藏溢出滚动内容；上下留白容纳卡片上移与亚像素裁剪呼吸区） */
.main-page__quick-viewport {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding-block: 4px;
    scroll-padding-inline: 1px;
    scroll-snap-type: x mandatory;
}

/* 快捷服务列表（水平轮播轨道，首尾保留边框安全区） */
.main-page__quick-list {
    display: flex;
    width: 100%;
    gap: 16px;
    margin: 0;
    padding: 0 1px;
    list-style: none;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

/* 快捷服务列表项（手机两项布局，卡片承载横向内边距） */
.main-page__quick-list > .main-page__quick-item {
    position: relative;
    display: flex;
    min-width: 0;
    height: 116px;
    flex: 0 0 calc((100% - 16px) / 2);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 16px;
    border: 1px solid var(--quick-border);
    border-radius: 6px;
    color: var(--website-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    background: var(--website-surface);
    box-shadow: var(--quick-card-shadow);
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    transform: scaleX(1);
    will-change: transform;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), background-color .22s ease, box-shadow .28s ease, color .2s ease;
}

/* 快捷服务内容容器（统一占位项与 CMS 项的排版，横向留白由卡片承接） */
.main-page__quick-content {
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
}

/* 快捷服务内容（继承卡片文字样式） */
.main-page__quick-content > * {
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* 快捷服务整项链接（键盘焦点描边） */
.main-page__quick-content:focus-visible {
    outline: 2px solid var(--website-primary);
    outline-offset: -3px;
}

/* 快捷服务列表项（CMS 模板项与脚本占位项切换隐藏） */
.main-page__quick-list > .main-page__quick-item[hidden] {
    display: none;
}

/* 快捷服务列表项（分页补位，仅补齐尾页列数，不展示也不参与交互） */
.main-page__quick-list > .main-page__quick-item[data-quick-generated="placeholder"] {
    visibility: hidden;
    pointer-events: none;
}

/* 快捷服务列表项（循环克隆，仅承接首尾动画，不接管鼠标交互） */
.main-page__quick-list > .main-page__quick-item[data-quick-generated="clone"] {
    pointer-events: none;
}

/* 快捷服务图标容器（浅蓝底图标底座） */
.main-page__quick-icon {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--website-primary);
    background: var(--quick-icon-bg);
}

/* 快捷服务图标图片（等比显示） */
.main-page__quick-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 快捷服务名称（单行溢出省略） */
.main-page__quick-name {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 快捷服务名称占位（CMS 另行输出标题时置空，不占行） */
.main-page__quick-name:empty {
    display: none;
}

/* CMS 独立输出的标题链接（内容容器之外，承接名称单行省略，左右内边距由卡片承接） */
.main-page__quick-item > a:last-child:not(.main-page__quick-content) {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 10px;
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-align: center;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

/* 快捷服务卡片（脚本接管的悬停或聚焦激活态） */
.main-page__quick-list > .main-page__quick-item.is-quick-active {
    color: var(--website-surface);
    background: var(--website-primary);
    box-shadow: var(--quick-card-shadow-active);
}

/* 快捷服务图标（卡片激活态白底） */
.main-page__quick-list > .main-page__quick-item.is-quick-active .main-page__quick-icon {
    background: var(--website-surface);
}

/* 快捷服务卡片（贴视口左缘时缩放向内生长，保证左边框不被裁剪） */
.main-page__quick-list > .main-page__quick-item.is-quick-edge-left {
    transform-origin: left center;
}

/* 快捷服务卡片（贴视口右缘时缩放向内生长，保证右边框不被裁剪） */
.main-page__quick-list > .main-page__quick-item.is-quick-edge-right {
    transform-origin: right center;
}

/* 快捷服务控制按钮（基础外观） */
.main-page__quick-control {
    display: flex;
    width: 42px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--quick-border);
    border-radius: 6px;
    color: var(--website-heading);
    background: var(--website-surface);
    box-shadow: var(--quick-control-shadow);
    cursor: pointer;
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease, transform .3s ease;
}

/* 快捷服务控制按钮（可用悬停与焦点） */
.main-page__quick-control:hover:not(:disabled),
.main-page__quick-control:focus-visible:not(:disabled) {
    border-color: var(--website-primary);
    color: var(--website-surface);
    background: var(--website-primary);
    box-shadow: var(--quick-control-shadow-active);
    transform: translateY(-2px);
}

/* 快捷服务控制按钮（键盘焦点描边） */
.main-page__quick-control:focus-visible {
    outline: 2px solid var(--website-primary);
    outline-offset: 2px;
}

/* 快捷服务控制按钮（禁用状态） */
.main-page__quick-control:disabled {
    opacity: .35;
    box-shadow: none;
    cursor: default;
}

/* 快捷服务方向箭头（描边图形） */
.main-page__quick-arrow {
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

/* 快捷服务左方向箭头 */
.main-page__quick-arrow--left {
    margin-left: 4px;
    transform: rotate(-135deg);
}

/* 快捷服务右方向箭头 */
.main-page__quick-arrow--right {
    margin-right: 4px;
    transform: rotate(45deg);
}

/* ========== 空状态 ========== */

/* 快捷服务空状态块（居中占位文案，上下留白按断点） */
.main-page__quick-empty {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding-block: 32px;
    border: 1px solid var(--website-border-strong);
    border-radius: var(--website-radius);
    text-align: center;
}

/* 快捷服务空状态块（hidden 属性生效，避免作者 display 覆盖） */
.main-page__quick-empty[hidden] {
    display: none;
}

/* 快捷服务空状态文案（弱化文字色；双类名提级防全局 p 规则覆盖） */
.main-page__quick-empty .main-page__quick-empty-text {
    margin: 0;
    color: var(--website-text-muted);
    font-size: 16px;
    line-height: 1.75;
}

/* 快捷服务轮播容器（空状态下隐藏轨道与左右按钮） */
.main-page__quick-nav[hidden] {
    display: none;
}

/* ========== 响应式布局（五档视口） ========== */

/* ---- 桌面端基准布局（>=992px，含宽屏档） ---- */
@media (min-width: 992px) {
    /* 快捷服务容器（宽屏 1400px 最大宽度居中） */
    .main-page__quick-container {
        max-width: 1400px;
        margin-inline: auto;
    }

    /* 快捷服务区域（底部留白） */
    .main-page__quick {
        padding-bottom: 40px;
    }

    /* 快捷服务标题（上下留白） */
    .main-page__quick-heading {
        padding: 40px 0;
    }

    /* 快捷服务标题内容（宽屏字号与装饰线间距） */
    .main-page__quick-heading .main-page__quick-title {
        gap: 15px;
        font-size: 36px;
    }

    /* 快捷服务标题装饰线（宽屏长度） */
    .main-page__quick-heading .main-page__quick-title::before,
    .main-page__quick-heading .main-page__quick-title::after {
        width: 40px;
    }

    /* 快捷服务空状态（宽屏上下留白） */
    .main-page__quick-empty {
        padding-block: 64px;
    }

    /* 快捷服务列表（宽屏卡片间距） */
    .main-page__quick-list {
        gap: 24px;
    }

    /* 快捷服务列表项（宽屏五项等宽、字名与卡片横向内边距） */
    .main-page__quick-list > .main-page__quick-item {
        height: 122px;
        flex-basis: calc((100% - 96px) / 5);
        font-size: 18px;
        padding: 0 20px;
    }

    /* 快捷服务列表（脚本激活时，同页其余项仅视觉收窄，不改变轨道宽度） */
    .main-page__quick-list.is-quick-hovering > .main-page__quick-item {
        transform: scaleX(.94);
    }

    /* 快捷服务列表项（激活项视觉扩展，不触发布局重排） */
    .main-page__quick-list > .main-page__quick-item.is-quick-active {
        z-index: 1;
        transform: translateY(-2px) scaleX(1.08);
    }
}

/* ---- 标准桌面布局（1201px-1599px） ---- */
@media (min-width: 1201px) and (max-width: 1599px) {
    /* 快捷服务容器（1170px 最大宽度居中） */
    .main-page__quick-container {
        max-width: 1170px;
    }

    /* 快捷服务区域（底部留白） */
    .main-page__quick {
        padding-bottom: 36px;
    }

    /* 快捷服务标题（上下留白） */
    .main-page__quick-heading {
        padding: 36px 0;
    }

    /* 快捷服务标题内容（标准桌面字号） */
    .main-page__quick-heading .main-page__quick-title {
        font-size: 32px;
    }

    /* 快捷服务空状态（标准桌面上下留白） */
    .main-page__quick-empty {
        padding-block: 56px;
    }

    /* 快捷服务列表（标准桌面卡片间距） */
    .main-page__quick-list {
        gap: 20px;
    }

    /* 快捷服务列表项（标准桌面四项等宽与高度） */
    .main-page__quick-list > .main-page__quick-item {
        height: 120px;
        flex-basis: calc((100% - 60px) / 4);
    }
}

/* ---- 紧凑桌面布局（992px-1200px） ---- */
@media (min-width: 992px) and (max-width: 1200px) {
    /* 快捷服务容器（970px 最大宽度居中） */
    .main-page__quick-container {
        max-width: 970px;
    }

    /* 快捷服务区域（底部留白） */
    .main-page__quick {
        padding-bottom: 32px;
    }

    /* 快捷服务标题（上下留白） */
    .main-page__quick-heading {
        padding: 32px 0;
    }

    /* 快捷服务标题内容（紧凑桌面字号） */
    .main-page__quick-heading .main-page__quick-title {
        font-size: 28px;
    }

    /* 快捷服务空状态（紧凑桌面上下留白） */
    .main-page__quick-empty {
        padding-block: 48px;
    }

    /* 快捷服务列表（紧凑桌面卡片间距） */
    .main-page__quick-list {
        gap: 20px;
    }

    /* 快捷服务列表项（紧凑桌面四项等宽、字号与高度） */
    .main-page__quick-list > .main-page__quick-item {
        height: 118px;
        flex-basis: calc((100% - 60px) / 4);
        font-size: 16px;
    }
}

/* ---- 平板布局（768px-991px） ---- */
@media (min-width: 768px) and (max-width: 991px) {
    /* 快捷服务容器（不启用居中，占满宽，左右留白沿用基础层） */
    .main-page__quick-container {
        max-width: 100%;
    }

    /* 快捷服务区域（底部留白） */
    .main-page__quick {
        padding-bottom: 30px;
    }

    /* 快捷服务标题（上下留白） */
    .main-page__quick-heading {
        padding: 30px 0;
    }

    /* 快捷服务标题内容（平板字号与装饰线间距） */
    .main-page__quick-heading .main-page__quick-title {
        gap: 15px;
        font-size: 26px;
    }

    /* 快捷服务空状态（平板上下留白） */
    .main-page__quick-empty {
        padding-block: 40px;
    }

    /* 快捷服务标题装饰线（平板长度） */
    .main-page__quick-heading .main-page__quick-title::before,
    .main-page__quick-heading .main-page__quick-title::after {
        width: 40px;
    }

    /* 快捷服务列表项（平板三项等宽） */
    .main-page__quick-list > .main-page__quick-item {
        flex-basis: calc((100% - 32px) / 3);
    }

    /* 快捷服务列表（脚本激活时，同页其余项仅视觉收窄，不改变轨道宽度） */
    .main-page__quick-list.is-quick-hovering > .main-page__quick-item {
        transform: scaleX(.94);
    }

    /* 快捷服务列表项（激活项视觉扩展，不触发布局重排） */
    .main-page__quick-list > .main-page__quick-item.is-quick-active {
        z-index: 1;
        transform: translateY(-2px) scaleX(1.08);
    }
}

/* ---- 手机布局（767px 及以下） ---- */
@media (max-width: 767px) {
    /* 快捷服务卡片（手机端保留颜色与阴影反馈，不产生触摸场景位移与缩放） */
    .main-page__quick-list > .main-page__quick-item.is-quick-active {
        transform: none;
    }
}

/* ---- 最小手机（<=575px，快捷服务专用例外） ---- */
@media (max-width: 575px) {
    /* 快捷服务列表项（单项整屏展示） */
    .main-page__quick-list > .main-page__quick-item {
        flex-basis: 100%;
    }
}

/* ---- 减少动态效果 ---- */
@media (prefers-reduced-motion: reduce) {
    /* 快捷服务交互元素（关闭过渡） */
    .main-page__quick-list,
    .main-page__quick-list > .main-page__quick-item,
    .main-page__quick-control {
        transition: none;
    }
}