@props([
    'dossier',
])

<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-zinc-900 shadow-lg hover:shadow-2xl transition-all duration-300">
    <div class="relative h-56 overflow-hidden">
        <img src="{{ $dossier['image'] }}" alt="{{ $dossier['title'] }}"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-5">
            <span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
                {{ $dossier['articleCount'] }} Artikel
            </span>
            <h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
                {{ $dossier['title'] }}
            </h3>
            <p class="text-sm text-white/90 line-clamp-2">
                {{ $dossier['description'] }}
            </p>
        </div>
    </div>
</article>