@props(['article'])

<a href="{{ route('news.show', $article) }}" class="card group overflow-hidden flex flex-col">
    {{-- Graphical gradient header (articles have no photo) --}}
    <div class="relative h-28 overflow-hidden bg-navy-900">
        <div class="absolute inset-0 grid-bg opacity-40"></div>
        <div class="absolute -right-10 -top-10 w-40 h-40 rounded-full blur-2xl" style="background: radial-gradient(circle, rgba(217,118,63,.55), transparent 70%);"></div>
        <div class="absolute inset-0 p-5 flex items-end">
            <span class="font-mono text-[11px] uppercase tracking-wider text-brand-300">{{ $article->category }}</span>
        </div>
    </div>
    <div class="p-6 flex flex-col flex-1">
        <h3 class="text-lg font-semibold text-slate-ink group-hover:text-brand-600 transition leading-snug">{{ $article->title }}</h3>
        <p class="mt-2 text-sm text-slate-500 leading-relaxed flex-1">{{ $article->excerpt }}</p>
        <div class="mt-4 flex items-center justify-between font-mono text-[11px] text-slate-400">
            <span class="inline-flex items-center gap-1.5"><x-icon name="clock" class="w-4 h-4"/> {{ $article->reading_time }} MIN · {{ optional($article->published_at)->format('d M Y') }}</span>
            <x-icon name="arrow" class="w-4 h-4 text-brand-600 group-hover:translate-x-1 transition-transform"/>
        </div>
    </div>
</a>