/**
 * Lightbox.
 * =========
 *
 * The viewer that replaces `window.open(this.src)`. Everything here is drawn
 * from the design tokens rather than fixed colours, so it follows the active
 * palette the way the rest of the site does - open a screenshot while a Neo
 * Geo track is playing and the chrome around it is the same red as the page
 * behind it.
 *
 * See assets/js/lightbox.js for what opens it.
 */

.re-lightbox {
    position: fixed;
    inset: 0;
    z-index: 21000;              /* over the player (20000) and the nav */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 18px);
    padding: clamp(12px, 4vw, 48px);

    /* Nearly opaque rather than a light scrim: a screenshot has to be judged
       against something neutral, not against the page bleeding through it. */
    background: rgba(8, 5, 10, 0.88);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: re-lb-in 0.18s ease;
}

@keyframes re-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .re-lightbox { animation: none; }
}

/* The page must not scroll behind the viewer. */
html.re-lightbox-open,
html.re-lightbox-open body {
    overflow: hidden;
}

.re-lb-stage {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
}

.re-lb-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

.re-lb-img,
.re-lb-video {
    display: block;
    max-width: 100%;
    /* Room for the caption bar under it without the media ever being cropped. */
    max-height: calc(100vh - clamp(96px, 18vh, 180px));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--re-radius-md);
    border: 1px solid var(--re-border);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    background: var(--re-surface-sunken);
}

/*
 * A YouTube embed has no intrinsic size, so unlike an image or a video file
 * it cannot size itself from its content - it has to be given a box. 16:9 at
 * the largest that still leaves room for the caption, capped so it does not
 * become a wall on an ultrawide monitor.
 */
.re-lb-frame {
    display: block;
    width: min(90vw, 1280px, calc((100vh - clamp(96px, 18vh, 180px)) * 16 / 9));
    aspect-ratio: 16 / 9;
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius-md);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    background: #000;
}

.re-lb-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 90vw;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
}

.re-lb-caption { opacity: 0.85; }
.re-lb-count   { opacity: 0.5; white-space: nowrap; }

/* An empty bar should take no room at all. */
.re-lb-bar:not(:has(.re-lb-caption:not(:empty))):not(:has(.re-lb-count:not(:empty))) {
    display: none;
}

/* --- controls ------------------------------------------------------- */

.re-lb-close,
.re-lb-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: the same target floor the header controls use. */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius-sm);
    background: var(--re-surface);
    color: var(--re-text-color);
    cursor: pointer;
    line-height: 1;
    font-size: 20px;
    transition: background var(--re-transition), border-color var(--re-transition),
                transform var(--re-transition);
}

.re-lb-close:hover,
.re-lb-nav:hover,
.re-lb-close:focus-visible,
.re-lb-nav:focus-visible {
    background: var(--re-surface-hover);
    border-color: var(--re-border-strong);
    color: var(--re-brand-100);
}

.re-lb-nav:active { transform: scale(0.94); }

.re-lb-close {
    position: absolute;
    top: clamp(10px, 2.5vw, 22px);
    right: clamp(10px, 2.5vw, 22px);
    font-size: 15px;
}

.re-lb-nav { font-size: 26px; }

/*
 * On a phone the arrows sit over the bottom corners of the image rather than
 * beside it: at 375px there is no room for a column of controls on each side
 * without squeezing the picture to nothing.
 */
@media (max-width: 640px) {
    .re-lightbox { padding: 12px; }

    .re-lb-nav {
        position: absolute;
        bottom: 16px;
        z-index: 1;
    }

    .re-lb-prev { left: 16px; }
    .re-lb-next { right: 16px; }

    .re-lb-img { max-height: calc(100vh - 190px); }
}

/* --- what opens it -------------------------------------------------- */

/*
 * The affordance. An image that enlarges has to look like one before it is
 * clicked, or nobody clicks it.
 */
[data-lightbox],
.article-content img {
    cursor: zoom-in;
}

[data-lightbox]:hover {
    filter: brightness(1.06);
}


/* ------------------------------------------------------------------ *
 * Gallery tiles
 * ------------------------------------------------------------------ */

/*
 * A video tile and a photo tile look identical until you say otherwise, so
 * anything playable gets a badge. Without it the only way to find the video
 * in a gallery is to click everything.
 */
.re-media-tile {
    position: relative;
    display: block;
    line-height: 0;      /* no descender gap under the thumbnail */
}

.re-media-tile > img,
.re-media-tile > video {
    display: block;
}

.re-media-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--re-border-strong);
    background: rgba(8, 5, 10, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;   /* the click belongs to the thumbnail beneath */
    transition: background var(--re-transition), transform var(--re-transition);
}

/* The triangle, drawn with a border rather than shipped as an asset. */
.re-media-play::after {
    content: "";
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--re-brand-100);
}

.re-media-tile:hover .re-media-play {
    background: rgba(8, 5, 10, 0.78);
    transform: translate(-50%, -50%) scale(1.06);
}

.re-media-tile.is-playable { cursor: pointer; }