/* ═══════════════════════════════════════════════════════════════════
 * 富华产品库 · 装修区块样式 blocks.css
 * 对应《开发规格 v2》§9 装修组件规格 / §6.5（产品库与后台画布共用同一份）
 *
 * 约定：所有类名以 .blk- 前缀开头，不与产品库既有类名冲突；
 *       颜色一律走 CSS 变量并带 fallback（画布注入时也可能缺变量）。
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 公共 ── */
.blk { position: relative; box-sizing: border-box; }
.blk * { box-sizing: border-box; }
.blk-tappable { cursor: pointer; }
.blk.is-inset { padding-left: 12px; padding-right: 12px; }
.blk.is-bleed { padding-left: 0; padding-right: 0; }

/* 编辑态链接角标用 link 图标；线上用 ↗（见下 .blk-arrow） */
.blk-linkmark {
  position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; border-radius: 4px;
  background: rgba(31, 35, 41, .55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-style: normal;
}
.blk-linkmark svg { width: 12px; height: 12px; }

/* ── text 文本框 ── */
.blk-html { font-size: 14.5px; line-height: 1.75; color: var(--ink, #1F2329); word-break: break-word; }
.blk-html p { margin: 0 0 .6em; }
.blk-html p:last-child { margin-bottom: 0; }
.blk-html a { color: var(--brand-ink, #466F12); }
.blk-html img { max-width: 100%; height: auto; border-radius: 5px; }
.blk-al-center .blk-html { text-align: center; }
.blk-al-right .blk-html { text-align: right; }

/* ── title 标题 ── */
.blk-title .blk-t {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--ink, #1F2329); letter-spacing: .2px;
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
}
.blk-t-bar { border-left: 3px solid var(--brand, #89C235); }
.blk-t-bar .blk-t { padding-left: 9px; }
.blk-t-center { text-align: center; }
.blk-t-center .blk-t { position: relative; display: inline-block; padding: 0 14px; }
.blk-t-center::before,
.blk-t-center::after {
  content: ''; position: absolute; left: 12px; right: 12px; height: 1px;
  background: var(--line, #E5E6EB);
}
.blk-t-center::before { top: 50%; }
.blk-t-center::after { display: none; }
.blk-t-center .blk-t { background: var(--paper, #fff); position: relative; z-index: 1; }

/* ── divider 分割线 ── */
.blk-d-line i { display: block; height: 1px; background: var(--line, #E5E6EB); }
.blk-d-space i { display: block; height: 0; }

/* ── image 图片框 ── */
.blk-grid { display: grid; gap: 0; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.blk-lay-grid-gap .blk-grid { gap: var(--gap, 8px); }
.blk-cell {
  position: relative; overflow: hidden; background: var(--brand-tint, #F2F8E6);
  border-radius: var(--r, 5px);
}
.blk-lay-grid .blk-cell { border-radius: 0; }
.blk-lay-grid .blk-grid { border-radius: var(--r, 5px); overflow: hidden; }
.blk-cell img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.blk-lay-grid .blk-cell + .blk-cell { border-left: 1px solid rgba(255, 255, 255, .35); }
.blk-img .blk-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.blk-img[style*="--cols:1"] .blk-cell img { aspect-ratio: auto; }

/* 单列大图：宽度 100%，高度自适应（避免裁掉内容） */
.blk-img .blk-grid:has(> .blk-cell:only-child) .blk-cell img { aspect-ratio: auto; }

/* 轮播 */
.blk-carousel {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.blk-carousel::-webkit-scrollbar { display: none; }
.blk-car-track { display: flex; }
.blk-car-track .blk-cell { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; }
.blk-car-track .blk-cell img { aspect-ratio: 4 / 3; }

/* 线上「可点击跳转」角标：↗（12px，--scrim 底 + 白图标） */
.blk-cell.has-link .blk-arrow,
.blk-arrow {
  position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 4px;
  background: rgba(31, 35, 41, .55); color: #fff; display: none; align-items: center; justify-content: center;
  font-style: normal; pointer-events: none;
}
.blk-cell.has-link .blk-arrow { display: flex; }
.blk-arrow::after { content: '↗'; font-size: 11px; line-height: 1; }
.blk-arrow svg { display: none; }

/* ── video 视频框（§9.8：L/M/S 三档 = 一行几个） ── */
.blk-vid-grid { display: grid; gap: 10px; grid-template-columns: repeat(var(--vcols-m, 2), minmax(0, 1fr)); }
@media (min-width: 760px) {
  .blk-vid-grid { grid-template-columns: repeat(var(--vcols-d, 3), minmax(0, 1fr)); }
}
.blk-v-L { --vcols-m: 1; --vcols-d: 2; }
.blk-v-M { --vcols-m: 2; --vcols-d: 3; }
.blk-v-S { --vcols-m: 3; --vcols-d: 4; }

.blk-vid {
  position: relative; margin: 0; border-radius: var(--r, 5px); overflow: hidden;
  background: #0E0F11; aspect-ratio: 16 / 9;
}
.blk-vid.is-portrait { aspect-ratio: 9 / 16; }
.blk-vid.is-portrait-force { aspect-ratio: 9 / 16; }
.blk-vid.is-portrait-force video { object-fit: contain; }
.blk-vid video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0E0F11; }
.blk-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(31, 35, 41, .52); color: #fff; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.blk-play svg { width: 22px; height: 22px; margin-left: 2px; }
.blk-vid-dur {
  position: absolute; right: 7px; bottom: 7px; font-style: normal; font-size: 11px;
  color: #fff; background: rgba(31, 35, 41, .55); border-radius: 4px; padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}
.blk-vid-share {
  position: absolute; right: 7px; top: 7px; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: rgba(31, 35, 41, .5); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.blk-vid-share svg { width: 14px; height: 14px; }
.blk-vid-dl {
  position: absolute; left: 7px; top: 7px; width: 26px; height: 26px; border-radius: 6px;
  background: rgba(31, 35, 41, .5); color: #fff; display: flex; align-items: center; justify-content: center;
}
.blk-vid-dl svg { width: 14px; height: 14px; }
.blk-vid-nm {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 9px 7px;
  font-size: 12.5px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── nav 导航区块（§9.9.4：列表 / 宫格 / 卡片） ── */
.blk-nav-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  color: var(--ink, #1F2329); background: var(--paper, #fff);
}
.blk-nav-item.is-flat { cursor: default; }
.blk-nav-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--brand-tint, #F2F8E6);
  color: var(--brand-ink, #466F12); display: flex; align-items: center; justify-content: center;
}
.blk-nav-ico svg { width: 17px; height: 17px; }
.blk-nav-img { flex: 0 0 auto; width: 72px; height: 54px; border-radius: 5px; object-fit: cover; }
.blk-nav-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.blk-nav-tx b { font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.blk-nav-sub { font-style: normal; font-size: 11.5px; color: var(--ink-3, #8F959E); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.blk-nav-ar { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-3, #8F959E); }
.blk-nav-ar svg { width: 16px; height: 16px; }

/* 列表：行高 52 */
.blk-nav-list { display: flex; flex-direction: column; }
.blk-nav-list .blk-nav-item { min-height: 52px; padding: 6px 10px; border-bottom: 1px solid var(--line-2, #F2F3F5); }
.blk-nav-list .blk-nav-item:last-child { border-bottom: 0; }

/* 宫格：图标在上、文字在下 */
.blk-nav-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.blk-nav-grid .blk-nav-item { flex-direction: column; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 10px; }
.blk-nav-grid .blk-nav-tx { align-items: center; }
.blk-nav-grid .blk-nav-tx b { font-size: 13px; }
.blk-nav-grid .blk-nav-ar { display: none; }

/* 卡片：左图右文（图 72×54） */
.blk-nav-card .blk-nav-item { padding: 8px 10px; border-bottom: 1px solid var(--line-2, #F2F3F5); }
.blk-nav-card .blk-nav-item:last-child { border-bottom: 0; }

/* ── 二维码弹层（LINK.showQr 用） ── */
#qr-pop { position: fixed; inset: 0; z-index: 9000; }
.qp-mask { position: absolute; inset: 0; background: rgba(25, 24, 19, .55); }
.qp-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 258px; background: #fff; border-radius: 14px; padding: 20px 18px 16px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.qp-t { font-size: 15px; font-weight: 600; color: #1F2329; margin-bottom: 12px; }
.qp-qr { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.qp-qr img, .qp-qr canvas { max-width: 200px; }
.qp-u { margin-top: 10px; font-size: 11px; color: #8F959E; word-break: break-all; line-height: 1.5; }
.qp-x { margin-top: 14px; width: 100%; height: 36px; border: 0; border-radius: 18px; background: #89C235; color: #191813; font-size: 14px; font-weight: 600; }