@php($images = array_values((array) $block->setting('images', [])))

@if ($images)
    {{-- Masonry gallery with a lightbox — mixed heights, no cropping. --}}
    <section class="section-tight">
        <div class="container-page" x-data="lightbox">
            @if ($block->heading)
                <h2 class="mb-8 font-display text-headline font-bold text-text" data-reveal>{{ $block->heading }}</h2>
            @endif

            <x-masonry :columns="3" data-reveal-group>
                @foreach ($images as $index => $path)
                    <button type="button"
                            @click="show({{ Js::from(collect($images)->map(fn ($p) => ['src' => image_url($p), 'caption' => null])) }}, {{ $index }})"
                            class="masonry-item group block w-full overflow-hidden rounded-xl bg-surface-muted"
                            data-reveal-child>
                        <img src="{{ thumb_url($path) }}" alt="{{ $block->heading ?: __('Gallery image') }}"
                             loading="lazy" decoding="async"
                             class="w-full transition duration-700 group-hover:scale-[1.03]">
                    </button>
                @endforeach
            </x-masonry>

            @include('public.partials.lightbox')
        </div>
    </section>
@endif