{{--
    Logo grid (SOW 7). Greyscale until hovered, with the sector/scope tooltip also
    exposed as a caption on touch devices — hover is never the only route to it.
--}}
@if ($partners->isEmpty())
    <x-empty-state icon="handshake" :title="__('No partners listed for this filter')" />
@else
    <div class="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-3 lg:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-8"
         data-reveal-group>
        @foreach ($partners as $partner)
            @php($tag = $partner->website_url ? 'a' : 'div')

            <{{ $tag }}
                @if ($partner->website_url)
                    href="{{ $partner->website_url }}" target="_blank" rel="noopener"
                @endif
                class="group flex flex-col items-center justify-center gap-3 bg-surface p-6 text-center transition hover:bg-primary-50"
                data-reveal-child>

                @if ($partner->logo)
                    <img src="{{ image_url($partner->logo) }}" alt="{{ $partner->name }}" loading="lazy" decoding="async"
                         class="h-10 w-auto max-w-[70%] object-contain opacity-70 grayscale transition duration-300 group-hover:opacity-100 group-hover:grayscale-0">
                @else
                    {{-- No logo uploaded: set the name as a wordmark. --}}
                    <span class="flex h-10 items-center text-sm font-semibold uppercase tracking-wide text-text-secondary">
                        {{ $partner->name }}
                    </span>
                @endif

                <span class="meta-label line-clamp-2 leading-relaxed">{{ $partner->tooltipText() }}</span>
            </{{ $tag }}>
        @endforeach
    </div>
@endif