{{ if locale_only && !(locale_only | contains:{current_locale}) }}
    {{ redirect to="/{current_locale}/" }}
{{ /if }}

{{# Hero — featured image as full-bleed banner; title + meta sit inside a
    frosted-glass card so they read on any image. No full-section dark overlay,
    so the photo stays bright around the card. #}}
<section class="hero-fullscreen relative -mt-6 overflow-hidden" style="background-image: url('{{ if featured_image }}{{ featured_image }}{{ else }}/assets/articles/uploads/2021/09/pic_paralax_2.jpg{{ /if }}'); background-position: center center; background-repeat: no-repeat; background-size: cover; transform: translate3d(0px, 0px, 0px);">
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16 md:pb-20">
        <div class="max-w-4xl mx-auto text-center">
            <div class="inline-block bg-black/45 backdrop-blur-md ring-1 ring-white/15 rounded-2xl px-8 py-6 md:px-10 md:py-8 shadow-2xl shadow-black/40 text-white"
                 data-aos="fade-down">
                <h1 class="font-nunito text-3xl md:text-4xl lg:text-5xl font-bold mb-3">{{ title }}</h1>
                <div class="flex items-center justify-center gap-4 text-sm text-white/80 mt-4"
                     data-aos="fade-up" data-aos-delay="150">
                    <span>{{ date format="M d, Y" }}</span>
                    <span><i class="fa-solid fa-clock mr-1"></i>{{ content | reading_time }} min</span>
                    <span><i class="fa-solid fa-eye mr-1"></i>{{ view_count ?? 0 }}</span>
                    <span x-data="{ likes: {{ likes ?? 0 }}, liked: false }" class="flex items-center gap-1">
                        <button @click="if(!liked) { fetch('/api/like/{{ id }}', {method:'POST', headers:{'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content}}).then(r=>r.json()).then(d=>{if(d.success){likes=d.likes;liked=true}}); }"
                                :class="liked ? 'text-red-400' : 'text-white/60 hover:text-red-400'" class="transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"></path></svg>
                        </button>
                        <span x-text="likes"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="max-w-3xl mx-auto mt-10">
    {{ partial:_breadcrumbs }}

    <article>
        <div class="prose prose-lg max-w-none prose-headings:font-nunito prose-headings:text-[--color-heading] prose-a:text-[--color-link] prose-h2:mt-10 prose-h2:mb-4 prose-h3:mt-8 prose-h3:mb-3 prose-h4:mt-6 prose-h4:mb-2">
            {{ content }}
        </div>
    </article>

    {{# Tags #}}
    {{ if tags | count }}
    <div class="flex flex-wrap gap-2 mt-8 mb-6">
        {{ tags }}
        <a href="{{ locale_path }}/tags/{{ slug }}"
           class="inline-flex items-center gap-1 px-3 py-1 bg-[#f0eeff] text-[#6254e7] text-xs font-nunito font-semibold rounded-full hover:bg-[#6254e7] hover:text-white transition-colors">
            <i class="fa-solid fa-tag text-[10px]"></i>
            {{ title }}
        </a>
        {{ /tags }}
    </div>
    {{ /if }}

    {{ partial:_social_share }}
    {{ partial:_related_articles }}
</div>