@import '../lib/photoswipe.css';

/* Превью 8em с зазором 3em — как в старом .pswp-gallery отчётов Meme Park */
ids-gallery, .ids__gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3em;
    margin-bottom: 4em;

    @media (width < 768px) {
        gap: 1em;
        margin: 2em 0;
    }

    figure {
        flex: 0 0 8em;
        margin: 0;

        @media (width < 768px) {
            flex-basis: 4em;
        }

        &:focus-within:has(a:focus-visible) {
            outline: var(--ids__border-width-m) solid var(--ids__link);
            outline-offset: 2px;
        }

        a:hover, a:focus-visible {
            opacity: 0.9;
        }

        img {
            object-fit: contain;
            max-height: 100%;
            max-width: 100%;
        }

        figcaption {
            margin-right: -25%;
        }
    }
}

/* PhotoSwipe lightbox caption */
.pswp .pswp__caption {
    position: absolute;
    display: grid;
    left: 0;
    right: 0;
    bottom: calc(var(--ids__density, 1.5) * 1em);

    figcaption {
        place-self: center;
        color: var(--ids__background);
        background: color-mix(in srgb, var(--ids__text) 80%, transparent);
        font-size: 0.8em;
        line-height: var(--ids__density, 1.5);
        padding: 0.4em 0.8em;
        text-align: center;
        max-width: 80%;

        a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.15em;

            &:hover {
                opacity: 0.7;
            }
        }
    }


}