@props(['article', 'forSlider' => false])

<div @class([
    'group rounded w-full relative overflow-hidden transition ease-in-out duration-200',
    'hover:scale-[101%]' => !$forSlider,
    'swiper-slide' => $forSlider,
]) style="height: 215px; background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
    <div class="relative w-full h-full overflow-hidden rounded-[6px]">
        <a href="{{ route('article.show', $article->slug ?? $article->id) }}" class="block w-full h-full">
            <img src="{{ $article->image ? '/storage/' . $article->image : '' }}"
                onerror="this.parentElement.style.background='var(--color-surface)';this.style.display='none';"
                alt="{{ $article->title }}"
                class="object-cover w-full h-full transition-all duration-300 rounded-[6px] hover:scale-105"
                loading="lazy">

            <div class="absolute left-0 w-full p-2" style="bottom: -2px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);">
                <h3 class="text-lg font-semibold text-white text-shadow-sm truncate">
                    {{ $article->title }}
                </h3>
                @if($article->short_story)
                    <p class="text-xs font-normal text-white text-shadow-sm truncate">
                        {{ Str::limit($article->short_story, 80) }}
                    </p>
                @endif
            </div>
        </a>
    </div>
</div>