{{--
    Card renderizado no servidor: conteúdo indexável e sem flash de grade
    vazia. O JS só alterna visibilidade.
    Os data-* alimentam a busca sem precisar reler o payload.
--}}
<button type="button"
        class="card"
        data-id="{{ $l['id'] }}"
        data-categoria="{{ $l['categoria'] }}"
        data-busca="{{ Str::lower($l['nome'].' '.$l['resumo'].' '.($l['area'] ?? '').' '.$l['categoriaLabel']) }}">

    <img class="card__img"
         src="{{ $l['imagemThumb'] }}"
         alt="{{ $l['nome'] }}"
         loading="lazy"
         width="400"
         height="211">

    <span class="card__body">
        <span class="card__cat">
            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{ $l['icon'] }}"></path></svg>
            {{ $l['categoriaLabel'] }}
        </span>

        <span class="card__nome">{{ $l['nome'] }}</span>
        <span class="card__resumo">{{ $l['resumo'] }}</span>

        <span class="card__foot">
            @if ($l['reservavel'])
                <span class="card__tag">Reservável</span>
            @endif
            <span class="card__cta">
                <span class="card__cta-txt">Ver detalhes</span>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>
            </span>
        </span>
    </span>
</button>