/* Mod image gallery + lightbox viewer — split out of style.css. Used on mod.php
   (gallery upload/reorder/review) and anywhere the lightbox is opened from. */

.user-images-pending { margin-top: 0.5rem; }
.user-images-pending summary { cursor: pointer; font-size: 0.9rem; color: var(--clr-text-muted); }
.gallery-item--pending { opacity: 0.85; }
.user-image-review-actions { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; }
.user-image-review-actions button { font-size: 0.8rem; padding: 0.1rem 0.45rem; cursor: pointer; }
.mod-image-gallery-section { margin: 0.75rem 0; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); padding: 0.75rem 1rem; box-shadow: var(--shadow-sm); }
.mod-image-gallery { display: flex; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; padding: 0; scroll-snap-type: x mandatory; padding-bottom: 7px; }
.gallery-item { position: relative; flex-shrink: 0; height: 150px; scroll-snap-align: start; }
.gallery-item.dragging { opacity: 0.4; }
/* Where the tile will land. Fixed: the gallery is `display: contents` and has no box. */
.gallery-drop-line { position: fixed; width: 3px; border-radius: 3px; background: var(--clr-link); box-shadow: 0 0 0 1px color-mix(in srgb, var(--clr-link) 40%, transparent), 0 0 10px 2px color-mix(in srgb, var(--clr-link) 55%, transparent); pointer-events: none; z-index: 2500; }
/* The rest of the band steps back while a tile is in flight, so the line is what reads. */
.mod-image-gallery--reordering .gallery-item:not(.dragging) { opacity: 0.72; }
.mod-image-gallery--saving .gallery-item { transition: opacity 0.15s; opacity: 0.85; }
.mod-image-gallery--drop-active { outline: 2px dashed var(--clr-link); outline-offset: 3px; background: color-mix(in srgb, var(--clr-link) 8%, transparent); border-radius: var(--radius-small); }
/* Only rendered empty at all for the mod author (drop target for drag-and-drop upload) —
   needs a minimum size to actually be droppable, and a hint since it'd otherwise be blank. */
.mod-image-gallery:empty { min-height: 60px; align-items: center; justify-content: center; border: 1px dashed var(--clr-border); border-radius: var(--radius-small); }
.mod-image-gallery:empty::before { content: 'Drag and drop images here'; color: var(--clr-text-muted); font-size: 0.85rem; }
.gallery-thumb { max-height: 150px; max-width: 260px; object-fit: contain; cursor: pointer; border-radius: var(--radius-small); display: block; }
.gallery-delete-btn { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.65); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 15px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.gallery-item:hover .gallery-delete-btn { display: flex; }
.gallery-uploader-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); background: rgba(0,0,0,.8); color: #fff; padding: 3px 8px; border-radius: var(--radius-small); font-size: 0.75rem; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 2; }
.gallery-item:hover .gallery-uploader-tooltip { opacity: 1; visibility: visible; }
.gallery-upload-btn { display: inline-block; padding: 0.3rem 0.75rem; border: 1px dashed var(--clr-border); border-radius: var(--radius-small); cursor: pointer; font-size: 0.85rem; color: var(--clr-text-muted); }
.gallery-upload-btn:hover { border-color: var(--clr-link); color: var(--clr-link); }
/* Lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 2000; display: none; align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
/* fit-content, so the bar below is exactly as wide as the rendered image. */
#lightbox-figure { display: flex; flex-direction: column; width: fit-content; max-width: calc(100vw - 20px); margin: 0; min-width: 0; }
#lightbox img {
	max-width: 100%;
	/* Leaves room for the bar below. */
	max-height: calc(100vh - 20px - 2.4rem);
	object-fit: contain;
	border-radius: var(--radius-small);
}
#lightbox-close { position: absolute; top: 10px; right: 16px; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 4rem; line-height: 1; cursor: pointer; padding: 0 0.5rem; opacity: 0.7; }
#lightbox-prev:hover, #lightbox-next:hover { opacity: 1; }
/* Position and credit, directly under the photo rather than in the corners of the screen. */
#lightbox-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.15rem 0; color: #fff; font-size: 0.9rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#lightbox-count { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
#lightbox-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An empty caption must not collapse the row, or the counter jumps. */
#lightbox-caption:empty::before { content: '\200b'; }
#lightbox-prev { left: 0; }
#lightbox-next { right: 0; }