@props(['service'])

<a href="{{ route('services.show', $service->slug) }}"
   class="card card-hover card-padded block group">
    <div class="flex items-start gap-4">
        <span class="service-icon-wrap shrink-0">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </span>
        <div class="min-w-0">
            <h3 class="font-bold text-navy-900 mb-1.5 group-hover:text-brand-700 transition-colors">{{ $service->name }}</h3>
            <p class="text-sm text-navy-500 line-clamp-2">{{ $service->short_description }}</p>
            <span class="inline-flex items-center text-sm text-brand-700 font-semibold mt-3 group-hover:gap-2 gap-1 transition-all">
                التفاصيل
                <svg class="w-4 h-4 rtl-flip" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </span>
        </div>
    </div>
</a>