{{-- Карточка записи в списке. Дата и время чтения стоят рядом с заголовком:
     оба помогают решить «читать или нет» ещё до перехода. --}}
<a href="{{ route('blog.show', $post) }}"
   class="group flex flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white transition hover:border-[var(--color-primary)]">
    @if ($post->coverUrl())
        <img src="{{ $post->coverUrl() }}" alt="{{ $post->title }}" loading="lazy"
             class="aspect-[16/9] w-full object-cover">
    @endif
    <div class="flex min-w-0 flex-1 flex-col p-4">
        @if ($post->category)
            <span class="mb-2 self-start rounded-[var(--radius-sm)] bg-[var(--color-primary-soft)] px-2 py-0.5 text-xs font-bold text-[var(--color-primary)]">
                {{ $post->category->title }}
            </span>
        @endif
        <h2 class="text-lg font-extrabold leading-snug text-[var(--color-ink)] transition group-hover:text-[var(--color-primary)]">{{ $post->title }}</h2>
        @if ($post->excerpt)
            <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-slate)]">{{ $post->excerpt }}</p>
        @endif
        <div class="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 pt-1 text-xs text-[var(--color-muted)]">
            <time datetime="{{ $post->published_at?->toDateString() }}">{{ $post->published_at?->translatedFormat('j F Y') }}</time>
            <span>·</span>
            <span>{{ $post->readingLabel() }}</span>
        </div>
    </div>
</a>