/* ============================================================================
   LRMA Post Gallery — "viewer" layout
   A bounded main image box (stage) + a scrollable thumbnail strip (ruler) below.
   Built from the native WordPress Gallery block by gallery.js. Click the stage
   to open the full-screen lightbox.
   ========================================================================== */

.lrma-gal {
	margin: 36px 0;
}

/* ── Stage (the main image box) ──────────────────────────────────────────── */
.lrma-gal__stage {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: zoom-in;
	background: #0d0d0f;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 10;          /* fixed frame → image never stretches */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.lrma-gal__stage-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important; /* whole picture shown, letterboxed if needed */
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: opacity .25s ease;
}
@media (max-width: 600px) { .lrma-gal__stage { aspect-ratio: 4 / 3; } }

/* Prev/next arrows on the stage (navigate the main image) */
.lrma-gal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .2s ease, background .2s ease;
}
.lrma-gal__nav:hover { opacity: 1; background: var(--rock-crimson, #e11d48); }
.lrma-gal__nav--prev { left: 10px; }
.lrma-gal__nav--next { right: 10px; }
@media (max-width: 600px) { .lrma-gal__nav { width: 38px; height: 38px; font-size: 24px; } }

.lrma-gal__cap {
	color: #9a9a9a;
	font-size: 13px;
	padding: 9px 4px 0;
	text-align: center;
	min-height: 1em;
}

/* ── Strip (the thumbnail "ruler") ───────────────────────────────────────── */
.lrma-gal__strip {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--rock-crimson, #e11d48) transparent;
}
.lrma-gal__strip::-webkit-scrollbar { height: 6px; }
.lrma-gal__strip::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.lrma-gal__thumb {
	flex: 0 0 auto;
	width: 88px;
	height: 64px;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	background: #111;
	opacity: .55;
	box-shadow: inset 0 0 0 2px transparent;
	transition: opacity .2s ease, box-shadow .2s ease;
}
.lrma-gal__thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;       /* fill the thumb, was being cut by theme img CSS */
	object-position: center !important;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
}
.lrma-gal__thumb:hover { opacity: .85; }
.lrma-gal__thumb.is-active {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--rock-crimson, #e11d48);
}
@media (max-width: 600px) {
	.lrma-gal__thumb { width: 66px; height: 50px; }
}

/* ── Lightbox (full-screen, opened from the stage) ───────────────────────── */
.lrma-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(8, 8, 10, .96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
}
.lrma-lb.open { opacity: 1; visibility: visible; }
.lrma-lb__img {
	max-width: 92vw;
	max-height: 86vh;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
	user-select: none;
	-webkit-user-drag: none;
}
.lrma-lb__cap {
	position: absolute; bottom: 18px; left: 0; right: 0;
	text-align: center; color: #ddd; font-size: 14px; padding: 0 20px; pointer-events: none;
}
.lrma-lb__count {
	position: absolute; top: 18px; left: 20px;
	color: #8a8a8a; font-size: 13px; font-family: "Space Mono", monospace; letter-spacing: 1px;
}
.lrma-lb__btn {
	position: absolute; background: none; border: 0; color: #fff;
	font-size: 30px; cursor: pointer; padding: 14px; line-height: 1; opacity: .8;
	transition: opacity .2s ease, color .2s ease;
}
.lrma-lb__btn:hover { opacity: 1; color: var(--rock-crimson, #e11d48); }
.lrma-lb__close { top: 8px; right: 14px; font-size: 36px; }
.lrma-lb__prev { left: 6px;  top: 50%; transform: translateY(-50%); font-size: 44px; }
.lrma-lb__next { right: 6px; top: 50%; transform: translateY(-50%); font-size: 44px; }
@media (max-width: 600px) { .lrma-lb__prev, .lrma-lb__next { font-size: 30px; } }