/* =====================================================================
   装修频道一期 · 户型详情页「装修效果」案例区（2026-10）
   仅 loupan-hx-detail.html 引用；全部 jyn-zx- 前缀，不改公共样式
   数据：renovation&action=hxSlots（1大卡+4小卡，服务端 RAND）
   ===================================================================== */
.jyn-zx-slots{
  --zxs-primary:#7D8471; --zxs-primary-dark:#656B5C; --zxs-primary-light:#EDEFEA;
  --zxs-gold:#D4A56A; --zxs-gold-dark:#C0815A; --zxs-gold-light:#F7EFE4;
  --zxs-hot:#E85A3A;
  --zxs-t1:#2B2D28; --zxs-t2:#55584F; --zxs-t3:#5F6259; --zxs-t4:#8a8d82;
  --zxs-border:#ECEAE5; --zxs-shadow:0 2px 14px rgba(74,72,62,.07);
  margin:14px auto 4px;
}
.jyn-zx-slots[hidden]{display:none;}

/* 标题行 */
.jyn-zxs-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px;}
.jyn-zxs-head .t{font-size:19px;font-weight:800;color:var(--zxs-t1);display:flex;align-items:center;gap:8px;}
.jyn-zxs-head .t::before{content:"";width:5px;height:19px;border-radius:3px;background:linear-gradient(180deg,var(--zxs-gold),var(--zxs-gold-dark));}
.jyn-zxs-head .cnt{font-size:12.5px;color:var(--zxs-t4);}
.jyn-zxs-head .more{margin-left:auto;font-size:13px;color:var(--zxs-primary-dark);}
.jyn-zxs-head .more:hover{color:var(--zxs-hot);}

/* 大卡 */
.jyn-zxs-big{
  display:flex;gap:18px;background:#fff;border:1px solid var(--zxs-border);
  border-radius:14px;padding:15px;transition:.18s;box-shadow:var(--zxs-shadow);
}
/* 整卡即链接：去掉默认蓝链颜色/下划线（含访问后变紫），内部文字色由各自规则控制 */
a.jyn-zxs-big,a.jyn-zxs-big:visited{text-decoration:none;color:var(--zxs-t1);}
a.jyn-zxs-sm,a.jyn-zxs-sm:visited{text-decoration:none;color:var(--zxs-t1);}
a.jyn-zxs-big{display:flex;}
.jyn-zxs-big:hover{box-shadow:0 10px 30px rgba(74,72,62,.13);transform:translateY(-2px);border-color:var(--zxs-gold);}
.jyn-zxs-big .cover{position:relative;width:300px;height:200px;flex:none;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#d8d3c4,#b8b1a0);}
.jyn-zxs-big .cover img{width:100%;height:100%;object-fit:cover;transition:.3s;}
.jyn-zxs-big:hover .cover img{transform:scale(1.03);}
.jyn-zxs-big .cover .rk{position:absolute;left:9px;top:9px;background:linear-gradient(135deg,var(--zxs-gold),var(--zxs-gold-dark));color:#fff;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:20px;box-shadow:0 2px 8px rgba(192,129,90,.35);}
.jyn-zxs-big .cover .wm{position:absolute;right:8px;bottom:7px;font-size:10.5px;color:rgba(255,255,255,.92);background:rgba(0,0,0,.25);padding:1px 7px;border-radius:4px;}
.jyn-zxs-big.locked .cover{filter:grayscale(.2);}
.jyn-zxs-big .cover .lockflag{position:absolute;right:9px;top:9px;background:rgba(43,45,40,.72);color:#fff;font-size:11px;border-radius:6px;padding:2px 8px;}

.jyn-zxs-big .info{flex:1;min-width:0;display:flex;flex-direction:column;}
.jyn-zxs-big .info h5{font-size:17px;font-weight:800;line-height:1.45;margin-bottom:8px;color:var(--zxs-t1);}
.jyn-zxs-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px;}
.jyn-zxs-tags span{font-size:12px;background:var(--zxs-primary-light);color:var(--zxs-primary-dark);border-radius:5px;padding:2px 9px;}
.jyn-zxs-tags span.gold{background:var(--zxs-gold-light);color:var(--zxs-gold-dark);}
.jyn-zxs-big .desc{font-size:13px;color:var(--zxs-t3);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jyn-zxs-com{margin-top:auto;display:flex;align-items:center;gap:9px;padding-top:11px;border-top:1px dashed var(--zxs-border);}
.jyn-zxs-com .logo{width:28px;height:28px;border-radius:7px;flex:none;object-fit:cover;background:linear-gradient(135deg,#c9c2b0,#9b937f);}
.jyn-zxs-com .logo.txt{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;}
.jyn-zxs-com .cn{font-size:13.5px;font-weight:700;color:var(--zxs-t1);}
.jyn-zxs-com .vip{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--zxs-gold),var(--zxs-gold-dark));color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:1px 6px;margin-left:2px;}
.jyn-zxs-com .locktip{font-size:11.5px;color:#a8966a;margin-left:2px;}
.jyn-zxs-com .go{margin-left:auto;font-size:12.5px;color:var(--zxs-t4);}
.jyn-zxs-big:hover .go{color:var(--zxs-hot);}

/* 小卡 */
.jyn-zxs-smalls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:13px;}
.jyn-zxs-sm{background:#fff;border:1px solid var(--zxs-border);border-radius:12px;overflow:hidden;transition:.18s;display:block;}
.jyn-zxs-sm:hover{border-color:var(--zxs-gold);transform:translateY(-2px);box-shadow:var(--zxs-shadow);}
.jyn-zxs-sm .cover{position:relative;height:118px;background:linear-gradient(135deg,#d8d3c4,#b0a892);}
.jyn-zxs-sm .cover img{width:100%;height:100%;object-fit:cover;}
.jyn-zxs-sm .cover .wm{position:absolute;right:6px;bottom:5px;font-size:9.5px;color:rgba(255,255,255,.9);background:rgba(0,0,0,.22);padding:0 5px;border-radius:3px;}
.jyn-zxs-sm.locked .cover{filter:grayscale(.25);}
.jyn-zxs-sm .cover .lockflag{position:absolute;top:6px;right:6px;background:rgba(43,45,40,.72);color:#fff;font-size:10px;border-radius:5px;padding:1px 7px;}
.jyn-zxs-sm .meta{padding:9px 11px 11px;}
.jyn-zxs-sm .meta h6{font-size:13px;font-weight:700;color:var(--zxs-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jyn-zxs-sm .meta .c{font-size:11.5px;color:var(--zxs-t4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jyn-zxs-sm .meta .c .vip{color:var(--zxs-gold-dark);}
.jyn-zxs-sm.locked .meta .c{color:#b0a284;}

/* 小卡不足4个时：大卡占整行，小卡按实际数量等宽（grid 自动处理） */

/* 自然位：永久绑定本户型的其他案例（2026-10-27 互导） */
.jyn-zxs-nat{margin-top:20px;}
.jyn-zxs-nat-head{font-size:15px;font-weight:800;color:var(--zxs-t1);margin:0 2px 11px;display:flex;align-items:baseline;gap:9px;}
.jyn-zxs-nat-head::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--zxs-primary);}
.jyn-zxs-nat-head span{font-size:12px;font-weight:400;color:var(--zxs-t4);}
.jyn-zxs-sm .cover .vvwrap{position:absolute;left:6px;top:6px;display:flex;gap:4px;z-index:2;}
.jyn-zxs-sm .cover .vv{font-size:10px;line-height:1;color:#fff;background:rgba(43,45,40,.72);border-radius:5px;padding:3px 6px;white-space:nowrap;}
.jyn-zxs-sm .cover .vv.vr{background:rgba(125,132,113,.92);}

/* 楼盘/户型列表角标 */
.jyn-zxs-badge{
  position:absolute;left:7px;top:7px;z-index:5;
  background:linear-gradient(135deg,var(--zxs-gold),var(--zxs-gold-dark));
  color:#fff;font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:6px;
  box-shadow:0 2px 7px rgba(192,129,90,.4);pointer-events:none;white-space:nowrap;
}
.jyn-zxs-badge::before{content:"🏠 ";font-size:10px;}

@media (max-width:1240px){
  .jyn-zx-slots{width:96%;}
}
@media (max-width:900px){
  .jyn-zxs-big{flex-direction:column;}
  .jyn-zxs-big .cover{width:100%;height:auto;aspect-ratio:3/2;}
  .jyn-zxs-smalls{grid-template-columns:repeat(2,1fr);}
}