/* ============================================================
   lzjdjt.com — 自由画布元素渲染样式（前台 about_canvas + 后台编辑器预览共用）
   ============================================================ */
.lzc { font-family: inherit; }
.lzc-body { padding: 44px 0 60px; }
/* 自由画布是固定 1180px 的"画稿"：前台必须与编辑器画布同宽渲染，否则绝对定位元素会错位。
   窄屏时保持 1180px 并允许横向滚动，而不是把画稿压扁。 */
.lzc-body { overflow-x: auto; }
.lzc-frame { position: relative; width: 1180px; min-width: 1180px; margin: 0 auto; padding: 0; box-sizing: border-box; }

/* 元素容器（编辑器里可选中；前台无交互仅排版） */
.lzc-el { position: relative; box-sizing: border-box; }

/* 🔠 标题 */
.lzc-heading { line-height: 1.3; letter-spacing: .5px; }
.lzc-heading.h1 { font-size: 34px; font-weight: 700; }
.lzc-heading.h2 { font-size: 27px; font-weight: 600; }
.lzc-heading.h3 { font-size: 21px; font-weight: 600; }
.lzc-heading .sub { display:block; margin-top:10px; font-size:15px; font-weight:400; color:#8a8f98; letter-spacing:1px; }

/* 📝 富文本 */
.lzc-text { font-size:15px; line-height:1.85; color:#333; word-break:break-word; }
.lzc-text p { margin:0 0 12px; }
.lzc-text img { max-width:100%; height:auto; border-radius:6px; }
.lzc-text a { color:#2b6df6; }
.lzc-text ul, .lzc-text ol { padding-left:22px; margin:0 0 12px; }
.lzc-text h1,.lzc-text h2,.lzc-text h3 { margin:18px 0 10px; }

/* 🖼 图片 */
.lzc-image { display:block; }
.lzc-image img { display:block; width:100%; height:auto; border-radius:8px; }
.lzc-image.has-frame { box-shadow:0 6px 24px rgba(0,0,0,.08); }

/* 🔗 图片+链接（按钮式卡片） */
.lzc-imglink { position:relative; border-radius:10px; overflow:hidden; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.lzc-imglink img { width:100%; height:100%; object-fit:cover; }
.lzc-imglink .mask { position:absolute; inset:0; background:rgba(20,30,55,.32); display:flex; align-items:center; justify-content:center; }
.lzc-imglink .mask span { color:#fff; font-size:17px; font-weight:600; letter-spacing:2px; padding:11px 26px; border:1px solid rgba(255,255,255,.9); border-radius:40px; background:rgba(255,255,255,.12); }
.lzc-imglink.has-img .mask { background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.55)); }
.lzc-imglink.no-img { background:linear-gradient(135deg,#2b6df6,#8b5cf6); min-height:120px; }

/* 分隔条 / 间距 */
.lzc-divider { border-top:1px solid #e6e8eb; }
.lzc-divider.c1 { border-top-width:1px; }
.lzc-divider.c3 { border-top-width:3px; border-color:#e2e6ea; }
.lzc-spacer { }

/* 靠左 / 居中 / 靠右 */
.lzc-align { display:block; }
.lzc-a-left   { text-align:left;   }
.lzc-a-center { text-align:center; }
.lzc-a-right  { text-align:right;  }

/* 响应式：移动端整页回收为标准流（宽度铺满、从上到下），画稿不再强制 1180px */
@media (max-width: 768px){
  .lzc-body { overflow-x: visible; }
  .lzc-frame { width: 100%; min-width: 0; height: auto !important; }
  .lzc-el{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; margin:0 0 26px !important; }
}

/* ===== 卡片网格（自由画布元素 grid）===== */
.lzc-grid { display:grid; gap:16px; width:100%; }
.lzc-grid .lzc-card { background:#fff; border:1px solid #eef0f3; border-radius:12px; overflow:hidden; text-decoration:none; color:#222; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.lzc-grid .lzc-card:hover { box-shadow:0 10px 26px rgba(20,30,55,.1); transform:translateY(-3px); }
.lzc-grid .lzc-card-img { display:block; width:100%; aspect-ratio:4/3; max-height:220px; background:#f2f4f7; overflow:hidden; }
.lzc-grid .lzc-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.lzc-grid .lzc-card-body { display:flex; flex-direction:column; padding:10px 12px 12px; gap:5px; }
.lzc-grid .lzc-card-title { font-size:14px; font-weight:600; color:#1b2430; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lzc-grid .lzc-card-date { font-size:12px; color:#9aa1ab; }
.lzc-grid .lzc-card-sum { font-size:12px; color:#7a828e; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lzc-grid .lzc-card-price { margin-top:2px; font-size:15px; font-weight:700; color:#e0342c; }
/* 固定卡高模式：图片自适应填满剩余空间，不变形 */
.lzc-grid-fixed .lzc-card { height:100%; min-height:0; }
.lzc-grid-fixed .lzc-card-img { aspect-ratio:auto; max-height:none; flex:1 1 auto; min-height:0; }
.lzc-grid-fixed .lzc-card-img img { width:100%; height:100%; object-fit:contain; }
.lzc-grid-fixed .lzc-card-body { flex:0 0 auto; }
.lzc-grid-empty { display:flex; align-items:center; justify-content:center; min-height:180px; border:1px dashed #d6dce4; border-radius:10px; color:#98a0ab; background:#fbfcfd; font-size:14px; }
