@if ($galleryAlbums->isNotEmpty())
    {{--
        Project media gallery (SOW 1.13). Editorial grid: the first album takes a
        tall feature cell, the rest fill the mosaic beside it.
    --}}
    <section class="section bg-dark">
        <div class="container-page">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <x-section-heading tone="dark"
                                   :eyebrow="__('Field visuals')"
                                   :title="__('Project Media Gallery')"
                                   :subtitle="__('Aerial imagery, site documentation and field operations.')" />

                <x-button variant="on-dark" :href="route('gallery.index')" class="shrink-0">
                    {{ __('View project stories') }}
                </x-button>
            </div>

            <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2" data-reveal-group>
                @foreach ($galleryAlbums as $album)
                    <a href="{{ route('gallery.show', $album) }}"
                       @class([
                           'group relative overflow-hidden rounded-xl bg-dark-surface',
                           'lg:col-span-2 lg:row-span-2' => $loop->first,
                       ])
                       data-reveal-child>

                        <x-image :src="$album->cover_image" :alt="$album->title"
                                 :ratio="$loop->first ? '1/1' : '4/3'" rounded="rounded-none" zoom
                                 class="h-full" />

                        <div class="scrim"></div>

                        <div class="absolute inset-x-0 bottom-0 p-5">
                            @if ($album->sector)
                                <p class="meta-label mb-1.5 text-white/60">{{ $album->sector->name }}</p>
                            @endif

                            <h3 @class(['font-display font-semibold text-white', 'text-xl' => $loop->first, 'text-sm' => ! $loop->first])>
                                {{ $album->title }}
                            </h3>

                            <p class="mt-1 flex items-center gap-1.5 text-xs text-white/60">
                                <x-icon name="photo" class="size-3.5" />
                                {{ trans_choice(':count item|:count items', $album->items_count, ['count' => $album->items_count]) }}
                            </p>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
@endif