/* =====================================================================
   PC户型列表页 · 暮山风格（2026-10-27）
   - 与户型详情页同一设计体系：本页同时加载 css/loupan_hx_detail.css，
     页头/页脚/ :root 变量与页面底色均来自该文件，本文件只补列表专属块
   - 类名统一 jyn-hxl- 前缀，不影响其他页面
   - 户型图一律 contain 不裁切（户型图裁切会缺尺寸标注）
   ===================================================================== */

/* ---------- 页面标题副标 ---------- */
.jyn-page-title small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--jyn-text3);}

/* ---------- 楼盘信息条 ---------- */
.jyn-hxl-bar{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--jyn-border);border-radius:var(--jyn-radius-xl);box-shadow:var(--jyn-shadow);padding:16px 20px;margin:0 0 22px;}
.jyn-hxl-bar .thumb{width:96px;height:70px;flex:none;border-radius:10px;object-fit:cover;background:var(--jyn-bg2);}
.jyn-hxl-bar .nm{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--jyn-text1);line-height:1.3;}
.jyn-hxl-bar .nm-t2{margin-left:8px;font-size:13px;font-weight:600;font-style:normal;letter-spacing:0;color:var(--jyn-text3);}
.jyn-hxl-bar .sub{margin-top:4px;font-size:12px;color:var(--jyn-text3);line-height:1.5;}
.jyn-hxl-bar .sep{width:1px;height:44px;flex:none;background:var(--jyn-border);}
/* 数字格不参与压缩：一旦被挤窄，20px 数字加单位会折行，三格标签跟着错位 */
.jyn-hxl-cell{flex:none;}
.jyn-hxl-cell b{display:block;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--jyn-text1);font-variant-numeric:tabular-nums;white-space:nowrap;}
.jyn-hxl-cell b .u,.jyn-hxl-cell .u{font-size:11.5px;font-weight:500;color:var(--jyn-text3);margin-left:3px;}
.jyn-hxl-cell b small{font-size:12.5px;font-weight:600;color:var(--jyn-text3);margin-left:1px;}
/* 只针对标签行；用 > 避免命中数字里的单位 <span class="u">（否则单位被强排成第二行） */
.jyn-hxl-cell > span{display:block;margin-top:4px;font-size:11px;color:var(--jyn-text3);white-space:nowrap;}
.jyn-hxl-cell[hidden]{display:none;}
.jyn-hxl-cell.is-stock b{color:var(--jyn-hot);}
.jyn-hxl-cell.is-stock.is-out b{color:var(--jyn-text3);}
.jyn-hxl-bar .right{margin-left:auto;display:flex;gap:10px;flex:none;}
.jyn-hxl-bar .right .jyn-btn{flex:none;width:auto;padding:9px 20px;font-size:13px;}

/* ---------- 户型卡栅格 ---------- */
.jyn-hxl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.jyn-hxl-item{position:relative;display:flex;min-width:0;}
.jyn-hxl-card{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--jyn-border);border-radius:18px;overflow:hidden;
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;}
.jyn-hxl-card:hover{box-shadow:0 10px 26px rgba(60,52,40,.13);transform:translateY(-3px);border-color:rgba(125,132,113,.5);}

/* 图片区：白底 contain，装修角标由 jyn-zx-badge.js 注入到 .imgbox 左上角 */
.jyn-hxl-pic{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;border-bottom:1px solid var(--jyn-border);}
.jyn-hxl-pic img{display:block;max-width:100%;max-height:100%;object-fit:contain;}
.jyn-hxl-card.is-out .jyn-hxl-pic img{opacity:.65;}

/* 左下：销售状态；右下：VR */
.jyn-hxl-badge{position:absolute;left:10px;bottom:10px;z-index:4;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;line-height:1.6;
  background:var(--jyn-primary-light);color:var(--jyn-primary-dark);}
.jyn-hxl-badge.ds{background:#FDF3E3;color:#A9762F;}
.jyn-hxl-badge.sq{background:#F1F0EC;color:#8B8F84;}
.jyn-hxl-vr{position:absolute;right:10px;bottom:10px;z-index:4;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;line-height:1.6;
  background:rgba(60,64,54,.8);color:#fff;}

/* 文字区 */
.jyn-hxl-body{display:flex;flex-direction:column;flex:1;padding:13px 15px 15px;}
.jyn-hxl-name{margin:0;font-size:15.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em;color:var(--jyn-text1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jyn-hxl-meta{margin:5px 0 0;font-size:12px;color:var(--jyn-text3);line-height:1.5;}
/* 价格行：.huxing-price 供 beian-stock.js 挂「剩 N 套」角标 */
.jyn-hxl-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;margin:auto 0 0;padding-top:11px;}
.jyn-hxl-price b{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--jyn-hot);font-variant-numeric:tabular-nums;}
.jyn-hxl-price span{font-size:11.5px;color:var(--jyn-text3);}
.jyn-hxl-price .tbd{font-size:15px;font-weight:700;color:var(--jyn-text3);letter-spacing:0;}

/* 首套利率优惠角标：贴卡片右上角。样式本页自带——线上 loupan_public.css 里没有 .jyn-fl 规则，
   且 loupan_hx_detail.css 的 .jyn-fl 是 position:relative，会把标签算进 item 宽度、把卡片挤窄 */
.jyn-hxl-item .jyn-fl-card{position:absolute;left:auto;top:10px;right:10px;z-index:8;display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:9px;cursor:pointer;user-select:none;
  background:linear-gradient(135deg,#E8C47A,#D8AF5E);box-shadow:0 1px 5px rgba(120,80,10,.28);}
.jyn-hxl-item .jyn-fl-card .jyn-fl-txt{font-size:11.5px;font-weight:600;line-height:1.5;color:#5A3D12;white-space:nowrap;}
.jyn-hxl-item .jyn-fl-card .jyn-fl-chk{display:none;}
.jyn-hxl-item .jyn-fl-card .jyn-fl-bubble{display:none;position:absolute;left:auto;right:0;top:calc(100% + 8px);z-index:60;
  width:248px;padding:10px 12px;background:#fff;border:1px solid var(--jyn-border);border-radius:12px;
  box-shadow:0 12px 30px rgba(60,52,40,.16);font-size:12px;font-weight:400;line-height:1.7;
  color:var(--jyn-text2);text-align:left;white-space:normal;}
.jyn-hxl-item .jyn-fl-card .jyn-fl-chk:checked ~ .jyn-fl-bubble{display:block;}
@media (hover:hover){.jyn-hxl-item .jyn-fl-card:hover .jyn-fl-bubble{display:block;}}

/* 空状态 */
.jyn-hxl-empty{padding:64px 20px;background:#fff;border:1px solid var(--jyn-border);border-radius:var(--jyn-radius-xl);
  text-align:center;font-size:14px;color:var(--jyn-text3);line-height:1.9;}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .jyn-hxl-bar{flex-wrap:wrap;gap:14px 18px;}
  .jyn-hxl-bar .right{margin-left:0;flex-basis:100%;}
  .jyn-hxl-bar .right .jyn-btn{flex:1;}
  .jyn-hxl-bar .sep{display:none;}
  .jyn-hxl-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  .jyn-hxl-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .jyn-hxl-bar .thumb{width:76px;height:56px;}
  .jyn-hxl-bar .nm{font-size:17px;}
}
@media (max-width:560px){
  .jyn-hxl-grid{grid-template-columns:1fr;}
  .jyn-hxl-price b{font-size:20px;}
}