@php $posts = $ctx->posts((int) ($data['limit'] ?? 3)); @endphp
@if($posts->isNotEmpty())
    <section class="{{ $cls }}" {{ $attrs }}>
        <div class="container-page">
            @include('builder.partials.head', [
                'linkUrl' => route('blog.index'),
                'linkText' => $data['link_text'] ?? null,
            ])

            <div class="pb-grid pb-grid--3 mt-12">
                @foreach($posts as $post)
                    @php $image = $post->featuredImageUrl(); @endphp
                    <a href="{{ route('blog.show', $post->slug) }}" class="blog-card group">
                        <div class="blog-card__media">
                            @if($image)
                                <img src="{{ $image }}" alt="{{ $post->featuredImage?->alt_text ?: $post->title }}" width="640" height="360" class="blog-card__image" loading="lazy" decoding="async">
                            @else
                                <div class="blog-card__placeholder" aria-hidden="true"><span>{{ strtoupper(substr($post->title, 0, 1)) }}</span></div>
                            @endif
                        </div>
                        <div class="blog-card__body">
                            <div class="blog-card__meta">
                                @if($post->category)
                                    <span class="blog-card__category">{{ $post->category->name }}</span>
                                @endif
                                @if($post->published_at)
                                    <time class="blog-card__date" datetime="{{ $post->published_at->toIso8601String() }}">{{ $post->published_at->format('M j, Y') }}</time>
                                @endif
                            </div>
                            <h3 class="blog-card__title">{{ $post->title }}</h3>
                            @if($post->excerpt)
                                <p class="blog-card__excerpt">{{ \Illuminate\Support\Str::limit($post->excerpt, 140) }}</p>
                            @endif
                            <span class="blog-card__action">Read article →</span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
@endif