/**
 * AI Labeled Media – Frontend Styles
 * Farben, Schriftgröße und Hintergrund werden per wp_add_inline_style gesetzt.
 */

:is(p, figure, div, span, a):has(> .ki-generiert) {
	position: relative;
}

:is(p, figure, div, span, a):has(> .ki-generiert)::after {
	content: "Abbildung KI-generiert.";
	content: "Abbildung KI-generiert." / ""; /* rein dekorativ: Hilfstechnik liest aria-description am Bild */
	display: inline-block;
	color: #1a1a1a;
	font-size: 75%;
	background: transparent; /* Standardwert – wird durch Plugin-Einstellung überschrieben */
	padding: 6px 10px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 8px 0 0 0; /* Standardwert – wird durch Plugin-Einstellung überschrieben */
}

/*
 * Verlinkte Bilder (<a><img></a>): Ein <a>/<span> ist standardmäßig inline und bildet keinen verlässlichen
 * Bezugsrahmen für das absolut positionierte Label – es würde links neben dem Bild landen.
 * Als inline-block umschließt der Wrapper genau das Bild.
 */
:is(a, span):has(> .ki-generiert) {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

:is(a, span):has(> .ki-generiert) > .ki-generiert {
	vertical-align: bottom; /* kein Zeilenabstand unter dem Bild, damit das Label am Bildrand sitzt */
}

/* WordPress-Ausrichtung auf den Wrapper übertragen, damit sie erhalten bleibt */
:is(a, span):has(> .ki-generiert.aligncenter) {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

:is(a, span):has(> .ki-generiert.alignleft) {
	float: left;
}

:is(a, span):has(> .ki-generiert.alignright) {
	float: right;
}

:is(a, span):has(> .ki-generiert.alignleft, > .ki-generiert.alignright) > .ki-generiert {
	float: none; /* der Wrapper schwebt, nicht mehr das Bild (Textumfluss bleibt erhalten) */
}