{{#
    @name News Show View
    @desc Single news article view with editorial styling
#}}

<main id="content" class="bg-canvas">

    {{# 1. Article Header #}}
    <article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-20">
        
        <nav class="flex items-center gap-2 text-xs text-neutral-500 mb-6">
            <a href="/" class="hover:text-neutral-900">Home</a>
            <span>/</span>
            <a href="/news" class="hover:text-neutral-900">News</a>
            <span>/</span>
            <span class="text-neutral-900 font-medium truncate">{{ title }}</span>
        </nav>

        <div class="flex items-center gap-3 text-xs text-neutral-500 mb-4">
            <span class="px-2.5 py-1 rounded-full bg-accent-light text-accent-dark font-semibold uppercase tracking-wider">
                Skincare Insight
            </span>
            <span>&bull;</span>
            <span>{{ date | format('F j, Y') }}</span>
            <span>&bull;</span>
            <span>By {{ author ?? 'Victoria Kelson' }}</span>
        </div>

        <h1 class="font-serif text-3xl sm:text-5xl font-bold text-neutral-900 tracking-tight leading-tight mb-8">
            {{ title }}
        </h1>

        {{ if image }}
            <div class="rounded-3xl overflow-hidden shadow-lg mb-10 border border-neutral-200 bg-neutral-100">
                <img src="{{ image:0:url ?? image:url ?? image }}" alt="{{ title }}" class="w-full h-80 sm:h-96 object-cover" />
            </div>
        {{ /if }}

        <div class="prose prose-neutral prose-lg max-w-none text-neutral-700 leading-relaxed space-y-6">
            {{ content | markdown }}
        </div>

        {{# Author Box #}}
        <div class="mt-14 pt-8 border-t border-neutral-200/80 flex items-center gap-5 p-6 rounded-2xl bg-surface-sand/30">
            <img src="/assets/images/victoria.jpg" alt="Victoria Kelson" class="w-16 h-16 rounded-full object-cover shrink-0 border-2 border-accent" />
            <div>
                <h4 class="font-serif text-lg font-bold text-neutral-900">Victoria Kelson</h4>
                <p class="text-xs text-neutral-600 mt-1">
                    Salon Owner &amp; Head Therapist at The Foundation Beauty Studio, Guildford. CIDESCO, BABTAC &amp; CIBTAC accredited.
                </p>
            </div>
        </div>

        {{# Back to News #}}
        <div class="mt-10 text-center">
            <a href="/news" class="inline-flex items-center gap-2 text-sm font-semibold text-neutral-700 hover:text-neutral-900 transition-colors">
                &larr; Back to all articles
            </a>
        </div>

    </article>

</main>