@if(empty($news))
    <div class="flex flex-col items-center justify-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 5h6v6H5V5zm0 14v-6h14v6H5zm14-8h-6V9h6v2z"/></svg>
        <p class="text-gray-500 mt-3" style="font-size: 13px;">{{ __('messages.no_news') }}</p>
    </div>
@else
    <div class="space-y-2.5">
        @foreach($news as $article)
            <a href="{{ route('news.show', $article['id']) }}" class="block rounded-xl overflow-hidden relative shadow-md" style="aspect-ratio: 2/1;">
                @if(!empty($article['image']))
                    <img src="{{ $article['image'] }}" alt="{{ $article['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                @else
                    <div class="w-full h-full bg-[#1A1A2E] flex items-center justify-center">
                        <svg class="w-12 h-12 text-white/40" fill="currentColor" viewBox="0 0 24 24"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
                    </div>
                @endif
                <div class="absolute inset-x-0 bottom-0 px-3 pt-6 pb-2.5" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                    <h3 class="text-white font-medium line-clamp-2" style="font-size: 13.5px;">{{ $article['title'] ?? '' }}</h3>
                </div>
            </a>
        @endforeach
    </div>
@endif