@props(['member'])

<article class="card card-hover group flex h-full flex-col overflow-hidden">
    <a href="{{ route('team.show', $member) }}" class="block aspect-[4/5] overflow-hidden bg-stone-100">
        @if ($member->photo)
            <img src="{{ \Illuminate\Support\Facades\Storage::url($member->photo) }}" alt="{{ $member->name }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
        @else
            <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-navy-100 to-stone-200 text-navy-300"><x-ui.icon name="heroicon-o-user" class="h-16 w-16" /></div>
        @endif
    </a>
    <div class="flex flex-1 flex-col p-6">
        <h3 class="font-display text-lg font-bold text-ink"><a href="{{ route('team.show', $member) }}" class="transition-colors hover:text-teal-700">{{ $member->name }}</a></h3>
        @if ($member->position)<p class="mt-1 text-sm font-semibold text-teal-700">{{ $member->position }}</p>@endif
        @if ($member->bio)<p class="mt-3 line-clamp-3 text-sm leading-relaxed text-muted">{{ $member->bio }}</p>@endif
    </div>
</article>