@props(['post'])

{{--
    Blog card (PRD 3.20 / 10.6) — featured image, category, date, reading time,
    title, description, read-more.

    Shared by the blog listing, the related-articles strip and the homepage
    "Latest Blog" section so all three stay visually identical (PRD 3.31).
    The whole card is a single <a>, with the "Read article" affordance styled
    as text rather than a nested link, because a link inside a link is invalid
    HTML and breaks keyboard navigation.
--}}
<article {{ $attributes->merge(['class' => 'h-100']) }}>
    <a href="{{ route('blog.show', $post) }}" class="blog-card card-premium d-flex flex-column h-100 text-decoration-none">
        <div class="blog-card__media">
            <img
                src="{{ $post->thumbnailUrl() }}"
                alt="{{ $post->title }}"
                loading="lazy"
                decoding="async"
                width="800"
                height="450"
            >
        </div>

        <div class="d-flex flex-column flex-grow-1 pt-4">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2" style="font-size: var(--fs-small); color: var(--color-paragraph);">
                @if($post->category)
                    <span class="badge rounded-pill px-3 py-2" style="background: var(--color-light-purple); color: var(--color-primary); font-weight: 600;">
                        {{ $post->category->name }}
                    </span>
                @endif
                <span>{{ $post->published_at?->format('j M Y') }}</span>
                <span aria-hidden="true">&middot;</span>
                <span>{{ $post->readingTimeLabel() }}</span>
            </div>

            <h3 class="mb-2" style="font-size: var(--fs-card-title); color: var(--color-heading);">
                {{ $post->title }}
            </h3>

            <p class="mb-4" style="color: var(--color-paragraph); font-size: var(--fs-small);">
                {{ Str::limit($post->short_description, 140) }}
            </p>

            <span class="mt-auto fw-semibold d-inline-flex align-items-center gap-2" style="color: var(--color-primary); font-size: var(--fs-small);">
                Read article
                <i class="fa-solid fa-arrow-right blog-card__arrow" aria-hidden="true"></i>
            </span>
        </div>
    </a>
</article>