/* Swiper部分样式 start */
.pc-banner-swiper {
    box-sizing: border-box;
    position: relative;
}

.pc-banner-swiper::after {
    content: '';
    position: absolute;
    width: 22%;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(9, 12, 19, 1), rgba(9, 12, 19, 0));
    z-index: 3;
}

.pc-banner-swiper::before {
    content: '';
    position: absolute;
    width: 22%;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, rgba(9, 12, 19, 1), rgba(9, 12, 19, 0));
    z-index: 3;
}

/* .mobile-swiper {
    padding: 0 1.25rem;
} */

.xqbj-icon-prev,
.xqbj-icon-next {
    position: absolute;
    top: 50%;
    z-index: 9;
    cursor: pointer;
}

.xqbj-icon-prev {
    left: 15%;
    transform: translateY(-50%);
}

.xqbj-icon-next {
    right: 15%;
    transform: translateY(-50%);
}

/* else0811 Web轮播箭头尺寸 start */
/* W12：Axure 要求放大 Web 轮播左右翻页按钮；22×42px 调整为 30×60px。 */
@media (min-width: 960px) {
    .pc-banner-swiper .xqbj-icon-prev,
    .pc-banner-swiper .xqbj-icon-next {
        width: 1.5rem;
        height: 3rem;
    }
}
/* else0811 Web轮播箭头尺寸 end */

.pc-banner-swiper .swiper-slide {
    width: auto;
}

.slide-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0.4rem;
    background: #000;
}

.slide-box::before {
    content: "";
    display: block;
    padding-top: 40.909%;
}

.slide-box>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-box>img.loading{
    object-fit:contain;
}

@supports (aspect-ratio: 1) {
    .slide-box {
        aspect-ratio: 440 / 180;
    }

    .slide-box::before {
        display: none;
    }
}


/* Swiper部分样式 end */
.filter-heder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
}

.filter-heder .filter-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.filter-heder .filter-tags a {
    box-sizing: border-box;
    height: 1.5rem;
    padding: 0 0.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #888888;
    background: #1e2126;
    border-radius: 0.4rem;
    box-sizing: border-box;
    font-size: 0.7rem;
}

.filter-heder .filter-tags a.filter-active

/* ,.filter-heder .filter-tags a:hover */
    {
    color: #00ffac;
    background: none;
    border: 1px solid #00ffac;
}

/* else0811 首页分类悬停反馈 start */
/* W3-2a 分类标签 hover：三态单调递进——未选中 #888 / hover #fff / 选中 #00ffac+边框。
   hover 刻意不用绿：绿色独占给选中态，保证全页任意时刻只有一个绿 chip（当初 hover 与选中
   同色被注释掉的教训）。:not(.filter-active) 防止 hover 选中项时绿字被压成白字。
   包 min-width:960 因本段基础规则无媒体查询，不包的话 H5 触摸会粘住白字 */
@media (min-width: 960px) {
    .filter-heder .filter-tags a {
        transition: color .2s;
    }

    .filter-heder .filter-tags a:not(.filter-active):hover {
        color: #fff;
    }
}
/* else0811 首页分类悬停反馈 end */

/* else0814 分类按钮悬停绿色高亮 start（测试反馈按设计图：hover 与选中态同为绿字+绿框胶囊，推翻上期"hover 用白"取舍；覆盖上方 else0811 的白色 hover） */
@media (min-width: 960px) {
    .filter-heder .filter-tags a:not(.filter-active):hover {
        color: #00ffac;
        background: none;
        border: 1px solid #00ffac;
    }
}
/* else0814 分类按钮悬停绿色高亮 end */

.filter-heder .filter-style {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
}

.filter-heder .filter-style>div {
    cursor: pointer;
}

@media (max-width:959px) {
    #xqbj-container .banner {
        margin-bottom: 1.25rem;
    }

    .filter-heder {
        padding-bottom: 1.25rem;
    }

    .filter-heder .filter-tags {
        gap: 0.8rem;
    }

    .filter-heder .filter-tags a {
        font-size: 1.4rem;
        height: 3rem;
        padding: 0 1.6rem;
    }
}

/* else0811 首页轮播占位图 start */
/* W8 首页轮播 banner 占位：.slide-box 高度来自 aspect-ratio 440/180（本文件 82-90 行），
   占位图是 absolute inset:0（本文件 69-76 行），不参与父高计算，缩小不会塌陷 */
@media (min-width: 960px) {
    .slide-box > img:not([src]),
    .slide-box > img.loading {
        width: 5rem;
        height: 5rem;
        max-width: 5rem;
        min-height: 0;
        margin: auto;
    }
}
/* else0811 首页轮播占位图 end */

/* else0811 H5首页卡片布局 start */
/* H13 H5 首页卡片：矩阵/列表两种模式的字号、图片尺寸与间距按设计稿（Figma 27:29916 / 29:30452）落位。
   为什么写在页面级 首页.css 而不是 common.css：.post-card-list-cloumn / .post-card-list-row 是公共类，
   福利中心、我的收藏、个人中心各 tab 等 10+ 个页面都在用；H13 需求点名的只有首页，改公共实现会波及全部
   使用方。本文件由 header.tpl:61 按控制器/方法自动加载，只在首页生效，天然把作用域限定在需求点名的模块。
   特异性：本文件在 index.css（其第 30 行 @import common.css）之后加载，同特异性天然后来居上，
   下面每条都不低于 common.css 里的对应规则。 */
@media (max-width:959px) {

    /* ---- H13-1 行列间距：设计稿矩阵 340×393 两列、行列 gap 均 20px ---- */

    /* 公共类 .post-card-list-cloumn 在 common.css:5313 写成 gap: 1（缺单位），整条声明被 CSS 解析器
       丢弃，实际生效的是基类 row-gap:1rem / column-gap:0.7rem（common.css:5058-5059），结果是列间距
       14px、卡宽 (700-14)/2 = 343px，与设计稿 20px / 340px 不符。
       公共类 gap:1 无单位是既有 bug，此处仅首页覆盖，公共修复另开条目（直接改公共类会改变全部使用方视觉）。
       内容区宽 = 750 − 2×25（.xqbj-main-container margin:0 1.25rem，adaptation.m.0.css:311）= 700px = 35rem，
       gap 1rem 后卡宽 = (700−20)/2 = 340px，与设计稿逐像素对上 */
    .post-card-list-cloumn:not(.post-card-list-row) {
        gap: 1rem;
    }

    /* 列表模式的 section 同时带 .post-card-list-cloumn 和 .post-card-list-row（首页.tpl 切换逻辑），
       所以上一条用 :not(.post-card-list-row) 排除掉列表模式——两条选择器互斥，谁先谁后都不影响结果，
       与本块其余规则的 :not() 写法一致。列表模式按设计稿「纵向步进 296 − 卡高 271 = 25px」显式给出，
       覆盖公共类的 gap:0.8rem（common.css:5228） */
    .post-card-list-row {
        gap: 1.25rem;
    }

    /* ---- H13-2 矩阵卡片 ---- */
    /* 以下仅矩阵模式生效：列表模式的 section 会同时带 .post-card-list-row，用 :not() 排除 */

    /* else0814 矩阵卡片卡体背景 start（测试打回：设计稿卡片有 #1C2128 卡体，else0811 只做了内边距漏了底色；
       圆角按 Figma 27:29916 实测不对称：封面蒙版上两角 20px=1rem、文字区矩形下两角 10px=0.5rem；
       卡体 overflow:hidden 统一裁切，封面图下两角直角与文字区无缝衔接） */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item {
        background: #1c2128;
        border-radius: 1rem 1rem 0.5rem 0.5rem;
        overflow: hidden;
    }

    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-img {
        border-radius: 1rem 1rem 0 0;
    }
    /* else0814 矩阵卡片卡体背景 end */

    /* 设计稿卡体 340×202：文字区左右各内缩 16px（标题框 308），底部补 16px 凑满 202 */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info {
        padding: 0 0.8rem 0.8rem;
    }

    /* 设计稿标题框 308×72 两行 → 行高 36px = 1.8rem；
       Figma 未标字号，维持现状 1.4rem(28px)，只把 normal 行高撑到 36px */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info>a {
        line-height: 1.8rem;
        margin-top: 0.8rem;
    }

    /* 设计稿是「标签行」在上、「头像+昵称行」在下两层；
       现状两者挤在同一个 flex row 里互相抢 340px 宽度，昵称被 ellipsis 截断、标签被 overflow 裁掉 */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info .post-card-item-info-but {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        margin-top: 0.8rem;
    }

    /* DOM 顺序是「用户 → 标签」，设计稿是「标签 → 用户」，用 order 翻转，不动模板 */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info .post-card-item-info-but .post-card-item-tag {
        order: -1;
        flex: none;
        width: 100%;
        gap: 0.5rem;
        height: 1.5rem;
    }

    /* 设计稿标签 64×30 → 3.2rem × 1.5rem */
    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info .post-card-item-info-but .post-card-item-tag>a {
        min-width: 3.2rem;
        height: 1.5rem;
    }

    .post-card-list-cloumn:not(.post-card-list-row) .post-card-item .post-card-item-info .post-card-item-info-but .post-card-item-user {
        width: 100%;
        margin-right: 0;
    }

    /* ---- H13-3 列表卡片：设计稿 700×271，封面 302×170，标题 350×78 ---- */
    .homepage-list .post-card-list-row .post-card-item {
        position: relative;
        display: block;
        height: 13.55rem;
        overflow: hidden;
        border: 0;
        border-radius: 0.5rem;
        background: #1c2128;
    }

    .homepage-list .post-card-list-row .post-card-item::after {
        position: absolute;
        top: 10.1rem;
        right: 0.5rem;
        left: 0.5rem;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        content: "";
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-img {
        position: absolute;
        z-index: 1;
        top: 0.8rem;
        right: 0.8rem;
        width: 15.1rem;
        height: 8.5rem;
        border-radius: 1rem;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-img::before {
        display: none;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info>a {
        position: absolute;
        top: 0.8rem;
        left: 0.8rem;
        width: 17.5rem;
        height: 3.9rem;
        margin: 0;
        line-height: 1.95rem;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-info-but {
        position: static;
        margin: 0;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-tag {
        position: absolute;
        top: 7.8rem;
        left: 0.5rem;
        width: 17.5rem;
        height: 1.5rem;
        gap: 0.5rem;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-tag>a {
        min-width: 3.2rem;
        height: 1.5rem;
        padding: 0 0.6rem;
        border-radius: 1.2rem;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-user {
        position: absolute;
        top: 10.95rem;
        left: 0.8rem;
        width: 12.4rem;
        height: 1.8rem;
        margin: 0;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-datainfo {
        position: absolute;
        top: 10.95rem;
        right: 0.8rem;
        left: 14.8rem;
        display: flex;
        height: 1.8rem;
        padding: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        font-size: 1rem;
    }

    .homepage-list .post-card-list-row .post-card-item .post-card-item-info .post-card-item-datainfo .post-card-item-datainfo-num {
        flex-direction: row;
        align-items: center;
        margin: 0;
    }
}
/* else0811 H5首页卡片布局 end */

/* else0923 迭代 start */
/* 年龄限制弹窗：Figma 58:351（web 400×408）/ 58:588（h5 600×612@750），尺寸按 1rem = 20 设计 px 换算；class 与 51 系列 age-gate-* 统一 */
html.age-gate-open,
body.age-gate-open {
    overflow: hidden !important;
}

.age-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.age-gate-overlay[hidden] {
    display: none !important;
}

.age-gate-dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #133733 0%, #131d19 100%);
    border: 1px solid #d2ffed;
}

.age-gate-title {
    margin: 0;
    font-weight: 600;
    background: linear-gradient(90deg, #ebf8ec 0%, #1abc9d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.age-gate-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.age-gate-description span {
    display: block;
}

.age-gate-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.age-gate-button span {
    display: block;
}

.age-gate-button-minor {
    text-align: left;
    background: linear-gradient(90deg, #0f2827 0%, #0f2315 100%);
    border: 1px solid #d2ffed;
}

/* 选择器带上 .age-gate-button 提高优先级，压过上面 .age-gate-button span 的 display:block，否则 flex 居中失效、18+ 贴左上 */
.age-gate-button .age-gate-badge {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #1abc9d;
    border-radius: 50%;
    color: #1abc9d;
    font-weight: 500;
}

.age-gate-button-minor .age-gate-button-text span:first-child {
    color: #1abc9d;
    font-weight: 500;
}

.age-gate-button-minor .age-gate-button-text span:last-child {
    color: rgba(255, 255, 255, 0.7);
}

.age-gate-button-adult {
    flex-direction: column;
    justify-content: flex-start;
    background: #1abc9d;
    color: #fff;
}

.age-gate-button-adult span:first-child {
    font-weight: 500;
}

@media (min-width: 960px) {
    .age-gate-dialog {
        width: 20rem;
        padding: calc(1rem - 1px) 0;
        border-radius: 0.8rem;
    }

    .age-gate-shield {
        width: 5.3rem;
        height: 5.3rem;
    }

    .age-gate-title {
        margin-top: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.4667rem;
    }

    .age-gate-description {
        margin-top: 0.6333rem;
        font-size: 0.7rem;
        line-height: 1.0667rem;
    }

    .age-gate-button-minor {
        width: 17.15rem;
        height: 3rem;
        margin-top: 0.9rem;
        padding-left: 1rem;
        gap: 0.75rem;
        border-radius: 0.6rem;
    }

    .age-gate-badge {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
        line-height: 0.8rem;
    }

    .age-gate-button-minor .age-gate-button-text span {
        font-size: 0.6rem;
        line-height: 0.6667rem;
    }

    .age-gate-button-minor .age-gate-button-text span:last-child {
        margin-top: 0.3333rem;
    }

    .age-gate-button-adult {
        width: 13.45rem;
        height: 2.2rem;
        margin-top: 1rem;
        padding-top: 0.3rem;
        border-radius: 1.5rem;
    }

    .age-gate-button-adult span:first-child {
        font-size: 0.8rem;
        line-height: 0.8rem;
    }

    .age-gate-button-adult span:last-child {
        margin-top: 0.2rem;
        font-size: 0.6rem;
        line-height: 0.6rem;
    }
}

@media (max-width: 959px) {
    .age-gate-dialog {
        width: 30rem;
        padding: calc(1.5rem - 1px) 0;
        border-radius: 1.2rem;
    }

    .age-gate-shield {
        width: 7.95rem;
        height: 7.95rem;
    }

    .age-gate-title {
        margin-top: 1.05rem;
        font-size: 2.1rem;
        line-height: 2.2rem;
    }

    .age-gate-description {
        margin-top: 1rem;
        font-size: 1.05rem;
        line-height: 1.6rem;
    }

    .age-gate-button-minor {
        width: 25.725rem;
        height: 4.5rem;
        margin-top: 1.4rem;
        padding-left: 1.5rem;
        gap: 1.1rem;
        border-radius: 0.9rem;
    }

    .age-gate-badge {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
        line-height: 1.2rem;
    }

    .age-gate-button-minor .age-gate-button-text span {
        font-size: 0.9rem;
        line-height: 1rem;
    }

    .age-gate-button-minor .age-gate-button-text span:last-child {
        margin-top: 0.5rem;
    }

    .age-gate-button-adult {
        width: 20.175rem;
        height: 3.3rem;
        margin-top: 1.4rem;
        padding-top: 0.45rem;
        border-radius: 2.25rem;
    }

    .age-gate-button-adult span:first-child {
        font-size: 1.2rem;
        line-height: 1.2rem;
    }

    .age-gate-button-adult span:last-child {
        margin-top: 0.4rem;
        font-size: 0.8rem;
        line-height: 0.8rem;
    }
}
/* else0923 迭代 end */