<a href="{{ $card['public_url'] }}" class="group overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.03] transition hover:-translate-y-1 hover:border-sky-300/25 hover:bg-white/[0.05]">
    @if(!empty($card['preview_url']))
        <img src="{{ $card['preview_url'] }}" alt="{{ $card['title'] }}" class="aspect-[4/5] w-full object-cover transition duration-500 group-hover:scale-[1.02]" loading="lazy" />
    @endif
    <div class="p-4">
        <div class="flex items-center justify-between gap-3">
            <h3 class="truncate text-lg font-semibold tracking-[-0.03em] text-white">{{ $card['title'] }}</h3>
            <span class="rounded-full border border-white/10 bg-white/[0.05] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-200">{{ $card['format'] }}</span>
        </div>
        @if(!empty($card['lineage']['original_card']))
            <div class="mt-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/70">Remix</div>
        @endif
        <p class="mt-2 line-clamp-3 text-sm leading-6 text-slate-300">{{ $card['quote_text'] }}</p>
        <div class="mt-4 flex items-center justify-between gap-3 text-xs text-slate-400">
            <span>{{ $card['creator']['name'] ?: ('@' . $card['creator']['username']) }}</span>
            <span>{{ number_format($card['likes_count'] ?? 0) }} likes</span>
        </div>
        @if(!empty($card['lineage']['original_card']) || (int) ($card['remixes_count'] ?? 0) > 0)
            <div class="mt-3 text-xs text-sky-100/85">View lineage</div>
        @endif
    </div>
</a>