/* Gallery grid + lightbox. The lightbox is a native <dialog>; Tailwind's
   `backdrop:` variant is not always picked up by the Unfold CSS bundle, so the
   explicit selectors below guarantee a centered, full-viewport modal in both
   light and dark themes. */

#gallery-lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(90vw, 64rem);
    max-width: none;
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--border-base);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    background: var(--surface-card);
    color: var(--text-strong);
    overflow: hidden;
}

#gallery-lightbox::backdrop {
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(2px);
}

#gallery-lightbox[open] {
    display: block;
}

/* The header sticks to the top of the scrollable inner panel. Inherit theme
   colors from tokens so contrast stays correct after a dark/light toggle. */
.gallery-lightbox__header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-base);
}

.gallery-lightbox__media {
    background: #000000;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep `.hidden` working: Tailwind's `.hidden` sets `display: none` and the JS
   toggles it to swap between <img> and <video>. We must not define a competing
   `display` here or both elements stay visible. */
.gallery-lightbox__media img:not(.hidden),
.gallery-lightbox__media video:not(.hidden) {
    max-height: 75vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* Tile thumbnails — keep the aspect ratio so a portrait phone photo does not
   blow up the row height when an image somehow escapes object-cover. */
.gallery-tile-trigger {
    aspect-ratio: 1 / 1;
}
.gallery-tile-trigger > img,
.gallery-tile-trigger > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}