{{ include 'partials/head' }}

<section class="relative overflow-hidden"
         style="background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, white), color-mix(in srgb, var(--color-secondary) 10%, white)); border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 18%, transparent);">
    <div class="aurora-orb" style="width: 280px; height: 280px; right: -80px; top: -80px; background: var(--color-primary);"></div>
    <div class="aurora-orb" style="width: 160px; height: 160px; left: 10%; bottom: -60px; background: var(--color-secondary);"></div>
    <div class="max-w-6xl mx-auto px-4 py-10 relative z-10">
        <h1 class="text-3xl md:text-4xl font-bold" style="color: var(--color-ink);">{{ page.Title }}</h1>
        {{ if page.Summary }}
        <p class="mt-3 text-base max-w-2xl" style="color: var(--color-secondary);">{{ page.Summary }}</p>
        {{ end }}
    </div>
</section>

<style>
.page-content { color: var(--color-ink); line-height: 1.85; font-size: 16.5px; }
.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child { margin-bottom: 0; }
.page-content h1 { font-family: var(--font-headline); font-size: 1.85rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.3; color: var(--color-ink); }
.page-content h2 { font-family: var(--font-headline); font-size: 1.55rem; font-weight: 700; margin: 1.9rem 0 0.9rem; line-height: 1.35; color: var(--color-ink); position: relative; padding-left: 14px; }
.page-content h2::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); }
.page-content h3 { font-family: var(--font-headline); font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--color-ink); }
.page-content p { margin: 0.9rem 0; }
.page-content ul, .page-content ol { margin: 0.9rem 0; padding-left: 1.5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin: 0.4rem 0; }
.page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.page-content a:hover { opacity: 0.75; }
.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.4rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, white); color: color-mix(in srgb, var(--color-ink) 80%, transparent); border-radius: 0 12px 12px 0; }
.page-content img { max-width: 100%; height: auto; border-radius: 16px; margin: 1.4rem 0; display: block; box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.page-content hr { border: none; border-top: 1px dashed color-mix(in srgb, var(--color-secondary) 40%, transparent); margin: 2rem 0; }
.page-content table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: 0.95em; border-radius: 12px; overflow: hidden; }
.page-content th, .page-content td { border: 1px solid color-mix(in srgb, var(--color-secondary) 25%, transparent); padding: 0.6rem 0.8rem; text-align: left; }
.page-content th { background: color-mix(in srgb, var(--color-primary) 8%, white); font-weight: 600; }
</style>

<main class="flex-1 max-w-4xl mx-auto px-4 py-10 w-full">
    <article class="aurora-card p-8 md:p-12">
        {{ if page.CoverImageUrl }}
        <div class="mb-8">
            <img src="{{ abs_url page.CoverImageUrl }}" alt="{{ page.Title }}" class="w-full" style="border-radius: 16px;">
        </div>
        {{ end }}
        <div class="page-content">{{ page.Content }}</div>
    </article>
</main>

{{ include 'partials/footer' }}