/* Image enlargement uses the existing native modal and its controls. */
.cr-image-zoom { display: block; cursor: zoom-in; }
.cr-image-zoom img { display: block; width: 100%; height: auto; }
.cr-image-zoom:focus-visible { outline: 2px solid var(--color-light); outline-offset: 6px; }
.modal--image { width: calc(100vw - 24px); max-width: none; height: calc(100dvh - 24px); max-height: none; overflow: hidden; background: var(--color-dark); color: var(--color-light); }
.modal--image .modal__head { position: relative; justify-content: flex-end; gap: 12px; padding: 12px; background: var(--color-dark); }
.modal--image .modal__close { flex: 0 0 44px; width: 44px; height: 44px; font-family: var(--font-body); font-size: 26px; color: var(--color-light); border-color: var(--color-tertiary); background: var(--color-bg-soft); }
.modal--image .modal__close:disabled { opacity: .35; cursor: default; }
.modal--image [data-image-close] { margin-left: 12px; }
.image-lightbox__viewport { display: grid; place-items: center; height: calc(100% - 69px); overflow: hidden; touch-action: none; user-select: none; }
.image-lightbox__viewport img { display: block; max-width: none; max-height: none; flex-shrink: 0; transform-origin: center; pointer-events: none; }
.image-lightbox__viewport.is-zoomed { cursor: grab; }
.image-lightbox__viewport.is-dragging { cursor: grabbing; }