/* ==========================================================================
   block-render.css — 可视化拖拽块的渲染样式
   ========================================================================== */

/* ===== 编辑模式：强制行列布局 ===== */
.resume .rb-row{display:flex !important;flex-wrap:nowrap !important;gap:4mm !important;margin:0 0 6mm !important;align-items:flex-start !important}
.resume .rb-row:last-child{margin-bottom:0 !important}
.resume .rb-row-1>.rb-col{flex:1 1 100% !important;width:100% !important;max-width:100% !important;min-width:0 !important}
.resume .rb-row-2>.rb-col{flex:1 1 48% !important;width:48% !important;max-width:48% !important;min-width:0 !important}
.resume .rb-col{display:flex !important;flex-direction:column !important;gap:6mm !important;min-width:0 !important;overflow:hidden}
.resume .rb-col>.rb-block:last-child{margin-bottom:0 !important}
.resume .rb-block{margin:0 !important}
.resume .rb-block>.r-sec{margin:0 !important}
.resume .rb-col .rb-block .r-sec{margin-left:0 !important;margin-right:0 !important}

/* ===== 照片 ===== */
.resume .rb-photo{display:inline-block;line-height:0;margin:0}
.resume .rb-photo img{display:block;width:100%;height:auto;object-fit:cover;border-radius:0}
.resume .rb-photo-circle img{border-radius:50%}
.resume .rb-photo-square img{border-radius:6px}
.resume .rb-photo-small{width:22mm}
.resume .rb-photo-medium{width:32mm}
.resume .rb-photo-large{width:44mm}
.resume .rb-photo-empty{display:flex;align-items:center;justify-content:center;width:32mm;height:40mm;border:1px dashed #cfd6e6;border-radius:6px;color:#9aa4bb;font-size:9pt;background:#f8fafc}
.resume .rb-photo-circle .rb-photo-empty{border-radius:50%;height:32mm}

/* ===== 分隔线 ===== */
.resume .rb-divider{height:0;border-top:1px solid var(--tpl-line);margin:4mm 0}

/* ===== 联系方式 ===== */
.resume .rb-contact{margin:0 0 6mm;color:var(--tpl-muted);font-size:9pt;letter-spacing:.3px;line-height:1.8}

/* ===== 技能条 ===== */
.resume .rb-skillbar{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3mm}
.resume .rb-skillbar li{display:flex;align-items:center;gap:3mm}
.resume .rb-skill-name{flex:0 0 30%;font-size:10pt;color:var(--tpl-body)}
.resume .rb-skill-track{flex:1 1 auto;height:6px;background:#e8ecf3;border-radius:99px;overflow:hidden}
.resume .rb-skill-track>i{display:block;height:100%;background:var(--tpl-accent);border-radius:99px}

/* ===== 社交链接 ===== */
.resume .rb-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2.5mm}
.resume .rb-links li{display:flex;flex-wrap:wrap;gap:3mm;align-items:baseline}
.resume .rb-link-label{flex:0 0 22mm;font-size:10pt;font-weight:700;color:var(--tpl-body)}
.resume .rb-link-url{font-size:10pt;color:var(--tpl-accent);word-break:break-all}

/* ===== 二维码 ===== */
.resume .rb-qr{text-align:center}
.resume .rb-qr-img{display:block;max-width:36mm;width:100%;height:auto;margin:0 auto 3mm;border-radius:4px}
.resume .rb-qr-empty{display:flex;align-items:center;justify-content:center;width:32mm;height:32mm;margin:0 auto 3mm;border:1px dashed #cfd6e6;border-radius:4px;color:#9aa4bb;font-size:9pt;background:#f8fafc}
.resume .rb-qr-cap{font-size:9pt;color:var(--tpl-muted);margin:0}

/* ===== 编辑时可编辑区提示 ===== */
.resume.mode-edit .rb-block [contenteditable="true"]:hover{background:#eef4ff}
.resume.mode-edit .rb-block [contenteditable="true"]:focus{background:#e3eeff;box-shadow:0 0 0 2px #a8c4ff}

/* ===== 手机端：块结构上下堆叠，宽度不溢出 ===== */
@media(max-width:680px){
  .preview-stage .resume .rb-row,
  #resume-wrap .resume .rb-row{flex-direction:column !important;flex-wrap:wrap !important;gap:14px !important;margin-bottom:16px !important}
  .preview-stage .resume .rb-row>.rb-col,
  #resume-wrap .resume .rb-row>.rb-col{flex:1 1 100% !important;width:100% !important;max-width:100% !important}
  .preview-stage .resume .rb-photo-medium,
  #resume-wrap .resume .rb-photo-medium{width:26mm}
  .preview-stage .resume .rb-photo-large,
  #resume-wrap .resume .rb-photo-large{width:34mm}
}

/* ==========================================================================
   打印：强制两列 flex
   用 #resume-wrap / .preview-stage 的 ID 级前缀，权重压过上方手机端规则
   ========================================================================== */
@media print{
  #resume-wrap .resume .rb-row,
  #resume-wrap .resume .rb-row-1,
  #resume-wrap .resume .rb-row-2,
  .preview-stage .resume .rb-row,
  .preview-stage .resume .rb-row-1,
  .preview-stage .resume .rb-row-2{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:4mm !important;
    padding:0 !important;
    margin:0 0 6mm 0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
  #resume-wrap .resume .rb-row>.rb-col,
  .preview-stage .resume .rb-row>.rb-col{
    display:block !important;
    flex:none !important;
    padding:0 !important;
    margin:0 !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
  #resume-wrap .resume .rb-row-2>.rb-col,
  .preview-stage .resume .rb-row-2>.rb-col{
    width:46% !important;
    max-width:46% !important;
    flex:0 0 46% !important;
  }
  #resume-wrap .resume .rb-row-1>.rb-col,
  .preview-stage .resume .rb-row-1>.rb-col{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  #resume-wrap .resume .rb-block,
  .preview-stage .resume .rb-block{
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
  #resume-wrap .resume .rb-col .rb-block .r-sec,
  .preview-stage .resume .rb-col .rb-block .r-sec{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #resume-wrap .resume .rb-row,
  #resume-wrap .resume .rb-block,
  .preview-stage .resume .rb-row,
  .preview-stage .resume .rb-block{border:0 !important;background:transparent !important}
}