@foreach($posts as $post)
    <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 group hover:shadow-2xl transition flex flex-col h-full justify-between">

        <div class="p-3 md:p-4 flex md:block gap-4 items-center flex-1">

            <div class="w-28 h-24 md:w-full md:h-48 flex-shrink-0 overflow-hidden rounded-xl md:rounded-2xl bg-gray-100">
                @if(str_contains($post->image, 'images/'))
                    <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                @else
                    <img src="{{ asset('images/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                @endif
            </div>

            <div class="flex-1 md:px-2 md:pt-4 text-right">
                <h3 class="text-sm md:text-base font-bold text-gray-800 mb-1 md:mb-3 leading-tight line-clamp-2 min-h-[40px] md:min-h-[48px]">
                    {{ $post->title }}
                </h3>

                <p class="hidden md:block text-xs md:text-sm text-gray-500 leading-relaxed line-clamp-2 min-h-[40px] md:min-h-[44px]">
                    {{ $post->excerpt }}
                </p>
            </div>

        </div>

        <div class="border-t border-gray-100 px-4 py-3 bg-gray-50/50 flex items-center justify-between text-xs text-gray-400 relative z-10">
            <span class="flex items-center gap-1">
                <i class="far fa-calendar-alt text-[11px]"></i>
{{--                {{ $post->created_at->format('Y/m/d') }}--}}
                {{ jdate($post->created_at)->format('Y/m/d') }}
            </span>
            <a href="/blog/{{ $post->slug }}" class="text-[#0D47A1] font-medium text-[11px] md:text-sm flex items-center gap-1 hover:gap-2 transition">
                مشاهده بیشتر <i class="fas fa-arrow-left text-[10px]"></i>
            </a>
        </div>

        <span class="hidden md:block absolute top-0 right-0 w-36 h-[2px] bg-blue-300 rounded-full"></span>
        <span class="hidden md:block absolute top-[2px] right-0 h-36 w-[2px] bg-blue-300 rounded-full"></span>
        <span class="hidden md:block absolute bottom-0 left-0 w-36 h-[2px] bg-blue-300 rounded-full"></span>
        <span class="hidden md:block absolute bottom-[2px] left-0 h-36 w-[2px] bg-blue-300 rounded-full"></span>
    </div>
@endforeach