/* The panel a picture opens in, on the gallery only.
   Loaded after paintings.css, so it inherits those tokens and can use them. */

/* The panel takes the wheel: the gallery behind it must not scroll under the
   reader while they are looking at a picture. */
html[data-lightbox-open="true"],
html[data-lightbox-open="true"] body {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    /* The top padding is the close control's own row: the artwork starts below
       it, so the control is never on the picture it closes and the picture
       stays centred in the room that is left. */
    padding: 3.6rem 2.5rem 2.5rem;
    /* Dense enough that the caption never has to compete with a thumbnail
       underneath it for legibility, and light enough to keep the gallery as
       context rather than hiding it. */
    background: rgba(12, 12, 11, 0.93);
    /* A click on the grey is a click on the reader's way out. */
    cursor: zoom-out;
}

.lightbox[hidden] {
    display: none;
}

/* Backdrop on a phone, where the panel is the whole screen. The close control
   sits in the gutter ABOVE the panel rather than over the picture, so the
   padding reserves its row. */
@media (max-width: 640px) {
    .lightbox {
        padding: 3.25rem 0 1.25rem;
    }
}

.lightbox-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    /* The panel is the picture plus a margin, so the backdrop around it stays
       wide enough to be an obvious target: with no margin the panel fills the
       viewport and there is nothing left to click to get out. */
    max-width: min(1200px, 100%);
    /* The panel's height fills what the backdrop's padding leaves, so the
       picture's `height: 100%` resolves against the room after the caption.
       Without this a tall picture is limited only by the viewport and pushes
       its own caption off the bottom of the screen. */
    height: 100%;
    min-height: 0;
    cursor: default;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    /* The stage takes what the caption does not, and the picture fills it. */
    flex: 1 1 auto;
    min-height: 0;
    /* The picture is a wide one until its aspect ratio says otherwise, so the
       stage is as wide as it may be rather than shrink-wrapping a 1px box. */
    width: 100%;
    min-width: 0;
}

/* A panel is a place to LOOK at a picture, so a picture gets the room the
   viewport has rather than the width of its own file: a small or very wide
   original would otherwise sit in the middle of a large empty panel at its
   own few hundred pixels while the reader squints at it. `contain` keeps the
   aspect ratio, so this scales the picture up to the room and never distorts
   or crops it. The panel takes the width the picture needs, so a wide picture
   gets the viewport minus its margin and a portrait one the height it has. */
.lightbox-image {
    display: block;
    /* The picture fills the stage, which is the room the panel has left over
       after the caption. `width: 100%` with `height: 100%` and `object-fit:
       contain` is what actually scales a 1px-wide image element up to that
       room: `width: auto` on an img resolves to the file's own pixel width, so
       a small original would sit in a big panel at its own few hundred pixels
       while the reader squints at it. `contain` keeps the aspect ratio, so this
       never distorts or crops the picture. */
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    /* No background: the element box is wider than the artwork inside it, so a
       fill here paints letterbox bars around every picture that is not the
       stage's exact shape. The drop shadow goes on the artwork itself through a
       filter, which follows the painted pixels rather than the box, and the
       panel has the margin that keeps the close control off the artwork. */
    background: none;
    filter: drop-shadow(0 18px 60px rgba(0, 0, 0, 0.5));
}

@media (max-width: 640px) {
    .lightbox-image {
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45));
    }
}

.lightbox-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    max-width: 60ch;
}

.lightbox-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    text-wrap: balance;
}

.lightbox-sub {
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.66);
    text-wrap: balance;
}

/* The count sits on its own line, before the full-size link, so the reader can
   see the arrows go somewhere before they press one. */
.lightbox-sub[data-position]::before {
    content: attr(data-position);
    display: block;
    font-style: normal;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.42);
}

.lightbox-full {
    margin-top: 0.15rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.35rem 0.15rem;
}

.lightbox-full:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.lightbox-full:focus-visible,
.lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.lightbox-close {
    position: absolute;
    /* Above the panel's own box, in the backdrop's reserved top row. */
    top: -2.6rem;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease;
    /* A finger aims with a thumb, and this is the control every finger goes
       for: it keeps its 36px look and carries a 44px target. */
    touch-action: manipulation;
}

.lightbox-close::after {
    content: "";
    position: absolute;
    inset: -4px;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* On a phone the panel is full bleed, and the backdrop's top row already holds
   the close control above the artwork. */
@media (max-width: 640px) {
    .lightbox {
        padding: 3.6rem 0 1.25rem;
    }
    .lightbox-panel {
        padding: 0;
    }
    .lightbox-stage {
        padding: 0 0.5rem;
    }
    .lightbox-close {
        top: -2.75rem;
        right: 0.75rem;
    }
}

/* A last-resort guard: this file is about the panel, and the panel is on the
   gallery only, so nothing else on the site changes. */
@media (prefers-reduced-motion: reduce) {
    .lightbox * {
        transition: none;
    }
}