/**
 * 全局博客文章统一样式表
 * 兼容 WordPress 古腾堡编辑器 (Gutenberg)、Elementor 及自定义 HTML 布局
 */

/* ==========================================================================
   1. 全局 CSS 变量 / 主题全局配置
   ========================================================================== */
:root {
    /* 品牌核心色彩 */
    --blog-primary: #0f4c81;         /* 主色调：深工业蓝 */
    --blog-primary-light: #eef5fc;   /* 主色浅背景：柔和淡蓝 */
    --blog-primary-dark: #0a3357;    /* 主色深色：暗调夜空蓝 */
    --blog-accent: #f26522;          /* 强调色/行动色：工业橙 */
    --blog-accent-hover: #d95314;    /* 强调色悬停状态 */
    
    /* 中性基础色彩 */
    --blog-text-dark: #1e293b;       /* 暗色标题文字 */
    --blog-text-main: #334155;       /* 正文主要文字 */
    --blog-text-muted: #64748b;      /* 次要/辅助灰字 */
    --blog-bg-body: #f8fafc;         /* 整体背景浅灰 */
    --blog-bg-card: #ffffff;         /* 卡片纯白背景 */
    --blog-border-color: #e2e8f0;    /* 统一边框颜色 */
    
    /* 布局与修饰效果 */
    --blog-radius: 12px;             /* 主圆角弧度 */
    --blog-radius-sm: 6px;           /* 小小部件圆角 */
    --blog-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);                                /* 微弱阴影 */
    --blog-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04); /* 标准卡片阴影 */
    --blog-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);/* 突出部件阴影 */
    
    /* 字体族定义 */
    --blog-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. 主容器与基础排版样式
   ========================================================================== */
.blog-container,
.single-post .entry-content {
    max-width: 960px;
    margin: 0 auto;
    font-family: var(--blog-font-family);
    line-height: 1.75;
    color: var(--blog-text-main);
    font-size: 1.05rem;
}

/* 一级至四级标题排版 */
.blog-container h1, .entry-content h1 {
    font-size: 2.25rem;
    color: var(--blog-primary-dark);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.blog-container h2, .entry-content h2 {
    font-size: 1.6rem;
    color: var(--blog-primary-dark);
    margin-top: 45px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

/* H2 标题左侧竖线装饰 */
.blog-container h2::before, .entry-content h2::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 24px;
    background: var(--blog-primary);
    border-radius: 3px;
    flex-shrink: 0;
}

.blog-container h3, .entry-content h3 {
    font-size: 1.25rem;
    color: var(--blog-text-dark);
    margin-top: 30px;
    margin-bottom: 12px;
    font-weight: 600;
}

.blog-container h4, .entry-content h4 {
    font-size: 1.1rem;
    color: var(--blog-text-dark);
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 600;
}

.blog-container p, .entry-content p {
    margin-bottom: 20px;
    color: var(--blog-text-main);
}

.blog-container strong, .entry-content strong {
    color: var(--blog-text-dark);
    font-weight: 600;
}

/* 核心导读/文章导言段落框 */
.lead-paragraph {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--blog-text-main);
    background: #f1f5f9;
    padding: 22px 26px;
    border-radius: var(--blog-radius);
    border-left: 4px solid var(--blog-primary);
    margin-bottom: 35px;
}

/* 文章元信息行（发布日期、分类等） */
.meta-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--blog-text-muted);
    font-weight: 500;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--blog-border-color);
}

.meta-tag {
    background: var(--blog-primary-light);
    color: var(--blog-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ==========================================================================
   3. 列表、品牌标签与动态流程图组件
   ========================================================================== */
.blog-container ul, .entry-content ul,
.blog-container ol, .entry-content ol {
    padding-left: 24px;
    margin-bottom: 25px;
}

.blog-container li, .entry-content li {
    margin-bottom: 10px;
    color: var(--blog-text-main);
}

/* 品牌/技术规格标签列表 */
.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.brand-badge {
    background-color: #f1f5f9;
    color: var(--blog-text-main);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--blog-border-color);
}

/* 步骤/逻辑流程图容器 */
.diagram-container {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border: 1px solid var(--blog-border-color);
    border-radius: var(--blog-radius);
    padding: 30px 20px;
    margin: 30px 0;
}

.diagram-title {
    text-align: center;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blog-text-muted);
    font-weight: 700;
    margin-bottom: 20px;
}

.diagram-flow {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

/* 电脑端响应式展开为横向流程 */
@media (min-width: 768px) {
    .diagram-flow {
        flex-direction: row;
    }
}

.diagram-box {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 18px 20px;
    flex: 1;
    width: 100%;
    text-align: center;
    box-shadow: var(--blog-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.diagram-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--blog-shadow-md);
    border-color: var(--blog-primary);
}

.diagram-box strong {
    display: block;
    color: var(--blog-primary);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.diagram-box span {
    font-size: 0.85rem;
    color: var(--blog-text-muted);
}

.diagram-arrow {
    color: var(--blog-accent);
    font-weight: bold;
    font-size: 1.4rem;
}

/* 移动端将箭头旋转为向下 */
@media (max-width: 767px) {
    .diagram-arrow {
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   4. 高质感数据对比表格
   ========================================================================== */
.table-responsive {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: var(--blog-radius);
    border: 1px solid var(--blog-border-color);
    box-shadow: var(--blog-shadow-sm);
}

.blog-container table, .entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
    background: #ffffff;
    margin: 0;
}

.blog-container th, .entry-content th {
    background-color: #0f172a;      /* 暗黑深灰表头 */
    color: #ffffff;
    padding: 14px 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.blog-container td, .entry-content td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--blog-border-color);
    vertical-align: top;
    color: var(--blog-text-main);
}

.blog-container tr:last-child td, .entry-content tr:last-child td {
    border-bottom: none;
}

.blog-container tr:nth-child(even), .entry-content tr:nth-child(even) {
    background-color: #f8fafc;      /* 隔行变色效果 */
}

.blog-container tr:hover, .entry-content tr:hover {
    background-color: #f1f5f9;      /* 鼠标悬停高亮 */
}

/* 表格内部状态/适用场景标签 */
.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.status-ideal {
    background-color: #dcfce7;      /* 浅绿背景：推荐/最佳 */
    color: #15803d;
}

.status-not-ideal {
    background-color: #fee2e2;      /* 浅红背景：受限/不推荐 */
    color: #b91c1c;
}

/* ==========================================================================
   5. 多列卡片、网格与序号步骤组件
   ========================================================================== */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0;
}

@media (min-width: 768px) {
    .grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-item {
    background: #ffffff;
    border: 1px solid var(--blog-border-color);
    border-radius: var(--blog-radius);
    padding: 22px;
    box-shadow: var(--blog-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-item:hover {
    box-shadow: var(--blog-shadow-md);
    border-color: #cbd5e1;
}

/* 带数字序号的步骤卡片 */
.step-card {
    position: relative;
    padding-left: 65px;
}

.step-number {
    position: absolute;
    left: 20px;
    top: 20px;
    background: var(--blog-primary);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ==========================================================================
   6. 警告提示框与维护周期时间线
   ========================================================================== */
/* 橙色警告/特别强调框 */
.callout {
    background-color: #fff7ed;
    border-left: 4px solid var(--blog-accent);
    padding: 22px;
    border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
    margin: 30px 0;
    border-top: 1px solid #ffedd5;
    border-right: 1px solid #ffedd5;
    border-bottom: 1px solid #ffedd5;
}

.callout-title {
    font-weight: 700;
    color: #c2410c;
    margin-bottom: 8px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 维护周期卡片（按运行小时数分类） */
.maint-box {
    background-color: #ffffff;
    border: 1px solid var(--blog-border-color);
    border-left: 4px solid var(--blog-primary);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 15px;
    box-shadow: var(--blog-shadow-sm);
}

.maint-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.maint-tag {
    background-color: var(--blog-primary-light);
    color: var(--blog-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.maint-title {
    font-weight: 700;
    color: var(--blog-text-dark);
    font-size: 1.05rem;
}

/* ==========================================================================
   7. 行动召唤（CTA / 询盘引导）浮块
   ========================================================================== */
.cta-box {
    background: linear-gradient(135deg, var(--blog-primary-dark) 0%, var(--blog-primary) 100%);
    color: #ffffff;
    border-radius: var(--blog-radius);
    padding: 40px 30px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    box-shadow: var(--blog-shadow-lg);
}

.cta-box h3 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.cta-box p {
    color: #93c5fd;
    max-width: 650px;
    margin: 0 auto 25px auto;
    font-size: 1.05rem;
}

.cta-button {
    display: inline-block;
    background-color: var(--blog-accent);
    color: #ffffff !important;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.3);
}

.cta-button:hover {
    background-color: var(--blog-accent-hover);
    transform: translateY(-1px);
}

/* ==========================================================================
   8. 原生 WordPress 基础排版增强（图片、引言块、代码块）
   ========================================================================== */
/* 图片与图注样式 */
.blog-container figure, .entry-content figure {
    margin: 30px 0;
}

.blog-container img, .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--blog-radius);
    box-shadow: var(--blog-shadow-sm);
}

.blog-container figcaption, .entry-content figcaption {
    font-size: 0.875rem;
    color: var(--blog-text-muted);
    text-align: center;
    margin-top: 8px;
}

/* 引用块样式 */
.blog-container blockquote, .entry-content blockquote {
    border-left: 4px solid var(--blog-primary);
    padding: 15px 20px 15px 25px;
    margin: 30px 0;
    background: var(--blog-primary-light);
    border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
    font-style: italic;
    color: var(--blog-text-dark);
}

/* 代码块与行内代码样式 */
.blog-container pre, .entry-content pre {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 20px;
    border-radius: var(--blog-radius);
    overflow-x: auto;
    font-size: 0.9rem;
    margin: 25px 0;
}

.blog-container code, .entry-content code {
    background-color: #f1f5f9;
    color: #0f172a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.blog-container pre code, .entry-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* ==========================================================================
   补充样式 —— 追加到 /css/blog-style.css 末尾
   说明：原 blog-style.css 缺少以下 4 个原内联版页面用到的组件样式，
   统一补齐后，所有博客文章即可完全脱离内联 <style> 使用。
   ========================================================================== */

/* 1. 公式展示框（选型公式等） */
.blog-container .formula-display,
.entry-content .formula-display {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    background: #ffedd5;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    color: #9a3412;
    margin: 10px 0;
    display: inline-block;
    font-size: 0.95rem;
}

/* 2. 第三种状态标签：特殊用途（黄色系） */
.status-special {
    background-color: #fef3c7;      /* 浅黄背景：特殊/定制场景 */
    color: #b45309;
}

/* 3. 卡片内 h4 标题（原内联版有、CSS 文件无） */
.blog-container .card-item h4,
.entry-content .card-item h4 {
    color: var(--blog-primary-dark);
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
}

/* 4. 维护卡片 - 关键操作（橙色）变体 */
.blog-container .maint-box--critical,
.entry-content .maint-box--critical {
    border-left-color: var(--blog-accent);
}

.blog-container .maint-tag--critical,
.entry-content .maint-tag--critical {
    background-color: #ffedd5;
    color: #c2410c;
}

/* 5. 提示框内的示例注释文字 */
.blog-container .callout-note,
.entry-content .callout-note {
    font-size: 0.95rem;
    color: #7c2d12;
    margin-bottom: 0;
}
/* ==========================================================================
   图片专用补充样式 v2 —— 追加到 /css/blog-style.css 末尾
   （包含上一版 v1 的全部内容 + 新增的图片网格/卡片图样式）
   ========================================================================== */

/* ---------- 上一版 v1 内容（如已粘贴过可跳过这段） ---------- */

/* 1. 公式展示框 */
.blog-container .formula-display,
.entry-content .formula-display {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    background: #ffedd5;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    color: #9a3412;
    margin: 10px 0;
    display: inline-block;
    font-size: 0.95rem;
}

/* 2. 特殊用途标签（黄色系） */
.status-special {
    background-color: #fef3c7;
    color: #b45309;
}

/* 3. 卡片内 h4 标题 */
.blog-container .card-item h4,
.entry-content .card-item h4 {
    color: var(--blog-primary-dark);
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
}

/* 4. 维护卡片 - 关键操作（橙色）变体 */
.blog-container .maint-box--critical,
.entry-content .maint-box--critical {
    border-left-color: var(--blog-accent);
}

.blog-container .maint-tag--critical,
.entry-content .maint-tag--critical {
    background-color: #ffedd5;
    color: #c2410c;
}

/* 5. 提示框内的示例注释文字 */
.blog-container .callout-note,
.entry-content .callout-note {
    font-size: 0.95rem;
    color: #7c2d12;
    margin-bottom: 0;
}

/* ---------- v2 新增：图片样式 ---------- */

/* 6. 三列产品图网格（发动机 / 发电机 / 控制柜） */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0;
}

@media (min-width: 768px) {
    .photo-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.photo-grid figure {
    margin: 0;
    background: var(--blog-bg-card);
    border: 1px solid var(--blog-border-color);
    border-radius: var(--blog-radius);
    overflow: hidden;
    box-shadow: var(--blog-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.photo-grid figure:hover {
    transform: translateY(-3px);
    box-shadow: var(--blog-shadow-md);
}

.photo-grid img {
    width: 100%;
    height: 220px;
    object-fit: cover;          /* 裁剪填满，不变形 */
    display: block;
    border-radius: 0;           /* 圆角由外层 figure 接管 */
    box-shadow: none;
}

.photo-grid figcaption {
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blog-primary);
    text-align: center;
    background: var(--blog-primary-light);
    margin-top: 0;
}

/* 7. 分类卡片内的小图（6 张结构图） */
.card-photo {
    margin: 0 0 12px 0;
}

.card-photo img {
    width: 100%;
    height: 240px;
    object-fit: cover;          /* 统一裁剪比例，6 张图高度完全一致 */
    display: block;
    border-radius: 8px;
    box-shadow: none;
}