/**
 * Schnieders AI Media Labels - front-end styles.
 */

.saiml-figure {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.saiml-figure img {
	max-width: 100%;
	height: auto;
}

/* Badge overlay */
.saiml-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: var(--saiml-offset, 8px);
	padding: 3px 8px;
	font-size: var(--saiml-font-size, 12px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--saiml-fg, #ffffff);
	background-color: var(--saiml-bg, #111111);
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
	white-space: nowrap;
}

/* Indicator (dot or custom symbol) before the badge text */
.saiml-badge__ind {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.saiml-ind-none .saiml-badge__ind {
	display: none;
}

.saiml-ind-dot .saiml-badge__ind {
	width: 0.66em;
	height: 0.66em;
	border-radius: 50%;
	background: var(--saiml-ind, currentColor);
	opacity: 0.85;
}

.saiml-ind-custom .saiml-badge__ind {
	color: var(--saiml-ind, currentColor);
	font-weight: 800;
}

/* Shapes */
.saiml-shape-square .saiml-badge {
	border-radius: 0;
}

.saiml-shape-rounded .saiml-badge {
	border-radius: 4px;
}

.saiml-shape-pill .saiml-badge {
	border-radius: 999px;
	padding-left: 10px;
	padding-right: 10px;
}

.saiml-shape-circle .saiml-badge {
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	padding: 0;
	border-radius: 50%;
}

/* The circle shape shows only the badge text. */
.saiml-shape-circle .saiml-badge__ind {
	display: none;
}

/* Positions */
.saiml-pos-top-left .saiml-badge {
	top: 0;
	left: 0;
}

.saiml-pos-top-right .saiml-badge {
	top: 0;
	right: 0;
}

.saiml-pos-bottom-left .saiml-badge {
	bottom: 0;
	left: 0;
}

.saiml-pos-bottom-right .saiml-badge {
	bottom: 0;
	right: 0;
}

/* When caption mode is active the badge should sit above the caption line */
.saiml-mode-both.saiml-pos-bottom-left .saiml-badge,
.saiml-mode-both.saiml-pos-bottom-right .saiml-badge {
	bottom: 1.9em;
}

/* Caption below the image */
.saiml-caption {
	display: block;
	margin-top: 6px;
	font-size: 0.8em;
	line-height: 1.4;
	font-style: italic;
	color: inherit;
	opacity: 0.85;
}

.saiml-caption::before {
	content: "\24D8"; /* circled i */
	margin-right: 4px;
	font-style: normal;
}

/* Disclosure note for video / audio blocks */
.saiml-media-note {
	display: block;
	margin-top: 6px;
	font-size: 0.8em;
	line-height: 1.4;
	font-style: italic;
	opacity: 0.85;
}

.saiml-media-note::before {
	content: "\24D8"; /* circled i */
	margin-right: 4px;
	font-style: normal;
}
