@foreach($portfolios as $p)
    <a href="{{ route('portfolio.show', $p->slug) }}" class="group relative block rounded-xl overflow-hidden aspect-[4/5] bg-gray-200" data-category="{{ $p->category->slug ?? '' }}">
        <img src="{{ $p->coverImageUrl() }}" alt="{{ $p->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" onerror="this.style.background='linear-gradient(135deg,#0F1729,#FF3D3D)'; this.removeAttribute('src')">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
            <h3 class="font-bold text-sm lg:text-base mb-1 leading-tight">{{ $p->title }}</h3>
            @if($p->subtitle)
                <p class="text-xs text-gray-300 mb-2">{{ $p->subtitle }}</p>
            @endif
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-400">{{ $p->category->name ?? '' }}</span>
                <span class="w-7 h-7 rounded-full bg-white/90 flex items-center justify-center text-nsma-dark group-hover:bg-nsma-red group-hover:text-white transition">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </span>
            </div>
        </div>
    </a>
@endforeach

@if($portfolios->count() === 0)
    <p class="col-span-full text-center text-gray-500 py-12">Энэ ангилалд ажил байхгүй байна.</p>
@endif
