/* Screenshot lightbox — pmwaves.com
 *
 * The gallery on index.php renders each screenshot at about 240px wide, which
 * is enough to recognise a page and nowhere near enough to read one. These
 * styles are for the overlay that shows the full image on click.
 *
 * Every selector here is new (.ss-*), so this file can be linked in any order
 * relative to index.php's inline <style> block without fighting it. The one
 * change to an existing rule — the card width — is made in that block itself.
 */

.ss-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 35, .88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    /* Visibility is stepped, not eased: it flips to visible the instant the
       overlay opens (so the close button is focusable in the same frame) and
       waits for the fade to finish on the way out. Easing it instead left the
       dialog unfocusable for a frame, which put keyboard users on <body>. */
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.ss-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.ss-lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(1400px, 100%);
    max-height: 100%;
    margin: 0;
    transform: scale(.97);
    transition: transform .25s ease;
}

.ss-lightbox.is-open .ss-lightbox-figure {
    transform: scale(1);
}

.ss-lightbox-img {
    display: block;
    /* The whole screenshot, never cropped — the point of the overlay is to
       make it readable, so letterboxing is preferable to losing an edge. */
    max-width: 100%;
    max-height: calc(100vh - 190px);
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.ss-lightbox-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    justify-content: center;
    margin-top: 18px;
    text-align: center;
}

.ss-lightbox-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
}

.ss-lightbox-link {
    color: #ff8f5e;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ss-lightbox-link:hover,
.ss-lightbox-link:focus-visible {
    color: #ffffff;
}

.ss-lightbox-count {
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* controls */

.ss-lightbox button {
    display: grid;
    place-items: center;
    padding: 0;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ss-lightbox button:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .45);
}

.ss-lightbox button:focus-visible {
    outline: 3px solid #ff8f5e;
    outline-offset: 3px;
}

.ss-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
}

.ss-lightbox-prev,
.ss-lightbox-next {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    font-size: 26px;
    line-height: 1;
}

.ss-lightbox-prev { left: 18px; }
.ss-lightbox-next { right: 18px; }

.ss-lightbox[data-single="true"] .ss-lightbox-prev,
.ss-lightbox[data-single="true"] .ss-lightbox-next,
.ss-lightbox[data-single="true"] .ss-lightbox-count {
    display: none;
}

/* Scroll is locked while the overlay is open, and the gap left by the
   vanishing scrollbar is padded out so the page underneath does not jump. */
body.ss-lightbox-open {
    overflow: hidden;
}

/* A hint that the thumbnail does something, since it no longer navigates. */
.screenshot-item {
    position: relative;
}

.screenshot-item::after {
    content: '⤢';
    position: absolute;
    top: 28px;
    right: 28px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    border-radius: 50%;
    background: rgba(15, 23, 35, .55);
    font-size: 15px;
    line-height: 1;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.screenshot-item:hover::after,
.screenshot-item:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 700px) {
    .ss-lightbox {
        padding: 12px;
    }

    .ss-lightbox-img {
        max-height: calc(100vh - 170px);
    }

    .ss-lightbox-prev,
    .ss-lightbox-next {
        width: 42px;
        height: 42px;
        margin-top: -21px;
    }

    .ss-lightbox-prev { left: 6px; }
    .ss-lightbox-next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-lightbox,
    .ss-lightbox-figure,
    .screenshot-item::after {
        transition: none;
    }
}
