/* ==========================================================================
   Lightbox — shared shell (overlay, close button, content wrapper)
   ========================================================================== */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-backdrop);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    justify-content: center;
    align-items: center;
}

.lightbox[aria-hidden="false"] {
    display: flex;
}

.lightbox-content {
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-close {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    background: none;
    border: none;
    color: var(--color-fg);
    font-size: var(--text-size-icon-lg);
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
    z-index: 1001;
    transition:
        color 0.2s ease,
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-close:hover {
    color: var(--color-heading);
    transform: rotate(90deg);
}