/* ==========================================================================
 * 内容卡片（全图浮层）
 * 首页、/list/detail、/rank/* 共用，改动会同时影响这些列表页
 * ========================================================================== */

.list-item.block.custom-hover,
.media.media-3x2 {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.media-content.lazy-background {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .5s cubic-bezier(.22, .68, .48, 1.01);
}

.list-item.block.custom-hover:hover .media-content.lazy-background {
    transform: scale(1.08);
}

/* ==========================================================================
 * 首页列表：全图浮层卡片
 * ========================================================================== */
.list-home .home-cover-card,
.home-cover-card {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 18px;
    background: #1a1d24;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .55);
    isolation: isolate;
}

.home-cover-link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.home-cover-media {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
}

.home-cover-media .media-content {
    transform-origin: center;
    transition: transform .55s cubic-bezier(.22, .68, .48, 1.01);
}

.home-cover-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* 顶部压一点，保证角标可读；底部只留极淡过渡，主遮罩交给 .home-cover-meta */
    background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, transparent 28%);
}

.home-cover-video,
.home-cover-res {
    position: absolute;
    z-index: 2;
    top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 1.5rem;
    padding: .125rem .5625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    pointer-events: none;
}

.home-cover-video {
    left: .75rem;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 榜单序号，占用与「视频」标记相同的位置 */
.home-cover-rank {
    position: absolute;
    z-index: 2;
    top: .75rem;
    left: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 .375rem;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    color: #fff;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

.home-cover-rank.is-top {
    color: #4a3106;
    background: linear-gradient(135deg, #ffdc94, #e3ab61);
    box-shadow: 0 6px 14px -8px rgba(146, 96, 8, .9);
}

.home-cover-video .iconfont {
    font-size: .8125rem !important;
}

.home-cover-res {
    right: .75rem;
    background: #22c55e;
    box-shadow: 0 6px 14px -8px rgba(22, 163, 74, .9);
}

/* 标题及其下方是一层淡遮罩，从标题上沿柔和过渡到底部 */
.home-cover-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.5rem .875rem .875rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 26%, rgba(0, 0, 0, .5) 100%);
}

.home-cover-title {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: .975rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.home-cover-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: rgba(255, 255, 255, .9);
    font-size: .8125rem;
}

.home-cover-author {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-width: 0;
}

.home-cover-author .avatar,
.home-cover-author .home-cover-avatar {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, .85);
    object-fit: cover !important;
    flex: 0 0 24px !important;
    align-self: center;
}

.home-cover-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.home-cover-stat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.home-cover-stat .iconfont {
    font-size: .875rem !important;
    opacity: .95;
    line-height: 1;
}

/* 点赞心形：不依赖 iconfont（详情页 app.lib 无 icon-xihuan_like） */
.home-cover-like {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    flex: 0 0 auto;
    background-color: currentColor;
    opacity: .95;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
    .home-cover-card:hover .home-cover-media .media-content {
        transform: scale(1.06);
    }

    .home-cover-card:hover {
        box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .65);
    }
}

.home-cover-link:focus-visible {
    outline: 2px solid rgba(255, 82, 43, .55);
    outline-offset: 3px;
    border-radius: 18px;
}

@media (max-width: 767.98px) {
    .home-cover-card,
    .home-cover-media {
        border-radius: 16px;
    }

    .home-cover-meta {
        padding: 1.125rem .8125rem .8125rem;
    }

    .home-cover-title {
        font-size: .9375rem;
    }
}

.nice-dark-mode .home-cover-card {
    box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .85);
}

@media (prefers-reduced-motion: reduce) {
    .home-cover-media .media-content {
        transition: none;
    }
}

/* app.css 的 iconfont 字号在卡片里偏大，这里统一压到 16px */
.home-cover-card .iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 列表切换时的骨架占位（首页分类切换、/list 筛选切换共用） */
.home-skel-card {
    overflow: hidden;
    border-radius: 18px;
    background: #1a1d24;
    border: 0;
}

.home-skel-media {
    width: 100%;
    padding-top: 66.666%;
    background: linear-gradient(90deg, #2a2f38 25%, #3a414d 37%, #2a2f38 63%);
    background-size: 400% 100%;
    animation: homeSkelShine 1.2s ease-in-out infinite;
}

@keyframes homeSkelShine {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.nice-dark-mode .home-skel-card {
    background: #1a1d24;
}

.nice-dark-mode .home-skel-media {
    background: linear-gradient(90deg, #2a2f38 25%, #3a414d 37%, #2a2f38 63%);
    background-size: 400% 100%;
}

@media (prefers-reduced-motion: reduce) {
    .home-skel-media {
        animation: none;
    }
}

/* ==========================================================================
 * 详情页横向溢出（Mac 触控板双指横滑）
 *
 * 根因（实测）：滚到「猜你喜欢」时已滚出 .site-main，theiaStickySidebar
 * 仍用 position:absolute 计算 left，会漂移到视口外（如 left:2013），
 * 把 document.scrollWidth 从 1440 撑到 ~2348。此时在猜你喜欢区域
 * 双指左滑会横向滚动整页；页面上方其它区域通常还没触发该漂移。
 * 与移动端卡片横滑无直接关系，但需一并锁住 overscroll。
 * ========================================================================== */

html,
body {
    overflow-x: hidden;
}

.site-main {
    overflow-x: hidden;
}

/* 勿给 .container 设 max-width:100%，会冲掉 Bootstrap 限宽，导致正文比 header 更宽 */
.site-main > .container,
.site-main > .container > .row {
    overflow-x: hidden;
}

/* 裁掉漂移出的 sticky 侧栏，避免撑开整页 */
.site-sidebar,
.site-sidebar.slidebar-post,
.slidebar-post {
    overflow: hidden;
    max-width: 100%;
}

.theiaStickySidebar,
.theiaStickySidebar.slidebar-post-inner {
    max-width: 100%;
}

/* ==========================================================================
 * 详情页「猜你喜欢」：复用全图浮层，略收紧间距
 * /bing /posts /arts /wallpaper /spotlights 共用
 * ========================================================================== */

.list-related {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.list-related .list-grouped {
    --bs-gutter-x: .75rem;
}

.list-related .home-cover-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    padding: 1.25rem .75rem .75rem;
}

.list-related .home-cover-title {
    font-size: .9rem;
}

.list-related .home-cover-foot {
    align-items: center;
    flex-wrap: nowrap;
}

.list-related .home-cover-author {
    align-items: center;
    max-width: calc(100% - 2.75rem);
}

/* 桌面端：网格排布；禁止触控板把横滑交给该区域 */
@media (min-width: 768px) {
    .list-related .list-related-cards.row,
    .list-related .row.list-grouped.list-related-cards {
        flex-wrap: wrap;
        overflow-x: hidden;
        scroll-snap-type: none;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }
}

@media (max-width: 767.98px) {
    /*
     * 与上方正文卡片左缘对齐（同属 .container gutter）
     * 去掉大图标占位，避免「猜你喜欢」文字被顶得过右
     */
    .list-related > .container .h5 {
        display: flex;
        align-items: center;
    }

    .list-related > .container .h5 > .iconfont {
        display: none;
    }

    .list-related > .container:has(.list-related-cards) {
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: 0;
        overflow: hidden;
        max-width: 100%;
    }

    .list-related .list-related-cards.row,
    .list-related .row.list-grouped.list-related-cards {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .75rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .35rem 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pinch-zoom;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        scrollbar-width: none;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .list-related .list-related-cards::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .list-related .list-related-cards > [class*="col-"] {
        flex: 0 0 72%;
        width: 72%;
        max-width: 72%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-snap-align: start;
    }

    .list-related .home-cover-card,
    .list-related .home-cover-media {
        border-radius: 14px;
    }

    .list-related .home-cover-meta {
        padding: 1rem .625rem .625rem;
    }

    .list-related .home-cover-title {
        font-size: .8125rem;
        margin-bottom: .35rem;
    }

    .list-related .home-cover-foot {
        font-size: .75rem;
    }

    .list-related .home-cover-author .avatar,
    .list-related .home-cover-author .home-cover-avatar {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
    }

    .list-related .home-cover-res,
    .list-related .home-cover-video {
        top: .5rem;
        min-height: 1.25rem;
        padding: .1rem .45rem;
        font-size: .6875rem;
    }

    .list-related .home-cover-res {
        right: .5rem;
    }

    .list-related .home-cover-video {
        left: .5rem;
    }
}