/* 12. Reusable Lightbox Component */
.c-lightbox {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    background-color: rgba(0, 0, 0, 0.95);

    .c-lightbox__close {
        @apply absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200;

        &:hover {
            color: var(--destructive);
        }
    }

    .c-lightbox__content {
        @apply max-h-full max-w-full;

        .c-lightbox__image {
            @apply max-h-[90vh] max-w-full rounded object-contain shadow-lg;
        }

        .c-lightbox__video {
            @apply max-h-[90vh] max-w-full rounded shadow-lg;
        }
    }
}