/*
 * HD formats, full screen viewer and small layout fixes.
 * Phone rules are generated from the theme settings (ndxzsite/plugin/ap_style.php).
 */

#exhibit img { image-orientation: from-image; }
.ap-px, .ap-px img { image-rendering: pixelated; image-rendering: crisp-edges; }
.ap-cap { margin-top: 4px; }
.ap-text { max-width: 600px; margin-bottom: 2em; }
#exhibit .ap-text p { width: auto; }
.ap-item { margin: 0; }
.ap-item a.ap-lb, .ap-box a.ap-lb { display: block; cursor: zoom-in; }
.ap-media video { display: block; max-width: 100%; height: auto; }

/* menu button (only shown on phones when the menu is set to collapse) */
.ap-menu { display: none; margin: 0 0 1em 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Horizontal ---------- */
#img-container.ap-h { display: flex; align-items: flex-start; width: max-content !important; }
#img-container.ap-h > * { float: none !important; flex: 0 0 auto; }
#img-container.ap-h > div[style*='clear'] { display: none; }
#img-container.ap-h .picture { width: min-content !important; }
#img-container.ap-h .picture img { display: block; height: var(--ap-h); width: auto; max-width: none; }
#img-container.ap-h.ap-fit .picture img { height: min(var(--ap-h), calc(100vh - 110px)); }
#img-container.ap-h .captioning { width: auto !important; }
#img-container.ap-h a.ap-lb { display: block; cursor: zoom-in; }

/* ---------- Grid ---------- */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--ap-t)); gap: var(--ap-gap); }
.ap-grid .ap-box { width: var(--ap-t); height: var(--ap-t); }
.ap-grid .ap-box > a, .ap-grid .ap-box > img, .ap-grid .ap-box > .ap-media { display: block; width: 100%; height: 100%; }
.ap-grid .ap-box img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ap-grid.ap-al-center .ap-box img { object-position: 50% 50%; }
.ap-grid.ap-al-top .ap-box img { object-position: 50% 0; }
.ap-grid.ap-crop-square .ap-box img { object-fit: cover; object-position: 50% 50%; }
.ap-grid .ap-box video { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Masonry ---------- */
.ap-masonry { column-count: var(--ap-cols); column-gap: var(--ap-gap); }
.ap-masonry .ap-item { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 var(--ap-gap); }
.ap-masonry img { display: block; width: 100%; height: auto; }

/* ---------- Vertical ---------- */
.ap-vertical .ap-item { margin: 0 0 var(--ap-gap); max-width: var(--ap-maxw); }
.ap-vertical.ap-align-center .ap-item { margin-left: auto; margin-right: auto; text-align: center; }
.ap-vertical img { display: block; width: 100%; height: auto; }
.ap-vertical.ap-fit img { width: auto; max-width: 100%; max-height: calc(100vh - 60px); max-height: calc(100svh - 60px); }
.ap-vertical.ap-align-center img { margin-left: auto; margin-right: auto; }

/* ---------- Gallery ---------- */
.ap-gallery .ap-slide { margin: 0; display: none; }
.ap-gallery .ap-slide.is-active { display: block; }
html:not(.ap-js) .ap-gallery .ap-slide { display: block; margin-bottom: 2em; }
.ap-gallery .ap-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--ap-h); cursor: pointer; }
.ap-gallery.ap-t-fade .ap-slide.is-active { animation: ap-fade .35s ease; }
.ap-nav { margin-top: .8em; }
.ap-nav button, .ap-thumb { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ap-nav button { text-decoration: underline; }
.ap-nav button:hover { text-decoration: none; }
.ap-count { margin: 0 .6em; }
.ap-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1em; }
.ap-thumb { opacity: .45; }
.ap-thumb.is-active, .ap-thumb:hover { opacity: 1; }
.ap-thumb img { display: block; height: 48px; width: auto; }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Full screen viewer ---------- */
html.ap-lbx-on, html.ap-lbx-on body { overflow: hidden; }
.ap-lbx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; display: none; overflow: hidden; background: #fff; color: #000; overscroll-behavior: contain; touch-action: none; }
html.ap-lbx-on { overscroll-behavior: none; }
.ap-lbx.is-open { display: block; }
.ap-lbx button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ap-lbx-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 44px 64px 56px; box-sizing: border-box; }
.ap-lbx-img { display: block; flex: none; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: 0 0; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.ap-lbx.is-px .ap-lbx-img { max-width: none; max-height: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.ap-lbx.is-zoomed .ap-lbx-img { will-change: transform; cursor: grab; }
.ap-lbx.is-zoomed .ap-lbx-img:active { cursor: grabbing; }
.ap-lbx.is-zoomed .ap-lbx-prev, .ap-lbx.is-zoomed .ap-lbx-next { display: none; }
.ap-lbx-prev, .ap-lbx-next { position: absolute; top: 44px; bottom: 56px; width: 64px; }
.ap-lbx-prev { left: 0; cursor: w-resize !important; }
.ap-lbx-next { right: 0; cursor: e-resize !important; }
.ap-lbx-close { position: absolute; top: 14px; right: 18px; text-decoration: underline; }
.ap-lbx-bar { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; gap: 1em; align-items: baseline; }
.ap-lbx-text { flex: 1; min-width: 0; }
.ap-lbx-desc { margin-top: .4em; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ap-lbx-full { color: inherit !important; }
.ap-lbx-count { white-space: nowrap; }

@media (max-width: 700px) {
	.ap-lbx-stage { padding: 44px 0 72px; }
	.ap-lbx-prev, .ap-lbx-next { width: 22%; }
	.ap-lbx-bar { flex-wrap: wrap; }
	.ap-lbx-text { order: 3; flex: 1 0 100%; }
	.ap-lbx-full { margin-left: auto; }
}