/* case-list.css — 案例列表页样式
 * 原则：不改变 list.var 的 HTML 结构，仅用样式完成布局调整。
 * 排序技巧：卡片 <a> 用 flex 行换行 + order —— 图片(order1) → 标题(左,order2)+设计师(右,order2) 同行 → 户型|风格|面积(.subtitle,order3)；手机端用 display:contents 把图片内子元素提升为 <a> 直接子项，再 order 重排为 图片→标题→户型|风格|面积→设计师+浏览量(同行)。
 * 路径：/pub/css/case-list.css
 */

/* ===== 筛选区（沿用原页面样式，仅外置） ===== */
.article_screen { padding: 10px 0; }
.article_screen_tag { padding: 30px 30px 15px; background: #fff; }
.article_screen_tag .tag_list_box { margin-bottom: 15px; }
.article_screen_tag .tag_list_box .tag_list_cate { width: 80px; }
.article_screen_tag .tag_list_box .tag_list { display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 80px); }
.article_screen_tag .tag_list_box .tag { margin-right: 25px; cursor: pointer; }
.active { color: #f88b12; }

.article_screen_search { margin-top: 10px; padding: 10px 20px; background: #fff; display: flex; align-items: center; justify-content: space-between; }
.article_screen_search .new_view span { margin-right: 10px; cursor: pointer; }
.article_screen_search .select_list_box { display: flex; align-items: center; justify-content: flex-end; }
.article_screen_search .select_list_box .article_total { margin-right: 50px; }
.article_screen_search .select_list_box .article_total span { color: #f88b12; font-size: 16px; padding: 0 3px; }
.article_screen_search .select_list_box .select_list { display: flex; align-items: center; justify-content: flex-end; margin-right: 100px; }
.article_screen_search .select_list_box .select_list select { height: 25px; line-height: 25px; font-size: 14px; padding: 2px 10px; margin-right: 10px; border-radius: 3px; cursor: pointer; }
.article_screen_search .select_list_box .search_box { display: flex; align-items: center; border-radius: 3px; overflow: hidden; }
.article_screen_search .select_list_box .search_box .input_box { display: flex; align-items: center; border: 1px solid #f5f5f5; padding: 0 10px; box-sizing: border-box; }
.article_screen_search .select_list_box .search_box .input_box input { width: 100px; height: 23px; line-height: 23px; font-size: 12px; border: 0; }
.article_screen_search .select_list_box .search_box .search_btn { background: #f88b12; height: 25px; line-height: 25px; text-align: center; padding: 0 10px; font-size: 12px; color: #fff; cursor: pointer; }

/* ===== 手机端面包屑后：共计套数（电脑端隐藏，加载完成后底部统一提示） ===== */
.case-total-top { display: none; }
.case-total-top .case-total-num { color: #f88b12; font-weight: bold; padding: 0 2px; }
@media (max-width:768px) {
    .case-total-top { display: block; background: #fff; margin: 10px 0; padding: 10px 12px; font-size: 14px; color: #555; }
}

/* ===== 广告弹窗（点击广告弹出的纯表单，无背景图） ===== */
#case-ad-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; }
.case-ad-modal-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); }
.case-ad-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-ad-modal-close { position: absolute; top: 8px; right: 14px; font-size: 28px; color: #999; cursor: pointer; line-height: 1; z-index: 2; }
/* 纯表单样式（无背景图，白卡片） */
.case-ad-form-title { margin: 0 0 4px; font-size: 19px; font-weight: bold; color: #222; text-align: center; }
.case-ad-form-sub { margin: 0 0 16px; font-size: 13px; color: #999; text-align: center; }
.case-ad-form-row { margin-bottom: 12px; }
.case-ad-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-ad-form-row input:focus { border-color: #f88b12; }
.case-ad-form-submit { width: 100%; height: 46px; border: none; border-radius: 6px; background: #f88b12; color: #fff; font-size: 16px; cursor: pointer; }
.case-ad-form-submit:disabled { opacity: .7; cursor: default; }

/* ===== 列表卡片 ===== */
.article_list { display: flex; align-items: flex-start; flex-wrap: wrap; }
.article_list .article_li { background: #fff; width: 400px; margin-top: 10px; position: relative; overflow: hidden; cursor: pointer; margin-right: 15px; }
.article_list .article_li:nth-child(3n) { margin-right: 0; }

/* 卡片文字区用 flex 行换行（纯 CSS 重排，不动 HTML 顺序）：
   图片整行(order1) → 标题(左,order2) + 设计师(右,order2) 同行 → 户型|风格|面积整行(order3) */
.article_list .article_li a { display: flex; flex-wrap: wrap; align-items: stretch; text-decoration: none; }

.article_list .article_li .article_img { order: 1; flex: 0 0 100%; overflow: hidden; position: relative; }
.article_list .article_li .article_img img { width: 400px; height: 290px; display: block; }
.article_list .article_li .article_img:hover img { transform: scale(1.1); transition: all 1s ease 0s; -webkit-transform: scale(1.1); -webkit-transition: all 1s ease 0s; }

/* 需求3：标题 14px、不加粗，占左侧 */
.article_list .article_li .title { order: 2; flex: 1 1 auto; align-self: center; padding: 10px 15px 6px; margin-top: 0; font-size: 14px; font-weight: normal; color: #333; line-height: 1.5; }

/* 设计师+头像：电脑端靠标题右侧 */
.article_list .article_li .position { order: 2; flex: 0 0 auto; margin-left: auto; align-self: center; display: flex; align-items: center; gap: 8px; padding: 10px 15px 6px; white-space: nowrap; }
.article_list .article_li .position img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; overflow: hidden; }
.article_list .article_li .position span { color: #333 !important; /* 覆盖原内联白色，白底上需深色 */ font-size: 13px; }

/* 户型|风格|面积：标题下方整行 */
.article_list .article_li .subtitle { order: 3; flex: 0 0 100%; height: auto; padding: 0 15px 12px; margin-bottom: 0; font-size: 13px; color: #888; line-height: 1.5; }

/* ===== 广告卡片：与案例卡片同尺寸，随机穿插在案例中间 =====
   .case-ad 同时挂了 .article_li 类，自动继承卡片宽度/边距/三列对齐（含 nth-child(3n)），
   这里只需覆盖内容区布局；放在卡片样式之后以保证覆盖 .article_li a 的 flex 规则 */
.article_list .case-ad { display: flex; align-items: stretch; justify-content: center; cursor: pointer; align-self: stretch; /* 拉伸到与同行案例卡片等高，消除图片下方空白 */ }
.article_list .case-ad a.case-ad-link { display: flex; width: 100%; height: 100%; flex: none; }
.article_list .case-ad .case-ad-inner { display: flex; width: 100%; height: 100%; text-align: center; }
.article_list .case-ad img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto; }

/* 浏览量：电脑端鼠标指上去（hover）才显示 */
.article_list .article_li .view-count { position: absolute; right: 12px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; color: #fff; font-size: 12px; background: rgba(0,0,0,0.45); border-radius: 10px; padding: 2px 8px; opacity: 0; transition: opacity .2s; }
.article_list .article_li .article_img:hover .view-count { opacity: 1; }

/* 需求4：爱心+点赞数 半透明背景（PC/手机通用） */
.article_li .view { position: absolute; top: 10px; right: 12px; z-index: 5; display: flex; align-items: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); background: rgba(0,0,0,0.35); border-radius: 12px; padding: 3px 8px; }
/* 列表页点赞：红心可点击，不跳详情页 */
.article_li .view.like-btn-list { cursor: pointer; }
.article_li .view.like-btn-list.liked { background: rgba(229,73,58,0.85); }
.article_li .like-heart { color: #e5493a; font-size: 20px; margin-right: 6px; line-height: 1; } /* 电脑端爱心比16大一点 */
.article_li .like-count { font-size: 16px; line-height: 1; }
/* 点赞成功弹动动画 */
.article_li .view.pop .like-heart { animation: listLikePop .45s ease; }
@keyframes listLikePop{0%{transform:scale(1);}30%{transform:scale(1.5);}60%{transform:scale(.85);}100%{transform:scale(1);}}

/* ===== 分页等页面级 ===== */
.article_pagination { max-width: 800px; margin: 20px auto; }
.go_top { position: fixed; bottom: 15%; right: 10px; width: 50px; height: 50px; z-index: 99999; font-size: 30px; background: rgba(0, 0, 0, 0.5); color: #fff; line-height: 50px; text-align: center; cursor: pointer; }
.el-pagination { text-align: center; }
.el-pagination__rightwrapper { float: none; display: inline-block; }

/* ===== 无限下拉加载（替代原分页，手机端/电脑端统一） ===== */
/* 原分页不再展示，但保留 DOM 供 JS 推断下一页 URL */
.styled-pagination { display: none !important; }
.list-loading, .list-end { text-align: center; padding: 18px 0 30px; color: #999; font-size: 14px; }
.list-loading::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  border: 2px solid #ddd; border-top-color: #e5493a; border-radius: 50%;
  vertical-align: -3px; animation: listSpin .7s linear infinite;
}
@keyframes listSpin { to { transform: rotate(360deg); } }

/* ===== 需求6：手机端自适应 ===== */
@media (max-width:768px) {
    .el-pagination { text-align: center; }
    .el-pagination__rightwrapper, .el-pagination span:not([class*=suffix]) { display: none; }
    .article_screen_search { padding: 10px 0; }
    .article_screen_search .select_list_box .select_list select { width: 21%; margin: 5px 2%; }
    .article_screen_search .select_list_box { display: block; width: 100%; }
    .article_screen_search .select_list_box .select_list { flex-wrap: wrap; justify-content: flex-start; }
    .pc-show { display: none !important; }

    .article_list .article_li { width: 46%; margin: 2%; overflow: hidden; }
    .article_list .article_li:nth-child(3n) { margin-right: 2%; }

    /* 手机端：用 display:contents 把图片内的子元素（img/.view/.view-count）提升为 <a> 的直接 flex 子项，
       再用 order 重排为：图片(整行) → 标题(整行) → 户型|风格|面积(整行) → 设计师 + 浏览量(同一行)。
       点赞(.view) 仍是卡片右上角绝对定位（所有卡片都显示）。display:contents 仅在此媒体查询内生效。 */
    .article_list .article_li a { display: flex; flex-wrap: wrap; align-items: center; }
    .article_list .article_li .article_img { display: contents; }
    .article_list .article_li .article_img img { width: 100%; height: 130px; object-fit: cover; display: block; }

    /* 标题：图片下方整行，单行省略 */
    .article_list .article_li .title { order: 2; flex: 0 0 100%; padding: 8px 12px 2px; margin-top: 0; font-size: 14px; font-weight: normal; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 户型|风格|面积：标题下方整行，单行省略 */
    .article_list .article_li .subtitle { order: 3; flex: 0 0 100%; padding: 0 12px 6px; height: auto; font-size: 13px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 底行：设计师(靠左) —— 浏览量(靠右) 两端分布，同一行。
       position 限宽 + 名字省略号 → 名字长短不一也不会把浏览量挤换行/裁掉一半；
       view-count flex:0 0 auto 不伸缩 + margin-left:auto → 永远推到行最右、不跟设计师挤在一起。 */
    .article_list .article_li .position { order: 4; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 70px); margin-left: 0; padding: 4px 0 10px 12px; justify-content: flex-start; }
    .article_list .article_li .position span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .article_list .article_li .view-count { order: 5; position: static; opacity: 1; flex: 0 0 auto; margin-left: auto; margin-right: 0; padding: 4px 12px 10px 0; background: transparent; color: #888; border-radius: 0; white-space: nowrap; }

    /* 手机端爱心/数字 14 号 */
    .article_li .like-heart { font-size: 14px; }
    .article_li .like-count { font-size: 14px; }
    .article_list .article_li .position img { width: 22px; height: 22px; }
    .article_list .article_li .position span { font-size: 12px; }

    /* 手机端广告卡片：强制拉伸到与同行案例卡片等高，图片铺满整卡，消除下方空白 */
    .article_list .case-ad { align-self: stretch; }
    .article_list .case-ad .case-ad-inner img { width: 100%; height: 100%; object-fit: cover; }
}