/* Shared post photos. Scoped controls override the WordPress theme's button rules. */
.ng-gallery { position: relative; min-width: 0; max-width: 100%; margin: 8px 0 16px; white-space: normal; }
.ng-gallery .ng-track { display: flex; width: 100%; aspect-ratio: 4 / 3; max-height: 420px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 8px; background: var(--nd-soft, #f6f2fb); direction: ltr; }
.ng-gallery--card .ng-track { max-height: 300px; }
.ng-track::-webkit-scrollbar { display: none; }
.ng-gallery .ng-slide { display: flex; align-items: center; justify-content: center; flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; padding: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; text-decoration: none; cursor: zoom-in; }
/* WebP optimizers wrap images in picture elements; keep that wrapper inside the slide. */
.ng-gallery .ng-slide picture { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.ng-gallery .ng-slide img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; margin: 0; padding: 0; user-select: none; }
.ng-gallery .ng-control, .ng-viewer .ng-control { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #ffcc00; color: #000; box-shadow: 0 2px 8px #0003; cursor: pointer; z-index: 2; }
.ng-gallery .ng-control:is(:hover, :focus, :active), .ng-viewer .ng-control:is(:hover, :focus, :active) { background: #ffcc00; color: #000; }
.ng-gallery .ng-control:disabled { opacity: .4; cursor: default; }
.ng-gallery .ng-control svg, .ng-viewer .ng-control svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ng-gallery .ng-prev { left: 8px; }
.ng-gallery .ng-next { right: 8px; }
.ng-gallery .ng-count { position: absolute; right: 12px; bottom: 10px; margin: 0; padding: 4px 9px; border-radius: 20px; background: #111c; color: #fff; font: 600 12px/1.5 Arial, sans-serif; pointer-events: none; }
.ng-gallery [hidden], .ng-viewer[hidden], .ng-viewer:not([open]) { display: none !important; }
.ng-gallery :focus-visible, .ng-viewer :focus-visible { outline: 3px solid #ffcc00; outline-offset: -3px; }
.ng-gallery .ng-control:focus-visible, .ng-viewer .ng-control:focus-visible { outline: 2px solid #000; outline-offset: -5px; }
html.ng-modal-open, html.ng-modal-open body { overflow: hidden !important; }
html body .ng-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #111; color: #fff; overflow: hidden; }
.ng-viewer::backdrop { background: #111e; }
.ng-viewer .ng-gallery { height: 100%; margin: 0; padding: calc(64px + env(safe-area-inset-top)) 0 calc(52px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.ng-viewer .ng-track { height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; background: transparent; }
.ng-viewer .ng-slide { cursor: default; }
.ng-viewer .ng-close { top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); transform: none; }
.ng-viewer .ng-count { bottom: calc(14px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); font-size: 14px; }
@media (min-width: 700px) { .ng-viewer .ng-track { width: calc(100% - 128px); margin: 0 64px; } .ng-viewer .ng-prev { left: 12px; } .ng-viewer .ng-next { right: 12px; } }