{{-- Article card (PRD §16.2): cover, title, category, date, reading time, excerpt. --}}
@props(['article', 'source' => 'listing', 'headingLevel' => 3])
@php($cover = $article->getFirstMedia(\App\Domain\Media\MediaCollection::Cover->value))
<x-card as="article" :interactive="true" :padded="false" {{ $attributes->class('flex h-full flex-col overflow-hidden') }}
        data-filter-item data-categories="{{ $article->category?->slug }}" data-tools="{{ $article->topics->pluck('slug')->implode(' ') }}">
    @if ($cover)
        <x-media.image :media="$cover" conversion="card" sizes="(min-width: 1024px) 380px, (min-width: 768px) 50vw, 100vw" class="aspect-[16/9] w-full object-cover" />
    @endif
    <div class="flex flex-1 flex-col gap-3 p-6">
        <p class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted">
            @if ($article->category)<x-tag>{{ $article->category->name }}</x-tag>@endif
            @if ($article->published_at)<time datetime="{{ $article->published_at->toDateString() }}">{{ $article->published_at->format('j M Y') }}</time>@endif
            <span>{{ __('portfolio.ui.min_read', ['minutes' => $article->readingTime()]) }}</span>
        </p>
        <h{{ $headingLevel }} class="text-h3">
            <a href="{{ route('insights.show', $article->slug) }}" class="text-heading no-underline after:absolute after:inset-0 hover:text-link-hover"
               data-track="cta_click" data-track-props='{"cta":"article_card","article":"{{ $article->slug }}","source":"{{ $source }}"}'>{{ $article->title }}</a>
        </h{{ $headingLevel }}>
        @if ($article->excerpt)<p class="text-muted">{{ $article->excerpt }}</p>@endif
    </div>
</x-card>