:root {
    --red: #BF2827;

    --dark-brown: #320F11;
    --brown: #683632;

    --cream: #F5F1EB;
    --warm-grey-light: #E7E1DB;
    --warm-grey: #D9D3CE;
    --warm-grey-dark: #BDB1AC;
}/* ---------- Lightbox ---------- */

.lightbox {
    --details-width: 380px;

    position: fixed;
    inset: 0;
    z-index: 1000;

    background: rgba(0, 0, 0, 0.92);

    overflow: hidden;
}

.lightbox[hidden] {
    display: none;
}


/* ---------- Main viewer ---------- */

.lightbox-content {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3rem 7rem;

    transition: padding-right 0.2s ease;
}

/*
    When details open, reserve actual screen
    space for the panel instead of covering
    the artwork.
*/
.lightbox.details-open .lightbox-content {
    padding-right: calc(7rem + var(--details-width));
}

.lightbox-viewer {
    max-width: 100%;
    max-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ---------- Artwork ---------- */

.lightbox-artwork {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    max-height: calc(100vh - 7rem);
}

.lightbox-artwork img {
    display: block;

    max-width: 100%;
    max-height: 82vh;

    width: auto;
    height: auto;

    object-fit: contain;

    transition:
        opacity 0.08s ease,
        transform 0.08s ease;
}

.lightbox-artwork img.changing {
    opacity: 0;
    transform: scale(0.995);
}


/* ---------- Image failure ---------- */

.lightbox-image-error {
    max-width: 24rem;

    padding: 2rem;

    color: white;

    text-align: center;

    opacity: 0.7;
}


/* ---------- Controls beneath artwork ---------- */

.lightbox-controls {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    margin-top: 0.75rem;

    color: white;
}

/*
    Keeps the image number truly centered,
    regardless of the controls on either side.
*/
.copy-link-button,
.details-toggle {
    padding: 0.25rem 0;

    border: 0;
    border-bottom: 1px solid transparent;

    background: none;
    color: white;

    font: inherit;

    cursor: pointer;

    opacity: 0.75;

    transition:
        opacity 0.15s ease,
        border-color 0.15s ease;
}

.copy-link-button {
    grid-column: 1;

    justify-self: start;
}

.image-index {
    grid-column: 2;

    font-size: 0.85rem;

    opacity: 0.7;
}

.details-toggle {
    grid-column: 3;

    justify-self: end;
}

.copy-link-button:hover,
.details-toggle:hover,
.details-toggle[aria-expanded="true"] {
    opacity: 1;
    border-bottom-color: currentColor;
}


/* ---------- Close button ---------- */

.lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 1030;

    width: 3rem;
    height: 3rem;

    padding: 0;
    border: 0;

    background: none;
    color: white;

    font-size: 2.5rem;
    line-height: 1;

    cursor: pointer;

    transition: right 0.2s ease;
}

.lightbox.details-open .lightbox-close {
    right: calc(var(--details-width) + 1.5rem);
}


/* ---------- Shared navigation ---------- */

.image-nav,
.piece-nav {
    border: 0;

    background: transparent;
    color: white;

    font-size: 2.5rem;

    opacity: 0.6;

    cursor: pointer;

    transition: opacity 0.15s ease;
}

.image-nav:hover,
.piece-nav:hover {
    opacity: 1;
}


/* ---------- Image navigation ---------- */

.image-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1005;

    width: 5rem;
}

.image-nav-previous {
    left: -5rem;
}

.image-nav-next {
    right: -5rem;
}


/* ---------- Piece navigation ---------- */

.piece-nav {
    position: fixed;
    top: 15%;
    bottom: 15%;
    z-index: 1004;

    width: 6rem;
}

.piece-nav-previous {
    left: 0;
}

.piece-nav-next {
    right: 0;

    transition:
        right 0.2s ease,
        opacity 0.15s ease;
}

/*
    Keep the next-piece arrow beside the artwork
    rather than underneath the details panel.
*/
.lightbox.details-open .piece-nav-next {
    right: var(--details-width);
}


/* ---------- Details panel ---------- */

.details-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1020;

    width: var(--details-width);
    height: 100%;

    padding: 5rem 2rem 3rem;

    background: rgba(20, 20, 20, 0.98);
    color: var(--cream);

    overflow-y: auto;

    transform: translateX(100%);

    visibility: hidden;
    pointer-events: none;

    transition:
        transform 0.2s ease,
        visibility 0.2s;
}

.lightbox.details-open .details-panel {
    transform: translateX(0);

    visibility: visible;
    pointer-events: auto;
}


/* ---------- Details contents ---------- */

.details-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;

    border: 0;

    background: none;
    color: white;

    font-size: 2rem;

    cursor: pointer;
}

.details-content h2 {
    margin: 0;
    
}

.details-date {
    margin-top: 0.25rem;

    opacity: 0.7;
}

.details-meta-row {
    display: flex;
    flex-direction: column;

    margin-top: 1.5rem;
}

.details-meta-row[hidden] {
    display: none;
}

.details-label {
    font-size: 0.8rem;
    text-transform: uppercase;

    opacity: 0.6;

}

.details-description,
.details-venue,
.details-shop {
    margin-top: 2rem;
}

.details-description p {
    margin: 0;
}

.details-venue a,
.details-shop a {
    color: inherit;

    text-underline-offset: 0.2em;
}


/* ---------- Opening animation ---------- */

/* Background can appear immediately */
.lightbox:not([hidden]) {
    animation: lightboxFadeIn 0.25s ease;
}

/* Hide viewer controls until image dimensions are known */
.lightbox-viewer,
.lightbox .piece-nav {
    opacity: 0;
    pointer-events: none;
}

/* Reveal everything together */
.lightbox.lightbox-ready .lightbox-viewer,
.lightbox.lightbox-ready .piece-nav {
    opacity: 1;
    pointer-events: auto;

    transition: opacity 0.25s ease;
}

@keyframes lightboxFadeIn {
    from {
        background: rgba(0, 0, 0, 0);
    }

    to {
        background: rgba(0, 0, 0, 0.92);
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .lightbox {
        --details-width: 100%;
    }

    .lightbox-content {
        padding: 4rem 3.5rem;
    }

    /*
        The details panel becomes a bottom sheet.
    */
    .details-panel {
        top: auto;
        bottom: 0;

        width: 100%;
        height: auto;
        max-height: 65vh;

        padding: 3.5rem 1.5rem 2rem;

        transform: translateY(100%);
    }

    .lightbox.details-open .details-panel {
        transform: translateY(0);
    }

    /*
        Don't reserve horizontal space for a
        side panel on mobile.
    */
    .lightbox.details-open .lightbox-content {
        padding-right: 3.5rem;
    }

    .lightbox.details-open .lightbox-close {
        right: 1.5rem;
    }

    .lightbox.details-open .piece-nav-next {
        right: 0;
    }

    .lightbox-artwork img {
        max-height: 78vh;
    }

    .image-nav {
        width: 3rem;

        font-size: 2rem;
    }

    .image-nav-previous {
        left: -3rem;
    }

    .image-nav-next {
        right: -3rem;
    }

    .piece-nav {
        top: 20%;
        bottom: 20%;

        width: 3rem;

        font-size: 2rem;
    }
}


/* ---------- Reduced motion support ---------- */

@media (prefers-reduced-motion: reduce) {

    .lightbox:not([hidden]) {
        animation: none;
    }

    .lightbox-content,
    .lightbox-close,
    .piece-nav-next,
    .details-panel,
    .lightbox.lightbox-ready .lightbox-viewer,
    .lightbox.lightbox-ready .piece-nav,
    .copy-link-button,
    .details-toggle,
    .image-nav,
    .piece-nav,
    .lightbox-artwork img {
        transition: none;
    }

    .lightbox-artwork img.changing {
        opacity: 1;
        transform: none;
    }
}