@props(['post', 'headingLevel' => 'h3'])
<article class="group relative flex flex-col">
    <div class="overflow-hidden rounded-2xl bg-surface">
        <img src="{{ $post->coverUrl() }}" alt="{{ $post->cover_alt }}" loading="lazy"
            class="aspect-video w-full object-cover transition duration-500 group-hover:scale-[1.03] motion-reduce:transition-none">
    </div>
    <p class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted">
        <span class="rounded-md bg-green/15 px-2.5 py-0.5 font-semibold text-green-text">{{ $post->category->name }}</span>
        <time datetime="{{ $post->published_at->toDateString() }}">{{ $post->published_at->translatedFormat('j \d\e F \d\e Y') }}</time>
    </p>
    <{{ $headingLevel }} class="mt-2 text-xl leading-snug font-bold [font-stretch:105%]">
        {{-- el enlace cubre toda la tarjeta --}}
        <a href="{{ route('news.show', $post) }}" class="after:absolute after:inset-0 hover:text-link">{{ $post->title }}</a>
    </{{ $headingLevel }}>
    <p class="mt-2 line-clamp-2 text-muted">{{ $post->excerpt }}</p>
</article>