/* ==========================================================================
   案例列表页（/casess/ 家装案例、/shijingcasess/ 实景案例）补充样式
   独立文件：不改动已有的 case-list.css
   版本：v20261004a
   部署路径：/pub/css/case-list-extra.css
   模板引用：<link href="/pub/css/case-list-extra.css?v=20261004a" rel="stylesheet">

   本次改动（两件事）：
   1) 广告卡片类名 case-ad / case-ad-link / case-ad-inner  →  case-promo / case-promo-link / case-promo-inner
      原因：Brave 等带拦截插件的浏览器有 [class*="ad"] 这类宽泛规则，class 里只要含 ad 子串
            就把整个元素隐藏，哪怕是同域 /d/file/ 下的正常推广图也会被连坐。改名后彻底免疫。
      （list.var 与 case-list-scroll.js 已同步改名，本文件负责补齐改名后的布局样式）
   2) 手机端广告卡片不再单独占一整行，恢复为「穿插在案例之间、与同行案例卡片完全等高同尺寸」：
      卡片沿用 .article_li 的 46% 宽 + align-self:stretch（与案例卡同一行拉伸到等高），
      广告图 object-fit:cover 铺满卡片（同桌面端表现）。
   ========================================================================== */

/* ===== 广告（推广）卡片：与案例卡片同宽、同高，穿插在案例之间 =====
   复制自 case-list.css 里原来的 .case-ad 规则（原规则因改名不再命中），
   保证改名后视觉与桌面端完全一致；同时 .case-promo 也挂了 .article_li，
   会自动继承卡片宽度（手机 46%、电脑 400px）与三列对齐。 */
.article_list .case-promo {
    display: flex;
    align-items: stretch;
    justify-content: center;
    cursor: pointer;
    align-self: stretch; /* 拉伸到与同一行的案例卡片等高，消除图片下方空白 */
}
.article_list .case-promo a.case-promo-link {
    display: flex;
    width: 100%;
    height: 100%;
    flex: none;
    text-decoration: none;
}
.article_list .case-promo .case-promo-inner {
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
}
/* 手机端广告图：铺满整张卡片（与案例卡同高），居中裁剪，不再单独占整行 */
.article_list .case-promo img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* ===== 广告点击弹窗（纯表单，无背景图）=====
   原类名 case-ad-modal-* 含 ad 子串同样会被拦截规则隐藏，统一改名为 case-promo-modal-* */
#case-promo-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; }
.case-promo-modal-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); }
.case-promo-modal-body { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 92%; max-width: 420px; max-height: 88vh; overflow: auto; background: #fff; border-radius: 10px; padding: 26px 22px 22px; box-sizing: border-box; }
.case-promo-modal-close { position: absolute; top: 8px; right: 14px; font-size: 28px; color: #999; cursor: pointer; line-height: 1; z-index: 2; }
/* 纯表单样式（无背景图，白卡片） */
.case-promo-form-title { margin: 0 0 4px; font-size: 19px; font-weight: bold; color: #222; text-align: center; }
.case-promo-form-sub { margin: 0 0 16px; font-size: 13px; color: #999; text-align: center; }
.case-promo-form-row { margin-bottom: 12px; }
.case-promo-form-row input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #e3e3e3; border-radius: 6px; font-size: 14px; box-sizing: border-box; outline: none; }
.case-promo-form-row input:focus { border-color: #f88b12; }
.case-promo-form-submit { width: 100%; height: 46px; border: none; border-radius: 6px; background: #f88b12; color: #fff; font-size: 16px; cursor: pointer; }
.case-promo-form-submit:disabled { opacity: .7; cursor: default; }

/* ==========================================================================
   电脑端：也显示「共 X 套实景案例 / 共 X 套家装案例」
   该元素在 case-list.css 里是全局 display:none（只有手机端媒体查询里放开），
   这里用 body 前缀提高优先级，确保压过 case-list.css 的规则；
   并限制到与 .auto-container 相同的 1230px 容器宽度、居中，与下方列表左右对齐。
   ========================================================================== */
@media (min-width: 769px) {
    body .case-total-top {
        display: block;
        max-width: 1230px;
        margin: 0 auto 14px;
        padding: 0 15px;
        box-sizing: border-box;
        font-size: 15px;
        line-height: 24px;
        color: #555;
    }
    body .case-total-top .case-total-num {
        color: #f88b12;
        font-weight: bold;
        padding: 0 2px;
    }
}