/*
 * PageTree default blocks - Gallery.
 * <div class="ptb ptb-gallery ptb-gallery--cols-2..6 ptb-gallery--ratio-original|square|4-3|16-9">
 */

:where(.ptb-gallery__list) {
    display: grid;
    grid-template-columns: repeat(var(--ptb-gallery-columns, 3), minmax(0, 1fr));
    gap: var(--ptb-gallery-gap, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.ptb-gallery--cols-2) { --ptb-gallery-columns: 2; }
:where(.ptb-gallery--cols-3) { --ptb-gallery-columns: 3; }
:where(.ptb-gallery--cols-4) { --ptb-gallery-columns: 4; }
:where(.ptb-gallery--cols-5) { --ptb-gallery-columns: 5; }
:where(.ptb-gallery--cols-6) { --ptb-gallery-columns: 6; }

/* Fewer columns on small screens */
@media (max-width: 767.98px) {
    :where(.ptb-gallery--cols-4, .ptb-gallery--cols-5, .ptb-gallery--cols-6) { --ptb-gallery-columns: 3; }
}

@media (max-width: 479.98px) {
    :where(.ptb-gallery) { --ptb-gallery-columns: 2; }
}

:where(.ptb-gallery__item) {
    margin: 0;
    padding: 0;
}

:where(.ptb-gallery__figure) {
    margin: 0;
}

:where(.ptb-gallery__link) {
    display: block;
    border-radius: var(--ptb-radius);
    overflow: hidden;
}

:where(.ptb-gallery__link:focus-visible) {
    outline: 3px solid var(--ptb-primary);
    outline-offset: 2px;
}

:where(.ptb-gallery__img) {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ptb-radius);
}

:where(.ptb-gallery--ratio-square) :where(.ptb-gallery__img) { aspect-ratio: 1 / 1; object-fit: cover; }
:where(.ptb-gallery--ratio-4-3) :where(.ptb-gallery__img) { aspect-ratio: 4 / 3; object-fit: cover; }
:where(.ptb-gallery--ratio-16-9) :where(.ptb-gallery__img) { aspect-ratio: 16 / 9; object-fit: cover; }

:where(.ptb-gallery__caption) {
    margin-top: 0.5rem;
    color: var(--ptb-muted);
    font-size: 0.875rem;
}

/* Lightbox: <dialog class="ptb-lightbox"> created by assets/js/gallery.js */

:where(.ptb-lightbox) {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 3.5rem 4rem;
    border: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
}

:where(.ptb-lightbox)::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

:where(.ptb-lightbox[open]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(.ptb-lightbox__figure) {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

:where(.ptb-lightbox__img) {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
}

:where(.ptb-lightbox__caption) {
    margin-top: 0.75rem;
    text-align: center;
}

:where(.ptb-lightbox__button) {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

:where(.ptb-lightbox__button:hover, .ptb-lightbox__button:focus-visible) {
    background: rgba(255, 255, 255, 0.3);
}

:where(.ptb-lightbox__button:focus-visible) {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

:where(.ptb-lightbox__close) { top: 0.75rem; right: 0.75rem; }
:where(.ptb-lightbox__previous) { top: 50%; left: 0.75rem; transform: translateY(-50%); }
:where(.ptb-lightbox__next) { top: 50%; right: 0.75rem; transform: translateY(-50%); }

:where(.ptb-lightbox__button[hidden]) { display: none; }