@forelse($kegiatan as $item)
<article class="group rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm hover:bg-slate-50 transition">
    <div class="flex flex-wrap items-center gap-2 text-xs text-slate-500">
        <span class="inline-flex items-center rounded-full bg-indigo-600/10 text-indigo-700 px-2 py-1 font-medium">
            {{ $item->category ?? '-' }}
        </span>
        <span>•</span>
        <span>{{ $item->tanggal ?? '-' }}</span>
    </div>

    <h3 class="mt-3 text-base lg:text-lg font-semibold tracking-tight">
        {{ $item->title }}
    </h3>

    <p class="mt-2 text-sm text-slate-600">
        {{ \Illuminate\Support\Str::limit($item->description ?? '-', 80) }}
    </p>

    <div class="mt-4 flex items-center justify-between">
        <a href="{{ route('public.kegiatan.show', $item->slug) }}" class="text-sm font-medium text-rose-600 hover:text-rose-700">
            Lihat detail →
        </a>
        <span class="text-xs text-slate-500">{{ $item->price ?? 'Gratis' }}</span>
    </div>
</article>
@empty
<p class="text-gray-500 col-span-3">Tidak ada kegiatan yang sesuai kata kunci.</p>
@endforelse