@php
    // « Selected works » is auto-populated from the gallery: the first N
    // published projects (in the order arranged on /gallery), shown by their
    // cover, each tile linking to its article. N comes from the gallery
    // settings (admin → Réalisations → ⚙ Réglages). With no project yet, we
    // fall back to the developer placeholder images so the home stays nice.
    $count = \App\Support\GallerySettings::homeSelectedCount();

    // Filter out projects with no usable cover BEFORE applying the count, so
    // « show N » really shows N when N covered projects exist.
    $tiles = \App\Models\Project::where('status', 'published')
        ->orderBy('sort')->orderBy('id')
        ->get(['id', 'slug', 'title', 'cover'])
        ->map(fn ($p) => ['img' => media_url($p->cover), 'href' => '/gallery/' . $p->slug, 'label' => $p->title])
        ->filter(fn ($t) => $t['img'] !== '')
        ->take($count)
        ->values();

    if ($tiles->isEmpty()) {
        $tiles = collect(range(1, 9))
            ->map(fn ($i) => ['img' => media_url($block->get('image_' . $i)), 'href' => null, 'label' => null])
            ->filter(fn ($t) => $t['img'] !== '')
            ->values();
    }

    // Spread the tiles round-robin across UP TO 3 parallax columns. With only
    // 1–2 tiles we use that many columns (centered, capped width) so the mosaic
    // never leaves blank thirds. With ≥3 tiles it's the full 3-column grid
    // (byte-identical to the original markup).
    $usedCols = min(3, max(1, $tiles->count()));
    $cols = array_fill(0, $usedCols, []);
    foreach ($tiles as $i => $tile) {
        $cols[$i % $usedCols][] = $tile + ['ratio' => $i % 2 === 0 ? '3/4' : '4/5'];
    }
    $colMeta = [
        ['class' => 'gallery-col', 'parallax' => '0.12'],
        ['class' => 'gallery-col gallery-col-offset', 'parallax' => '-0.08'],
        ['class' => 'gallery-col', 'parallax' => '0.18'],
    ];
    $gridStyle = $usedCols < 3
        ? ' style="grid-template-columns: repeat(' . $usedCols . ', 1fr); max-width: ' . ($usedCols === 1 ? '520px' : '880px') . ';"'
        : '';
@endphp
  <!-- ===== GALLERY ===== -->
  <section class="gallery" id="gallery">
    <div class="gallery-header">
      <p class="section-eyebrow">{{ $block->get('eyebrow') }}</p>
      <h2 class="section-title display">{!! $block->get('title_html') !!}</h2>
      <a href="{{ safe_url($block->get('link_url', '/gallery')) }}" class="gallery-link gallery-link-inline" data-cursor-label="View all">
        <span>{{ $block->get('link_label') }}</span>
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path d="M5 12h14M13 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
    </div>

    <div class="gallery-grid"{!! $gridStyle !!}>
@foreach ($cols as $c => $colTiles)
@if (! empty($colTiles))
      <div class="{{ $colMeta[$c]['class'] }}" data-parallax="{{ $colMeta[$c]['parallax'] }}">
@foreach ($colTiles as $tile)
@if ($tile['href'])
        <a class="gallery-item" href="{{ $tile['href'] }}" data-cursor-label="View" aria-label="{{ $tile['label'] }}" style="background-image: url('{{ $tile['img'] }}'); aspect-ratio: {{ $tile['ratio'] }};"></a>
@else
        <div class="gallery-item" style="background-image: url('{{ $tile['img'] }}'); aspect-ratio: {{ $tile['ratio'] }};"></div>
@endif
@endforeach
      </div>
@endif
@endforeach
    </div>

    <div class="gallery-cta-bottom">
      <a href="{{ safe_url($block->get('link_url', '/gallery')) }}" class="gallery-link" data-cursor-label="View all">
        <span>{{ $block->get('link_label') }}</span>
        <svg viewBox="0 0 24 24" width="14" height="14"><path d="M5 12h14M13 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>
  </section>