/* ============================================================
   YxEditor 文章排版组件渲染样式（编辑区 + 前台文章详情通用）
   仅包含 .yx-t-* 组件；基础正文元素样式在各页面 CSS 中
   ============================================================ */

/* —— 标题样式 —— */
.yx-t-h1 {
    text-align: center; font-size: 19px; font-weight: 700;
    color: #fff; background: linear-gradient(90deg,#0D9488,#14B8A6);
    padding: 10px 20px; border-radius: 30px; margin: 22px 0 14px;
}
.yx-t-h2 {
    font-size: 17px; font-weight: 700; color: #0F766E;
    padding: 0 0 0 12px; border-left: 5px solid #0D9488;
    line-height: 1.3; margin: 20px 0 12px;
}
.yx-t-h3 {
    font-size: 16px; font-weight: 700; text-align: center;
    color: #334155; margin: 20px 0 12px;
}
.yx-t-h3::before, .yx-t-h3::after { content: "—— "; color: #14B8A6; }
.yx-t-h3 span::after { content: " ——"; color: #14B8A6; }
.yx-t-h4 {
    display: inline-block; font-size: 15px; font-weight: 700;
    color: #fff; background: #0D9488;
    padding: 6px 16px; border-radius: 0 12px 12px 0;
    margin: 18px 0 10px;
}
.yx-t-h5 {
    font-size: 16px; font-weight: 700; color: #134E4A;
    text-align: center; margin: 20px 0 12px;
    padding: 8px 0; border-top: 2px solid #0D9488; border-bottom: 2px solid #0D9488;
}

/* —— 提示卡片 —— */
.yx-t-card {
    border-radius: 10px; padding: 12px 16px; margin: 14px 0;
    font-size: 14px; line-height: 1.7;
}
.yx-t-card p:last-child { margin-bottom: 0; }
.yx-t-card .yx-t-card-title { font-weight: 700; display: block; margin-bottom: 4px; }
.yx-t-info { background: #EFF6FF; border-left: 4px solid #3B82F6; color: #1E40AF; }
.yx-t-success { background: #ECFDF5; border-left: 4px solid #10B981; color: #065F46; }
.yx-t-warning { background: #FFFBEB; border-left: 4px solid #F59E0B; color: #92400E; }
.yx-t-danger { background: #FEF2F2; border-left: 4px solid #EF4444; color: #991B1B; }
.yx-t-note { background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 8px; padding: 10px 14px; color: #64748B; font-size: 13px; margin: 12px 0; }

/* —— 引用卡片 —— */
.yx-t-quote {
    background: linear-gradient(135deg,#F0FDFA,#CCFBF1);
    border-radius: 10px; padding: 14px 18px; margin: 14px 0;
    color: #134E4A; position: relative;
}
.yx-t-quote::before {
    content: "\201C"; font-size: 40px; color: #5EEAD4;
    position: absolute; top: -6px; left: 10px; font-family: Georgia, serif;
}
.yx-t-quote p { padding-left: 26px; margin-bottom: 0; }

/* —— 图文卡片 —— */
.yx-t-imgtext {
    display: flex; gap: 14px; align-items: center;
    background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 10px; padding: 14px; margin: 14px 0;
}
.yx-t-imgtext.reverse { flex-direction: row-reverse; }
.yx-t-imgtext .yx-t-it-img { flex: 0 0 120px; }
.yx-t-imgtext .yx-t-it-img img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; margin: 0; }
.yx-t-imgtext .yx-t-it-text { flex: 1; min-width: 0; }
.yx-t-imgtext .yx-t-it-text p { margin-bottom: 6px; font-size: 13px; color: #475569; }
.yx-t-imgtext .yx-t-it-text strong { font-size: 15px; color: #0F172A; display: block; margin-bottom: 6px; }

/* —— 分割线 —— */
.yx-t-hr1 { border: none; height: 2px; background: linear-gradient(90deg,transparent,#0D9488,transparent); margin: 24px 0; }
.yx-t-hr2 { border: none; border-top: 2px dashed #99F6E4; margin: 22px 0; }
.yx-t-hr3 { text-align: center; border: none; margin: 22px 0; color: #14B8A6; font-size: 16px; letter-spacing: 6px; }
.yx-t-hr3::after { content: "❖ ❖ ❖"; }

/* —— 移动端：图文卡片纵向堆叠 —— */
@media (max-width: 640px) {
    .yx-t-imgtext, .yx-t-imgtext.reverse { flex-direction: column; }
    .yx-t-imgtext .yx-t-it-img { flex: none; }
    .yx-t-imgtext .yx-t-it-img img { width: 100%; height: 180px; }
}