/*!
 * onlion® Caption v1.0.1 · onlion® Studio · https://onlion.com
 *
 * Anpassbar per CSS-Variablen, z. B. im Theme:
 *   :root { --onlion-caption-bg: rgba(0,0,0,.6); }
 * Vorhandene Theme-Variablen (--overlay-bg, --blur-light, --color-white,
 * --transition-medium) werden automatisch übernommen.
 */

:root {
	--onlion-caption-bg: var(--overlay-bg, rgba(15, 17, 26, 0.55));
	--onlion-caption-blur: var(--blur-light, blur(8px) saturate(140%));
	--onlion-caption-color: var(--color-white, #fff);
	--onlion-caption-transition: var(--transition-medium, 0.3s ease);
	--onlion-caption-radius: 0.5em;
	--onlion-caption-offset: 0.75em;
	--onlion-caption-icon: 24px;
}

.show-ai-caption,
.show-source-caption {
	position: relative;
	overflow: hidden;
}

/* Wrapper, wenn die Klasse direkt am <img> sitzt */
.onlion-caption-wrap {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.onlion-caption-wrap > img {
	display: block;
	max-width: 100%;
	height: auto;
}

.show-ai-caption .ai-caption-overlay,
.show-source-caption .source-caption-overlay {
	position: absolute;
	right: var(--onlion-caption-offset);
	bottom: var(--onlion-caption-offset);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: calc(100% - 2 * var(--onlion-caption-offset));
	box-sizing: border-box;
	margin: 0;
	padding: 0.75em 1em;
	border-radius: var(--onlion-caption-radius);
	background-color: var(--onlion-caption-bg);
	-webkit-backdrop-filter: var(--onlion-caption-blur);
	backdrop-filter: var(--onlion-caption-blur);
	color: var(--onlion-caption-color);
	font-size: 0.75em;
	font-size: max(0.75em, 12px);
	line-height: 1.3;
	text-align: left;
	pointer-events: none;
	opacity: 0;
	transform: translateY(10px) scale(0.95);
	transition:
		opacity var(--onlion-caption-transition),
		transform var(--onlion-caption-transition);
}

.show-ai-caption:hover .ai-caption-overlay,
.show-source-caption:hover .source-caption-overlay,
.show-ai-caption:focus-within .ai-caption-overlay,
.show-source-caption:focus-within .source-caption-overlay {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Icon als Hintergrund statt <img>: immun gegen Builder-Regeln wie
   ".et_pb_image_0 img { content: url(mobil.jpg) }" */
.show-ai-caption .onlion-caption-icon,
.show-source-caption .onlion-caption-icon {
	display: block;
	width: var(--onlion-caption-icon);
	height: var(--onlion-caption-icon);
	margin: 0;
	padding: 0;
	flex: 0 0 var(--onlion-caption-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: normal;
}

.show-ai-caption .ai-caption-overlay span:not(.onlion-caption-icon),
.show-source-caption .source-caption-overlay span:not(.onlion-caption-icon) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Fallback ohne backdrop-filter: etwas deckender */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.show-ai-caption .ai-caption-overlay,
	.show-source-caption .source-caption-overlay {
		background-color: rgba(15, 17, 26, 0.8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.show-ai-caption .ai-caption-overlay,
	.show-source-caption .source-caption-overlay {
		transform: none;
		transition: opacity 0.01s linear;
	}
}

@media print {
	.show-ai-caption .ai-caption-overlay,
	.show-source-caption .source-caption-overlay {
		opacity: 1;
		transform: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #000;
	}
}