<script lang="ts">
    /**
     * Structure-only lightbox shell. Content is injected by static/assets/js/script.js
     * (no client-side Svelte; csr = false). Keeps HTML/CSS in one place.
     */
</script>

<dialog
    class="lightbox"
    aria-hidden="true"
    aria-describedby="lb-caption"
    closedby="any"
>
    <header>
        <button type="button" class="lb-close" aria-label="Close"
            >&times;</button
        >
    </header>
    <div class="lb-content">
        <!-- script.js injects image or video here -->
    </div>
    <p id="lb-caption" class="lb-caption"></p>
</dialog>

<style>
    .lightbox {
        align-items: stretch;
        background: var(--surface-elevated);
        border: none;
        border-radius: 8px;
        box-shadow: var(--lightbox-shadow);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        max-width: 90vw;
        padding: 0.5rem 1rem;
        opacity: 0;
        transition: opacity 0.3s;

        &::backdrop {
            background: var(--lightbox-backdrop);
        }

        &[open] {
            opacity: 1;
        }

        /* Injected by script.js */
        :global(img),
        :global(video) {
            max-width: 90vw;
            max-height: 80vh;
            border-radius: 8px;
        }
    }

    header {
        display: flex;
        justify-content: flex-end;
        padding: 0.25rem 0.25rem 0 0;
    }

    .lb-close {
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--fg);
        cursor: pointer;
    }

    .lb-content {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        /* Injected by script.js */
        :global(img) {
            max-width: 90vw;
            max-height: 80vh;
        }
    }

    .lb-caption {
        color: var(--fg);
        margin-top: 0.5rem;
        text-align: center;
        max-width: 90vw;
    }
</style>
