/* ============================================================================
 * 装修富文本统一内容样式（C 端前台）
 * ----------------------------------------------------------------------------
 * ⚠️ 与商家端 src/styles/rich-content.scss 的 .rich-content 段**必须保持一致**。
 *    那边改了这里就要跟着改，否则「装修画布」与「买家看到的前台」又会对不上。
 *
 * 为什么单独抽成静态文件而不是写进模板内联 <style>：
 *   1. 编辑器、画布、前台三处共用同一份规则，才可能真正所见即所得；
 *   2. 这个文件在 public/ 下，可以独立更新，不必动 app/index（线上 root 权限）。
 *
 * 覆盖的内容由 wangEditor 产生：
 *   p / h1~h5 / ul / ol / li / table(th,td) / blockquote / hr / img / a / pre / code
 * ========================================================================== */

.rich-content {
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
}

.rich-content > :first-child {
    margin-top: 0 !important;
}
.rich-content > :last-child {
    margin-bottom: 0 !important;
}

/* ---------------- 段落 ---------------- */
.rich-content p {
    margin: 0;
}
.rich-content p + p {
    margin-top: 6px;
}

/* ---------------- 标题 ---------------- */
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5 {
    margin: 10px 0 6px;
    font-weight: 600;
    line-height: 1.35;
}
.rich-content h1 {
    font-size: 1.6em;
}
.rich-content h2 {
    font-size: 1.35em;
}
.rich-content h3 {
    font-size: 1.18em;
}
.rich-content h4 {
    font-size: 1.05em;
}
.rich-content h5 {
    font-size: 0.92em;
}

/* ---------------- 列表 ---------------- */
.rich-content ul {
    margin: 6px 0;
    padding-left: 22px;
    list-style: disc outside;
}
.rich-content ol {
    margin: 6px 0;
    padding-left: 22px;
    list-style: decimal outside;
}
.rich-content li {
    margin: 2px 0;
}
.rich-content ul ul {
    list-style: circle outside;
}
.rich-content ul ul ul {
    list-style: square outside;
}

/* ---------------- 表格（编辑器里什么样，前台就什么样） ---------------- */
.rich-content table {
    margin: 8px 0;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.rich-content th,
.rich-content td {
    min-width: 24px;
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    vertical-align: top;
    text-align: left;
}
.rich-content th {
    background: #f7f8fa;
    font-weight: 600;
}
.rich-content table p {
    margin: 0;
}

/* ---------------- 引用 / 分割线 ---------------- */
.rich-content blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid #dcdfe6;
    background: #fafafa;
    color: #606266;
}
.rich-content hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #e5e6eb;
}

/* ---------------- 图片 / 链接 / 代码 ----------------
 * ⚠️ 关键：C 端 detail.html 的全局规则 `img { display: block }`（第 48 行）
 *    会把所有富文本图片压成块级、强制换行，导致「后端能并排、前端每段一张」。
 *    这里用 `.rich-content img`（特异性高于裸 `img`）显式改回 inline-block，
 *    让前后端一致、多图也能并排。商家端同理显式声明，避免再被某处全局规则带偏。 */
.rich-content img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

/* 单行图片段落（wangEditor 给每张图各包一个 <p>）不再独占一行，
 * 这样连续插两张图就能真正并排；老浏览器不支持 :has 时回落成块级（无回归）。 */
.rich-content p:has(> img:only-child) {
    display: inline-block;
    margin: 0;
    vertical-align: top;
}
.rich-content a {
    color: #165dff;
    text-decoration: underline;
}
.rich-content pre {
    margin: 8px 0;
    padding: 10px 12px;
    background: #f7f8fa;
    border-radius: 4px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
}
.rich-content code {
    padding: 1px 4px;
    background: #f2f3f5;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}
.rich-content pre code {
    padding: 0;
    background: none;
}

/* ============================================================================
 * 覆盖文字（图片上的文字）—— 需要更紧凑的排版
 * ----------------------------------------------------------------------------
 * .ad-text 是绝对定位、可能只有 2px 内边距的小块，
 * 段落间距一旦按正文 6px 走就会把文字顶出图片，所以这里压到 0。
 * 只作用于覆盖层，不影响正文区块。
 * ========================================================================== */
.ad-text.rich-content p,
.ad-text.rich-content h1,
.ad-text.rich-content h2,
.ad-text.rich-content h3,
.ad-text.rich-content h4,
.ad-text.rich-content h5,
.ad-text.rich-content div,
.ad-text.rich-content li {
    margin: 0;
    line-height: 1.4;
}
.ad-text.rich-content ul,
.ad-text.rich-content ol {
    margin: 0;
    padding-left: 18px;
}