/**
 * STComponents lightbox image. Everything is :where()-wrapped (zero specificity), so any
 * site rule wins. Most tweaks only need the custom properties:
 *
 *   --st-lightbox-aspect        crop ratio, set inline by the `aspect` arg
 *   --st-lightbox-bg            placeholder behind the image while it loads
 *   --st-lightbox-radius
 *   --st-lightbox-hover-scale
 *   --st-lightbox-caption-gap
 *
 * Units are px/em, never rem: some sites shrink the root font size.
 */

:where(.st-lightbox) {
    margin: 0;
    min-width: 0;
}

:where(.st-lightbox__link) {
    display: block;
    overflow: hidden;
    border-radius: var(--st-lightbox-radius, 0);
    background: var(--st-lightbox-bg, #e9e7e2);
}

:where(.st-lightbox__link:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

:where(.st-lightbox__img) {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 240ms ease;
}

:where(.st-lightbox--cropped .st-lightbox__img) {
    aspect-ratio: var(--st-lightbox-aspect);
    height: auto;
    object-fit: cover;
}

@media (hover: hover) {
    :where(.st-lightbox__link:hover .st-lightbox__img) {
        transform: scale(var(--st-lightbox-hover-scale, 1.025));
    }
}

:where(.st-lightbox__caption) {
    margin-top: var(--st-lightbox-caption-gap, 12px);
    text-align: center;
}

:where(.st-lightbox__caption > :first-child) {
    margin-top: 0;
}

:where(.st-lightbox__caption > :last-child) {
    margin-bottom: 0;
}

/* Fullscreen (PhotoSwipe adds .st-pswp to its root) */

/* Plain cursor instead of PhotoSwipe's zoom/grab cursors. Its rules are more specific and load
   later, so this one can't be :where()-wrapped. */
.st-pswp.st-pswp.st-pswp .pswp__img,
.st-pswp.st-pswp.st-pswp .pswp__img:active {
    cursor: default;
}

:where(.st-pswp .st-pswp__caption) {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(100%, 720px);
    padding: 12px 16px 20px;
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
    pointer-events: none;
}

:where(.st-pswp .st-pswp__caption a) {
    color: inherit;
    pointer-events: auto;
}

:where(.st-pswp .st-pswp__caption > :first-child) {
    margin-top: 0;
}

:where(.st-pswp .st-pswp__caption > :last-child) {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    :where(.st-lightbox__img) {
        transition: none;
    }
}