{{ include 'partials/head' }}

{{~ # ============ 页面头（与栏目页一致：通栏白底 + h1 + 描述） ============ ~}}
<section class="bg-white border-b border-gray-100">
    <div class="max-w-6xl mx-auto px-4 py-8">
        <h1 class="text-2xl md:text-3xl font-bold" style="color: var(--color-ink);">{{ page.Title }}</h1>
        {{ if page.Summary }}
        <p class="mt-2 text-base" style="color: var(--color-secondary);">{{ page.Summary }}</p>
        {{ end }}
    </div>
</section>

{{~ # ============ 正文区（与文章详情一致：白卡承托 + 自定义富文本样式） ============ ~}}
<style>
.page-content { color: var(--color-ink); line-height: 1.8; font-size: 16px; }
.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child { margin-bottom: 0; }
.page-content h1 { font-size: 1.75rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.3; color: var(--color-ink); }
.page-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 0.875rem; line-height: 1.35; color: var(--color-ink); }
.page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; line-height: 1.4; color: var(--color-ink); }
.page-content h4 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--color-ink); }
.page-content p { margin: 0.875rem 0; }
.page-content ul, .page-content ol { margin: 0.875rem 0; padding-left: 1.5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin: 0.375rem 0; }
.page-content li > ul, .page-content li > ol { margin: 0.375rem 0; }
.page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.page-content a:hover { opacity: 0.8; }
.page-content strong, .page-content b { font-weight: 700; color: var(--color-ink); }
.page-content em, .page-content i { font-style: italic; }
.page-content blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, white); color: var(--color-secondary); border-radius: 0 4px 4px 0; }
.page-content blockquote p { margin: 0.375rem 0; }
.page-content code { background: #f1f5f9; color: #0f172a; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.page-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1.25rem 0; font-size: 0.9em; line-height: 1.6; }
.page-content pre code { background: transparent; color: inherit; padding: 0; }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.25rem 0; display: block; }
.page-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.page-content table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95em; }
.page-content th, .page-content td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
.page-content th { background: #f8fafc; font-weight: 600; }
/* 富文本编辑器常输出 <br> 分行的纯文本，用 white-space 兼容换行 */
.page-content-plain { white-space: pre-wrap; }
</style>

<main class="flex-1 max-w-4xl mx-auto px-4 py-8 w-full">
    <article class="bg-white rounded-lg shadow-sm p-8 md:p-10">
        {{ if page.CoverImageUrl }}
        <div class="mb-8">
            <img src="{{ abs_url page.CoverImageUrl }}" alt="{{ page.Title }}" class="w-full rounded-lg">
        </div>
        {{ end }}

        <div class="page-content">
            {{ page.Content }}
        </div>
    </article>
</main>

{{ include 'partials/footer' }}