/* =====================================================================
   问答卡片（.wendaitem）样式 —— /home/wenda 与 /expo/guanzhu「问答」tab 共用
   用法：卡片容器加 class="wenda-cards"
        （问答页 .getdatadiv.wenda-cards、我的关注页 .fttxtbody.wenda-cards）
   - PC（>1024px）：容器 flex + gap 26px，卡片宽度由各页面自己给
                   （问答页 5 列 209px、关注页按中间栏宽给 4 列）
   - WAP（<=1024px）：容器自动栅格（每列 >=150px）；
                     有图卡 = 215:284 比例卡（图满铺 + 底部压暗 + 文字压底），
                     无图卡 = 白底纵向卡（用户行贴底，不留大片空白）
   ===================================================================== */

/* ---------- 1. 容器 ---------- */
.wenda-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-start;
}

/* ---------- 2. 卡片本体（高度按 215:284 比例，宽度由页面给） ---------- */
.wenda-cards .wendaitem {
    float: none !important;
    height: auto !important;
    aspect-ratio: 215 / 284 !important;
    box-sizing: border-box;
    margin: 0 !important;
}

.wenda-cards .wendaitembg {
    position: relative;
}

/* ---------- 3. 图片层：铺满整卡 + 底部压暗 ---------- */
.wenda-cards .wendabgimg {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    border-radius: 12px;
    background: linear-gradient(0deg, rgba(51, 51, 51, 0.40) 0%, rgba(51, 51, 51, 0.00) 100%);
}

.wenda-cards .wendabgimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- 4. 卡内三段：标题标签 / 正文标题 / 用户行 ---------- */
.wenda-cards .wendaitemtitle {
    width: auto !important;
    padding: 10px 0;
    box-sizing: border-box;
}

.wenda-cards .wendaitemtitle a {
    display: block;
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

.wenda-cards .wendaiteminfo {
    width: auto !important;
    height: auto !important;
    padding: 5px 0;
    box-sizing: border-box;
}

.wenda-cards .wendaitemuser {
    width: auto !important;
    display: flex;
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box;
}

.wenda-cards .wendaitemuser img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =====================================================================
   WAP / 平板（<= 1024px）：卡片改栅格，内容重排
   - 容器：按可用宽度自动分列（每列 >= 150px）——375/390 上为 2 列 170px 卡，
     平板 768~1024 为 4~6 列，卡片宽度始终稳定在 150~190px，不再是「一屏一张卡」
   - 有图卡：保持 215:284 竖版比例，图片满铺 + 底部压暗，标签置顶、标题与用户行压底
   - 无图卡：白底纵向卡片，用户行贴底，不再留大片空白
   ===================================================================== */
@media screen and (max-width: 1024px) {

    /* 2. 卡片容器：栅格 */
    .wenda-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch;
    }

    /* 3. 无图卡：白底、纵向排列、用户行贴底 */
    .wenda-cards .wendaitem {
        float: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 170px;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        border-radius: 10px !important;
        background: #FFF !important;
        box-sizing: border-box;
    }

    /* 手机上取消 PC 的 hover 底色残留（触摸端 hover 会粘住） */
    .wenda-cards .wendaitem:hover {
        background-color: #FFF !important;
    }

    /* 4. 有图卡：整块比例卡片，文字层全部绝对定位 */
    .wenda-cards .wendaitembg {
        aspect-ratio: 215 / 284 !important;
        min-height: 0;
        padding: 0 !important;
        background: transparent !important;
    }

    .wenda-cards .wendaitembg:hover {
        background-color: transparent !important;
    }

    .wenda-cards .wendaitembg .wendabgimg {
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        border-radius: 10px !important;
        background: none !important;
    }

    .wenda-cards .wendaitembg .wendabgimg img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* 底部压暗层（复用原 .wendabomimg）：在图片之上、文字之下，且不挡点击 */
    .wenda-cards .wendaitembg .wendabomimg {
        z-index: 0 !important;
        height: 100% !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.34) 40%, rgba(0, 0, 0, 0) 76%) !important;
        pointer-events: none !important;
    }

    /* 默认封面卡（无配图的问答，图 = icos/lord.png 亮蓝雪山）：按真实配图卡的
       压暗强度加一档，否则白色标题/正文压在亮天空上几乎看不清 */
    .wenda-cards .wendaitem-default .wendabomimg {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.44) 42%, rgba(0, 0, 0, 0.22) 80%) !important;
    }

    /* 顶部标题标签：卡面上与底部大标题是同一段文案（PC 版即如此），
       小卡上白字浮在图片上既读不清又重复，WAP 去掉，只留底部标题 */
    .wenda-cards .wendaitembg .wendaitemtitle {
        display: none !important;
    }

    /* 正文标题：贴用户行上方 */
    .wenda-cards .wendaitembg .wendaiteminfo {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 32px !important;
        width: auto !important;
        height: auto !important;
        max-height: 54px;
        margin: 0 !important;
        padding: 0 !important;
        color: #FFF !important;
        font-size: 14px !important;
        line-height: 18px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        z-index: 2;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .wenda-cards .wendaitembg .wendaiteminfo a {
        display: block;
        width: 100%;
        color: #FFF !important;
        word-break: break-word;
    }

    /* 用户行：贴卡片底部 */
    .wenda-cards .wendaitembg .wendaitemuser {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
        width: auto !important;
        height: 20px !important;
        line-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2;
    }

    /* 5. 无图卡内部排版 */
    .wenda-cards .wendaitem:not(.wendaitembg) .wendaitemtitle {
        width: 100% !important;
        height: 20px !important;
        line-height: 20px !important;
        margin: 0 0 8px 0 !important;
        padding: 0 6px !important;
        box-sizing: border-box;
        border-radius: 4px !important;
        font-size: 11px !important;
        overflow: hidden;
    }

    /* 置顶标与标题标签同排，给置顶标让位 */
    .wenda-cards .wendaitem:not(.wendaitembg):has(.divzhiding) .wendaitemtitle {
        padding-right: 42px !important;
    }

    .wenda-cards .wendaitem:not(.wendaitembg) .wendaitemtitle a {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px !important;
    }

    /* 无图卡没有「铺满整卡的图片链接」，这里让内部 <a> 竖向撑满标题区，
       整块空白也变成可点区域，点击行为与有图卡一致 */
    .wenda-cards .wendaitem:not(.wendaitembg) .wendaiteminfo {
        flex: 1 1 auto;
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: #333 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        word-break: break-word;
    }

    .wenda-cards .wendaitem:not(.wendaitembg) .wendaiteminfo a {
        display: -webkit-box !important;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        width: 100%;
        margin: 0 !important;
        overflow: hidden;
        color: #333 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        word-break: break-word;
    }

    .wenda-cards .wendaitem:not(.wendaitembg) .wendaitemuser {
        flex: 0 0 auto;
        width: 100% !important;
        height: 20px !important;
        line-height: 20px !important;
        margin: auto 0 0 0 !important;
        padding: 0 !important;
    }

    /* 6. 头像 / 昵称 / 点赞：两种卡片统一的手机尺寸 */
    .wenda-cards .wendaitemuser img:first-child {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        margin-right: 6px !important;
    }

    .wenda-cards .wendaitemuser a:first-child {
        height: 20px !important;
    }

    .wenda-cards .wendaitemname {
        width: auto !important;
        max-width: 62%;
        font-size: 11px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wenda-cards .wendaitemzan {
        height: 20px !important;
        line-height: 20px !important;
        font-size: 11px !important;
    }

    .wenda-cards .wendaitemzan img {
        width: 14px !important;
        height: 14px !important;
        margin-right: 3px !important;
    }
}

/* =====================================================================
   PC（>1024px）点击修复 —— 2026-10-21
   原来 .wendabgimg 是 z-index:-1，被卡片自身整块挡住 → 点图片不跳详情，
   只有文字能点；底部 50px 的压暗层（.wendabomimg，z-index:888）还会吃掉点击。
   这里：图片层提到 0、文字层压到 2、压暗渐变挪到 ::after（pointer-events:none），
   底部渐变不再接收点击 → 整张图片区都能进详情，视觉与原来一致。
   ===================================================================== */
@media screen and (min-width: 1025px) {
    .wenda-cards .wendabgimg {
        z-index: 0 !important;
    }

    .wenda-cards .wendabgimg::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(51, 51, 51, 0.40) 0%, rgba(51, 51, 51, 0.00) 100%);
        pointer-events: none;
    }

    /* 默认封面卡（无配图的问答，图 = icos/lord.png 亮蓝雪山）：真实配图卡只在底部压暗，
       这张图上面大半个卡是蓝天，白色标题标签/正文读不清，这里补一层整卡压暗 */
    .wenda-cards .wendaitem-default .wendabgimg::after {
        background: linear-gradient(185deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.56) 100%);
    }

    .wenda-cards .wendaitembg .wendaitemtitle,
    .wenda-cards .wendaitembg .wendaiteminfo,
    .wenda-cards .wendaitembg .wendaitemuser {
        position: relative;
        z-index: 2;
    }

    .wenda-cards .wendabomimg {
        pointer-events: none !important;
    }

    /* 标题小标签：原来是 height:23px + box-sizing:border-box + padding:10px 0，
       content 只剩 3px → 文字下半截被裁。去掉上下 padding（盒高仍是 23px，
       排版不动），长标题收成单行省略，不再出现「半行字」。 */
    .wenda-cards .wendaitemtitle {
        padding: 0 !important;
    }

    .wenda-cards .wendaitemtitle a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 有「置顶」标时给标题标签右侧让位（标是 absolute right:10 top:10，z-index 555，
       长标题会压到红标下面；WAP 侧本来就有同口径的 padding-right:42px） */
    .wenda-cards .wendaitem:has(.divzhiding) .wendaitemtitle {
        padding-right: 46px !important;
    }

    /* 无图卡：用户行贴底（跟 WAP 版一致），不再在卡片底部留 100+px 空白 */
    .wenda-cards .wendaitem:not(.wendaitembg) {
        display: flex;
        flex-direction: column;
    }

    .wenda-cards .wendaitem:not(.wendaitembg) .wendaitemuser {
        margin-top: auto;
    }

    /* 有图卡：正文标题 + 用户行贴底 —— 2026-10-21 用户反馈「标题和底部信息跑上面去了」。
       根因：基础 CSS 的 .wendaiteminfo{height:140px} 负责把内容撑到卡底，改成 height:auto 后
       内容只剩约 192px，而卡片是 215:284 比例的 276px → 底部空出 83px，标题与用户行整体上浮、
       压暗层空转。这里用纵向 flex + margin-top:auto 把正文标题压到用户行上方，
       用户行距卡底 18px（= 基础 CSS 下 height:140 时 user 底 266 / 卡高 284 的留白），
       与 WAP 版一致。 */
    .wenda-cards .wendaitembg {
        display: flex;
        flex-direction: column;
    }

    .wenda-cards .wendaitembg .wendaiteminfo {
        margin-top: auto;
    }

    .wenda-cards .wendaitembg .wendaitemuser {
        margin-bottom: 18px;
    }
}