/* ==========================================================================
   Lightbox — project and milestone pages and About (assets/js/lightbox.js).

   PhotoSwipe's own stylesheet loads first; this restyles it: a warm dark
   brown ground so the photos stand out, thin light icons like the site's
   previous/next arrows, and the counter in the sans.
   ========================================================================== */

/* A photo that opens full screen darkens a little on hover (and keyboard
   focus), so it reads as clickable. A filter, not an overlay, so the
   parallax transform on the same image is untouched. Only on devices that
   can hover, so a tap never leaves a photo dark. */
img[data-lightbox] {
    cursor: zoom-in;
    transition: filter 0.4s var(--ease);
}

@media (hover: hover) {
    img[data-lightbox]:hover { filter: brightness(0.9); }
}

img[data-lightbox]:focus-visible {
    filter: brightness(0.9);
    outline: 2px solid var(--color-paper);
    outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
    img[data-lightbox] { transition: none; }
}

.dme-lightbox {
    --pswp-bg: var(--color-ground-dark); /* #39322D, warm dark brown (asked for) */
    --pswp-placeholder-bg: #443C36; /* a shade lighter, behind a loading photo */
    --pswp-icon-color: var(--color-paper);
    --pswp-icon-color-secondary: transparent;
    --pswp-icon-stroke-color: transparent;
    --pswp-icon-stroke-width: 0;
    --pswp-error-text-color: var(--color-paper);
}

.dme-lightbox .pswp__icn {
    fill: none;
    stroke: var(--pswp-icon-color);
    stroke-width: 1.25;
    overflow: visible;
}

.dme-lightbox .pswp__button { opacity: 0.7; transition: opacity 0.2s var(--ease); }

.dme-lightbox .pswp__button:hover,
.dme-lightbox .pswp__button:focus-visible { opacity: 1; }

/* Counter, top left: "3 / 12". */
.dme-lightbox .pswp__counter {
    height: 60px;
    margin: 0 0 0 var(--space-32);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 60px;
    letter-spacing: 0.04em;
    color: var(--color-paper);
    text-shadow: none;
    opacity: 0.7;
}

/* Close, top right. */
.dme-lightbox .pswp__button--close { margin-right: var(--space-16); }

.dme-lightbox .pswp__button--close .pswp__icn {
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
}

/* Arrows, halfway down the sides. */
.dme-lightbox .pswp__button--arrow .pswp__icn {
    top: 50%;
    width: 34px;
    height: 12px;
    margin-top: -6px;
    background: none;
    border-radius: 0;
}

.dme-lightbox .pswp__button--arrow--prev .pswp__icn { left: var(--space-32); }
.dme-lightbox .pswp__button--arrow--next .pswp__icn { right: var(--space-32); left: auto; }

@media (prefers-reduced-motion: reduce) {
    .dme-lightbox .pswp__button { transition: none; }
}