/* Folder-based image gallery: thumbnail grid and image viewer. */

.pt-gallery-prose {
    margin-bottom: 1.5rem;
}

.pt-gallery {
    margin-bottom: 1.5rem;
}

.pt-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-gallery-cell {
    margin: 0;
}

.pt-gallery-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
}

.pt-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pt-gallery-thumb:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* ---------------- viewer ---------------- */

html.pt-viewer-open,
html.pt-viewer-open body {
    overflow: hidden;
}

.pt-viewer[hidden] {
    display: none;
}

.pt-viewer {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-viewer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
}

.pt-viewer-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(96vw, 1400px);
    height: min(96vh, 1000px);
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    color: #f8f9fa;
    overflow: hidden;
}

.pt-viewer.is-fullscreen,
.pt-viewer.is-fullscreen .pt-viewer-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

.pt-viewer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.5rem;
    background-color: #111;
    border-bottom: 1px solid #333;
}

.pt-viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0 0.5rem;
    border: 1px solid #444;
    border-radius: 0.3rem;
    background-color: #2a2a2a;
    color: #f8f9fa;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.pt-viewer-btn:hover:not(:disabled) {
    background-color: #3a3a3a;
}

.pt-viewer-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pt-viewer-btn:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 2px;
}

.pt-viewer-zoom-value {
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.pt-viewer-position {
    padding: 0 0.4rem;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.pt-viewer-separator {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.25rem;
    background-color: #444;
}

.pt-viewer-stage {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem;
    overflow: auto;
    display: flex;
    background-color: #1a1a1a;
    cursor: default;
    overscroll-behavior: contain;
}

.pt-viewer-stage.is-panning {
    cursor: grabbing;
    user-select: none;
}

.pt-viewer-canvas {
    flex: 0 0 auto;
    max-width: none;
    /* Centre the canvas while it still fits the stage. Auto margins collapse to
       zero once the canvas is larger than the stage, which keeps the overflow
       on the scrollable side so the top and left edges remain reachable. */
    margin: auto;
}

.pt-viewer-image {
    display: block;
    width: 100%;
    height: 100%;
    /* Nearest-neighbour past 100% keeps pixel detail legible when zoomed in. */
    image-rendering: -webkit-optimize-contrast;
}

.pt-viewer-caption {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background-color: #111;
    border-top: 1px solid #333;
    font-size: 0.9rem;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .pt-gallery-thumb,
    .pt-viewer {
        transition: none !important;
    }
}