{{-- SECTION: Laboratorios especializados por materia --}}
<section class="py-16 bg-[#eeffff]" id="instalaciones-laboratorios">
    <div class="container mx-auto px-4">

        <h2 class="text-xl md:text-3xl font-bold text-[#007e7f] mx-auto text-center py-4">Laboratorios especializados por
            materia</h2>

        <div class="flex flex-wrap -mx-4 gap-y-10">
            @foreach ($laboratorios as $item)
                @php
                    $galeria = $item->galeria ?? [];
                @endphp

                <div class="w-full md:w-1/2 lg:w-1/2 px-4 flex flex-col "
                    data-aos="{{ $loop->index % 2 == 0 ? 'fade-up-right' : 'fade-up-left' }}"
                    data-aos-delay="{{ ($loop->index % 6) * 100 }}" data-aos-duration="800">

                    <!-- IMAGEN PRINCIPAL -->
                    <div class="relative rounded-[20px] overflow-hidden mb-4 shadow-[4px_4px_9px_#aebaba] flex-grow">

                        <a data-fslightbox="lab-{{ $item->id }}" href="{{ Storage::url($item->image) }}">

                            <img src="{{ Storage::url($item->image) }}" alt="{{ $item->title }}"
                                class="w-full h-auto object-cover hover:scale-105 transition-transform duration-500 shadow-lg">
                        </a>

                        <!-- CONTADOR (OPCIONAL 🔥) -->
                        @if (count($galeria))
                            <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
                                +{{ count($galeria) }}
                            </div>
                        @endif

                        <!-- GALERÍA OCULTA -->
                        @foreach ($galeria as $img)
                            <a data-fslightbox="lab-{{ $item->id }}" href="{{ Storage::url($img) }}"
                                class="hidden"></a>
                        @endforeach

                    </div>

                    <h3 class="text-xl font-bold text-[#007e7f] text-center">
                        {{ $item->title }}
                    </h3>

                </div>
            @endforeach
        </div>
    </div>
</section>