{{--
    Site-wide image lightbox (rendered once in the frontend layout). Driven by resources/js/lightbox.js.
    Mark images with data-lightbox="group" to open them here as a slider.
--}}
<div id="lightbox" class="lb hidden fixed inset-0 z-overlay" role="dialog" aria-modal="true" aria-label="Image viewer"
    aria-hidden="true">
    <div data-lb-backdrop class="lb-backdrop absolute inset-0 bg-black/90 backdrop-blur-sm"></div>

    <div class="lb-stage relative h-full w-full flex flex-col pointer-events-none">
        {{-- top bar --}}
        <div class="flex items-center justify-between px-4 sm:px-6 py-3 text-white pointer-events-auto">
            <span data-lb-counter class="text-sm font-semibold tabular-nums"></span>
            <button type="button" data-lb-close aria-label="Close image viewer"
                class="w-11 h-11 rounded-full bg-white/10 hover:bg-white/25 text-2xl leading-none flex items-center justify-center transition-colors">
                &times;
            </button>
        </div>

        {{-- slider --}}
        <div class="relative flex-1 min-h-0">
            <div class="swiper lb-swiper h-full pointer-events-auto">
                <div class="swiper-wrapper"></div>
            </div>

            <button type="button" data-lb-prev aria-label="Previous image"
                class="lb-nav lb-prev pointer-events-auto absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 hover:bg-white/25 text-white flex items-center justify-center transition-colors z-10 disabled:opacity-30 disabled:pointer-events-none">
                <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
            </button>
            <button type="button" data-lb-next aria-label="Next image"
                class="lb-nav lb-next pointer-events-auto absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 hover:bg-white/25 text-white flex items-center justify-center transition-colors z-10 disabled:opacity-30 disabled:pointer-events-none">
                <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
            </button>
        </div>

        {{-- caption --}}
        <p data-lb-caption class="hidden text-center text-white/90 text-sm px-6 py-3 pointer-events-auto"></p>
    </div>
</div>