@props(['post'])

<article
  class="group grid md:grid-cols-3 rounded-2xl overflow-hidden bg-white/80 dark:bg-slate-800/60 backdrop-blur-md 
         border border-slate-200/50 dark:border-slate-700/40 shadow-md hover:shadow-2xl hover:-translate-y-1 
         transition-all duration-500">

  {{-- 🖼️ صورة المقال --}}
  <a href="{{ route('front.post', $post->slug) }}" class="block relative overflow-hidden">
    @if($post->cover)
      <img src="{{ Storage::url($post->cover) }}"
           alt="{{ $post->title }}"
           class="w-full h-52 md:h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out" />
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    @else
      <div class="w-full h-52 md:h-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-400 text-3xl">
        <i class="fa-regular fa-image"></i>
      </div>
    @endif
  </a>

  {{-- 📰 محتوى المقال --}}
  <div class="p-5 md:col-span-2 flex flex-col justify-center">
    <a href="{{ route('front.category', optional($post->category)->slug) }}"
       class="text-primary text-sm font-semibold hover:underline tracking-wide">
       {{ optional($post->category)->name }}
    </a>

    <h3 class="text-lg md:text-xl font-bold mt-1 text-slate-800 dark:text-white leading-snug group-hover:text-primary transition line-clamp-2">
      <a href="{{ route('front.post', $post->slug) }}">{{ $post->title }}</a>
    </h3>

    <p class="text-sm text-slate-600 dark:text-slate-300 mt-3 leading-relaxed line-clamp-3">
      {{ Str::limit($post->excerpt ?: strip_tags($post->body), 160) }}
    </p>

    {{-- 🧾 معلومات إضافية --}}
    <div class="mt-4 flex items-center justify-between text-xs text-slate-400 dark:text-slate-500">
      <div class="flex items-center gap-2">
        <i class="fa-regular fa-calendar"></i>
        <span>{{ optional($post->published_at)?->translatedFormat('d F Y') }}</span>
      </div>

      @if(optional($post->author)?->name)
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-pen-nib text-primary/80"></i>
          <a href="{{ route('front.author', $post->author->id ?? 0) }}" class="hover:underline">
            {{ $post->author->name }}
          </a>
        </div>
      @endif
    </div>
  </div>
</article>