/* ErdeMED Content Blocks — Bild-Lightbox (Phase 1).
   Ersetzt FooBox. Dunkles Vollbild-Overlay, Textpanel RECHTS, Thumbnails unten,
   Zoom/Close/Beschreibung-Toggle. Icons im Hausstil (currentColor). */

.emcb-lb {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	flex-direction: column;
	/* Dunkles Slate + leichte Unschärfe der Seite dahinter → wirkt integriert,
	   nicht wie ein schwarzer Screenshot-Klon. */
	background: rgba(18, 23, 29, 0.90);
	-webkit-backdrop-filter: blur(8px) saturate(115%);
	        backdrop-filter: blur(8px) saturate(115%);
	color: #e5e7eb;
	font-size: 15px;
	line-height: 1.55;
}
.emcb-lb.is-open { display: flex; }

/* Top-Leiste */
.emcb-lb__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* alle Bedienelemente rechts (Тайлбар-Panel ist rechts) */
	gap: 12px;
	padding: 10px 12px;
	background: rgba(23, 29, 36, 0.96);
	border-bottom: 1px solid #2b333d;
	flex: 0 0 auto;
}
.emcb-lb__tools { display: inline-flex; gap: 6px; }
.emcb-lb__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	font: inherit;
	font-size: 12px; /* Text nur 1px kleiner */
	font-weight: 600;
	color: #e5e7eb;
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	transition: background-color 0.15s, opacity 0.15s;
}
.emcb-lb__btn:hover { background: #23282e; }
/* Тайлбар optisch wie Zoom/Close (kein Akzent); nur „aus" dezent gedimmt. */
.emcb-lb__descbtn.is-off { opacity: 0.55; }
.emcb-lb__btn svg { display: block; width: 16px; height: 16px; }
.emcb-lb__btn--icon { padding: 6px; }

/* Körper: Bühne + Textpanel rechts */
.emcb-lb__body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}
.emcb-lb__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
}
.emcb-lb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	transition: transform 0.15s ease;
	transform-origin: center center;
}
.emcb-lb__stage.is-zoomed { overflow: auto; cursor: grab; }
.emcb-lb__stage.is-zoomed .emcb-lb__img { transform: scale(2); cursor: grab; }
.emcb-lb__stage.is-panning { cursor: grabbing; }

/* Navigation */
.emcb-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.emcb-lb__nav:hover { background: rgba(0, 0, 0, 0.65); }
.emcb-lb__prev { left: 14px; }
.emcb-lb__next { right: 14px; }
.emcb-lb__nav svg { width: 24px; height: 24px; }
.emcb-lb.is-single .emcb-lb__nav { display: none; }

/* Textpanel RECHTS */
.emcb-lb__desc {
	flex: 0 0 340px;
	max-width: 40vw;
	overflow-y: auto;
	padding: 22px 24px;
	background: rgba(23, 29, 36, 0.96);
	border-left: 1px solid #2b333d;
}
.emcb-lb.is-desc-off .emcb-lb__desc,
.emcb-lb:not(.has-desc) .emcb-lb__desc,
.emcb-lb:not(.has-desc) .emcb-lb__descbtn { display: none; }
.emcb-lb__desc-inner { color: #d7dde3; }
.emcb-lb__desc-inner :is(h1,h2,h3,h4,strong,b) { color: #fff; }
.emcb-lb__desc-inner a { color: #7fd4e0; }
.emcb-lb__desc-inner img { max-width: 100%; height: auto; }

/* Thumbnails unten */
.emcb-lb__thumbs {
	flex: 0 0 auto;
	display: flex;
	justify-content: center; /* Thumbnails mittig */
	gap: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	background: rgba(23, 29, 36, 0.96);
	border-top: 1px solid #2b333d;
}
.emcb-lb.is-single .emcb-lb__thumbs { display: none; }
.emcb-lb__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: #0b0e11;
	cursor: pointer;
}
.emcb-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emcb-lb__thumb.is-active { border-color: #7fd4e0; }

/* Klickbare Inhaltsbilder (Cursor-Hinweis) */
.emcb-lightbox-on img.emcb-lb-clickable,
.emcb-lightbox-on a.emcb-lb-clickable img { cursor: zoom-in; }

/* Chat-FAB/Back-to-top ausblenden solange offen */
body.emcb-lb-open .erdemed-ai-fab,
body.emcb-lb-open .brxe-back-to-top { display: none !important; }

/* Mobile: Textpanel als einklappbare Leiste unten, Bühne voll */
@media (max-width: 781px) {
	.emcb-lb__body { flex-direction: column; }
	.emcb-lb__desc {
		flex: 0 0 auto;
		max-width: none;
		max-height: 38vh;
		border-left: 0;
		border-top: 1px solid #262b31;
		padding: 16px;
	}
	.emcb-lb__nav { width: 38px; height: 38px; }
}