/**
 * Gallery lightbox styles — ported from design/gallery.html with scroll-to
 * palette tokens substituted for the design's --accent variable.
 *
 * Hand-written (not Tailwind-built) so adding the overlay markup later
 * doesn't depend on a Tailwind rebuild picking up arbitrary classes.
 *
 * Layered: full-viewport translucent backdrop → centered image + arrows →
 * caption + hint underneath → horizontal thumbnail strip at the bottom.
 */

/* ─── Overlay shell ─────────────────────────────────────────── */

/* Fixed full-viewport overlay. Hidden by default; JS adds `.is-open` to
   reveal it (paired with `body.scroll-lb-open` below to lock background
   scroll). `backdrop-filter: blur(8px)` softens whatever is behind. */
#scroll-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.92);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	backdrop-filter: blur(8px);
}

/* Open-state — flexbox column to stack header + main + caption + strip. */
#scroll-lightbox.is-open {
	display: flex;
}

/* ─── Header strip (counter + title left, action buttons right) ─ */

/* Top row of the lightbox UI. Caps width so the action buttons don't drift
   too far from the image on ultra-wide displays. */
.scroll-lb-header {
	width: 100%;
	max-width: 1000px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	gap: 12px;
}

/* Left side of the header — counter (1 / 5) + post title. */
.scroll-lb-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* Right side of the header — Download + Close buttons. */
.scroll-lb-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* "1 / 5"-style image counter, bold white. */
.scroll-lb-counter {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

/* Post title — muted, ellipsis-truncated so long titles don't push the
   action buttons off-screen. */
.scroll-lb-title {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ─── Main image area ───────────────────────────────────────── */

/* Center row: prev-arrow | image wrap | next-arrow. Caps width so arrows
   sit reasonably close to the image regardless of viewport. */
.scroll-lb-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 1;
	width: 100%;
	max-width: 1000px;
	overflow: hidden;
}

/* Wrapper around the active image. Constrains height to 65vh so the
   caption + thumbnail strip below stay visible. */
.scroll-lb-img-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	max-height: 65vh;
}

/* The active <img>. `object-fit: contain` preserves aspect ratio inside
   the wrap; `transition: opacity` powers the fade-out during swap. */
#scroll-lb-img {
	max-width: 100%;
	max-height: 65vh;
	border-radius: 16px;
	object-fit: contain;
	transition: opacity 0.15s;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Transient class JS adds while loading the next/prev image — fades the
   current image out before the new src lands. */
#scroll-lb-img.is-switching {
	opacity: 0;
}

/* ─── Side arrows (prev / next) ─────────────────────────────── */

/* Circular ghost buttons either side of the image. Subtle translucent
   background + blur so they sit on top of any image without obscuring
   detail. */
.scroll-lb-arrow {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	backdrop-filter: blur(8px);
	padding: 0;
}

/* Hover state — slightly brighter fill + brighter ring. */
.scroll-lb-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

/* ─── Header action buttons (Download / share / etc) ────────── */

/* Pill-shaped ghost buttons in the header-right area. Smaller and more
   text-oriented than the side arrows. */
.scroll-lb-action-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 6px 12px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}

/* Hover state — bring text to white + slight tint. */
.scroll-lb-action-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
}

/* Square Close button — rounded but smaller than the action buttons. */
.scroll-lb-close {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	transition: background 0.15s, color 0.15s;
	padding: 0;
}

/* Hover state — brighter close glyph. */
.scroll-lb-close:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* ─── Caption + keyboard hint (under the image) ─────────────── */

/* Italic caption line. min-height keeps the layout stable when captions
   are empty so the thumbnail strip below doesn't jump. */
.scroll-lb-caption {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	text-align: center;
	font-style: italic;
	max-width: 600px;
	margin: 0;
	min-height: 1em;
}

/* Tiny hint line ("← → arrows · Esc to close"). Very muted. */
.scroll-lb-hint {
	color: rgba(255, 255, 255, 0.3);
	font-size: 11px;
	text-align: center;
	margin: 0;
}

/* ─── Thumbnail strip (bottom of overlay) ──────────────────── */

/* Horizontal scroll strip of thumbnails for jump-to navigation. Mobile
   uses flex-start so the strip can scroll naturally; the media query
   below centers it on wider viewports. */
.scroll-lb-strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	max-width: 1000px;
	width: 100%;
	padding: 4px 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
	justify-content: flex-start;
}

/* Tablet / desktop — center the strip when it fits without scrolling. */
@media (min-width: 640px) {
	.scroll-lb-strip {
		justify-content: center;
	}
}

/* WebKit-only scrollbar styling so the strip doesn't show a chunky grey
   default bar against the dark background. */
.scroll-lb-strip::-webkit-scrollbar {
	height: 4px;
}

.scroll-lb-strip::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
}

/* Individual thumbnail button. Fixed aspect via explicit width + height. */
.scroll-lb-strip-thumb {
	width: 64px;
	height: 48px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.15s, box-shadow 0.15s;
	padding: 0;
	background: transparent;
}

/* The actual <img> inside the thumb. `object-fit: cover` crops to fill
   so every thumbnail has the same shape regardless of source aspect. */
.scroll-lb-strip-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hover ring — subtle white outline. */
.scroll-lb-strip-thumb:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

/* Active thumbnail (matching the visible image). Bubblegum-pink ring +
   matching outer glow so the currently-shown image is obvious in the
   strip. */
.scroll-lb-strip-thumb.is-active {
	border-color: rgb(var(--bubblegum));
	box-shadow: 0 0 0 2px rgb(var(--bubblegum) / 0.4);
}

/* ─── Body scroll lock ──────────────────────────────────────── */

/* JS adds this class to <body> while the lightbox is open so the page
   underneath can't be scroll-revealed behind the dark overlay. */
body.scroll-lb-open {
	overflow: hidden;
}