/**
 * Spree & Havel — KI-Kennzeichnung für Bilder
 * ------------------------------------------------------------------
 * Zwei Wege, ein Label:
 *   Mediathek → Feld „KI-Kennzeichnung" am Bild, erscheint automatisch
 *   Manuell   → Klasse sh-ai-generated | sh-ai-modified (hat Vorrang)
 *
 * Wohin die Klasse gehört:
 *   Divi-Bildmodul  → Feld „CSS-Klasse" des Moduls (Label sitzt am Bild, nicht am Modul)
 *   Gutenberg-Bild  → „Zusätzliche CSS-Klasse(n)" des Bild-Blocks
 *   Bild im Text    → class am Bild-Tag (PHP legt den Wrapper an, inc/sh-ai-label.php)
 *   Hintergrundbild → Klasse an das div/die Sektion/Spalte selbst
 *
 * Optional kombinierbar:
 *   Position  sh-ai-top-left  sh-ai-top     sh-ai-top-right
 *             sh-ai-left                    sh-ai-right
 *             sh-ai-bottom-left sh-ai-bottom sh-ai-bottom-right (Standard)
 *   Abstand   sh-ai-gap-0 (bündig, übernimmt den Eckenradius) | -xs | -s | -m | -l | -xl
 *             frei: style="--sh-ai-gap: 24px"
 *   Größe     sh-ai-size-s | -l | -xl
 *   Variante  sh-ai-light (weiße Pille)   sh-ai-de (KI GENERIERT / KI MODIFIZIERT)
 *             sh-ai-compact (nur „AI", für kleine Vorschaubilder)
 *
 * Beispiel: sh-ai-generated sh-ai-top-left sh-ai-gap-l
 *
 * Kein Doppel: automatisch gesetzte Labels tragen sh-ai-auto und entfallen,
 * wenn ein Vorfahr schon manuell gekennzeichnet ist.
 */

/* ---------- 1. Standardwerte am Träger ---------- */
.sh-ai-generated,
.sh-ai-modified {
	--sh-ai-gap: clamp(.4rem, 1.4vw, 1rem);
	--sh-ai-size: clamp(10px, .5rem + .3vw, 13px);

	--sh-ai-top: auto;
	--sh-ai-right: var(--sh-ai-gap);
	--sh-ai-bottom: var(--sh-ai-gap);
	--sh-ai-left: auto;
	--sh-ai-tx: 0;
	--sh-ai-ty: 0;

	--sh-ai-r-tl: 999px;
	--sh-ai-r-tr: 999px;
	--sh-ai-r-br: 999px;
	--sh-ai-r-bl: 999px;

	--sh-ai-pad: .6em .8em .6em 2.85em;

	--sh-ai-bg: #000;
	--sh-ai-fg: #fff;
	--sh-ai-mark: var(--sh-ai-mark-ai-light);

	--sh-ai-mark-ai-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M35 0h30l35 100H73l-7-20H34l-7 20H0L35 0zm15 27L40 58h20L50 27z'/%3E%3Cpath d='M116 0h24v100h-24z'/%3E%3C/g%3E%3C/svg%3E");
	--sh-ai-mark-ai-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M35 0h30l35 100H73l-7-20H34l-7 20H0L35 0zm15 27L40 58h20L50 27z'/%3E%3Cpath d='M116 0h24v100h-24z'/%3E%3C/g%3E%3C/svg%3E");
	--sh-ai-mark-ki-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg fill='%23fff'%3E%3Cpath d='M0 0h24v40L58 0h32L50 46l44 54H62L24 54v46H0z'/%3E%3Cpath d='M116 0h24v100h-24z'/%3E%3C/g%3E%3C/svg%3E");
	--sh-ai-mark-ki-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 0h24v40L58 0h32L50 46l44 54H62L24 54v46H0z'/%3E%3Cpath d='M116 0h24v100h-24z'/%3E%3C/g%3E%3C/svg%3E");
}

.sh-ai-generated {
	--sh-ai-word: "GENERATED";
	--sh-ai-alt: "KI-generiertes Bild";
}

.sh-ai-modified {
	--sh-ai-word: "MODIFIED";
	--sh-ai-alt: "KI-modifiziertes Bild";
}

/* ---------- 2. Positionen (nach den Standardwerten = gewinnen) ---------- */
.sh-ai-top-left     { --sh-ai-top: var(--sh-ai-gap); --sh-ai-bottom: auto; --sh-ai-left: var(--sh-ai-gap); --sh-ai-right: auto; --sh-ai-tx: 0; --sh-ai-ty: 0; }
.sh-ai-top          { --sh-ai-top: var(--sh-ai-gap); --sh-ai-bottom: auto; --sh-ai-left: 50%;              --sh-ai-right: auto; --sh-ai-tx: -50%; --sh-ai-ty: 0; }
.sh-ai-top-right    { --sh-ai-top: var(--sh-ai-gap); --sh-ai-bottom: auto; --sh-ai-left: auto;             --sh-ai-right: var(--sh-ai-gap); --sh-ai-tx: 0; --sh-ai-ty: 0; }
.sh-ai-left         { --sh-ai-top: 50%;              --sh-ai-bottom: auto; --sh-ai-left: var(--sh-ai-gap); --sh-ai-right: auto; --sh-ai-tx: 0; --sh-ai-ty: -50%; }
.sh-ai-right        { --sh-ai-top: 50%;              --sh-ai-bottom: auto; --sh-ai-left: auto;             --sh-ai-right: var(--sh-ai-gap); --sh-ai-tx: 0; --sh-ai-ty: -50%; }
.sh-ai-bottom-left  { --sh-ai-top: auto; --sh-ai-bottom: var(--sh-ai-gap); --sh-ai-left: var(--sh-ai-gap); --sh-ai-right: auto; --sh-ai-tx: 0; --sh-ai-ty: 0; }
.sh-ai-bottom       { --sh-ai-top: auto; --sh-ai-bottom: var(--sh-ai-gap); --sh-ai-left: 50%;              --sh-ai-right: auto; --sh-ai-tx: -50%; --sh-ai-ty: 0; }
.sh-ai-bottom-right { --sh-ai-top: auto; --sh-ai-bottom: var(--sh-ai-gap); --sh-ai-left: auto;             --sh-ai-right: var(--sh-ai-gap); --sh-ai-tx: 0; --sh-ai-ty: 0; }

/* ---------- 3. Abstand, Größe, Varianten ---------- */
.sh-ai-gap-0  { --sh-ai-gap: 0px; }
.sh-ai-gap-xs { --sh-ai-gap: .25rem; }
.sh-ai-gap-s  { --sh-ai-gap: .5rem; }
.sh-ai-gap-m  { --sh-ai-gap: 1rem; }
.sh-ai-gap-l  { --sh-ai-gap: 1.5rem; }
.sh-ai-gap-xl { --sh-ai-gap: 2.5rem; }

.sh-ai-size-s  { --sh-ai-size: 9px; }
.sh-ai-size-l  { --sh-ai-size: clamp(12px, .6rem + .45vw, 16px); }
.sh-ai-size-xl { --sh-ai-size: clamp(14px, .7rem + .7vw, 20px); }

.sh-ai-light { --sh-ai-bg: #fff; --sh-ai-fg: #000; --sh-ai-mark: var(--sh-ai-mark-ai-dark); }

.sh-ai-de.sh-ai-generated { --sh-ai-word: "GENERIERT"; }
.sh-ai-de.sh-ai-modified  { --sh-ai-word: "MODIFIZIERT"; }
.sh-ai-de                 { --sh-ai-mark: var(--sh-ai-mark-ki-light); }
.sh-ai-de.sh-ai-light     { --sh-ai-mark: var(--sh-ai-mark-ki-dark); }

/* Nur das Zeichen: das Wort entfällt, die Pille wird symmetrisch */
.sh-ai-compact { --sh-ai-word: "\200B"; --sh-ai-pad: .6em .5em .6em 2.35em; }

/* ---------- 4. Bündig am Rand (gap-0) ----------
 * Eine Pille in der Ecke eines abgerundeten Bildes wird sonst angeschnitten.
 * Bündig wird sie zum Reiter: die Kanten am Bildrand eckig, die äußere Ecke
 * folgt dem Radius des Bildes (inherit), die innere Ecke bleibt rund. */
.sh-ai-gap-0.sh-ai-top-left    { --sh-ai-r-tr: 0; --sh-ai-r-bl: 0; }
.sh-ai-gap-0.sh-ai-top-right   { --sh-ai-r-tl: 0; --sh-ai-r-br: 0; }
.sh-ai-gap-0.sh-ai-bottom-left { --sh-ai-r-tl: 0; --sh-ai-r-br: 0; }
.sh-ai-gap-0:is(.sh-ai-bottom-right, :not(.sh-ai-top-left, .sh-ai-top, .sh-ai-top-right, .sh-ai-left, .sh-ai-right, .sh-ai-bottom-left, .sh-ai-bottom)) { --sh-ai-r-tr: 0; --sh-ai-r-bl: 0; }
.sh-ai-gap-0.sh-ai-top    { --sh-ai-r-tl: 0; --sh-ai-r-tr: 0; }
.sh-ai-gap-0.sh-ai-bottom { --sh-ai-r-bl: 0; --sh-ai-r-br: 0; }
.sh-ai-gap-0.sh-ai-left   { --sh-ai-r-tl: 0; --sh-ai-r-bl: 0; }
.sh-ai-gap-0.sh-ai-right  { --sh-ai-r-tr: 0; --sh-ai-r-br: 0; }

:is(
	.sh-ai-gap-0.sh-ai-top-left:not(.et_pb_image, .wp-block-image),
	.et_pb_image.sh-ai-gap-0.sh-ai-top-left .et_pb_image_wrap,
	.wp-block-image.sh-ai-gap-0.sh-ai-top-left .sh-ai-media
)::after { border-top-left-radius: inherit; }

:is(
	.sh-ai-gap-0.sh-ai-top-right:not(.et_pb_image, .wp-block-image),
	.et_pb_image.sh-ai-gap-0.sh-ai-top-right .et_pb_image_wrap,
	.wp-block-image.sh-ai-gap-0.sh-ai-top-right .sh-ai-media
)::after { border-top-right-radius: inherit; }

:is(
	.sh-ai-gap-0.sh-ai-bottom-left:not(.et_pb_image, .wp-block-image),
	.et_pb_image.sh-ai-gap-0.sh-ai-bottom-left .et_pb_image_wrap,
	.wp-block-image.sh-ai-gap-0.sh-ai-bottom-left .sh-ai-media
)::after { border-bottom-left-radius: inherit; }

:is(
	.sh-ai-gap-0:is(.sh-ai-bottom-right, :not(.sh-ai-top-left, .sh-ai-top, .sh-ai-top-right, .sh-ai-left, .sh-ai-right, .sh-ai-bottom-left, .sh-ai-bottom)):not(.et_pb_image, .wp-block-image),
	.et_pb_image.sh-ai-gap-0:is(.sh-ai-bottom-right, :not(.sh-ai-top-left, .sh-ai-top, .sh-ai-top-right, .sh-ai-left, .sh-ai-right, .sh-ai-bottom-left, .sh-ai-bottom)) .et_pb_image_wrap,
	.wp-block-image.sh-ai-gap-0:is(.sh-ai-bottom-right, :not(.sh-ai-top-left, .sh-ai-top, .sh-ai-top-right, .sh-ai-left, .sh-ai-right, .sh-ai-bottom-left, .sh-ai-bottom)) .sh-ai-media
)::after { border-bottom-right-radius: inherit; }

/* ---------- 5. Bezugsrahmen ---------- */
/* Spezifität 0: eine vorhandene position (sticky, absolute) des Elements gewinnt. */
:where(.sh-ai-generated, .sh-ai-modified):where(:not(.et_pb_image, .wp-block-image)),
:where(.et_pb_image.sh-ai-generated, .et_pb_image.sh-ai-modified) .et_pb_image_wrap,
:where(.sh-ai-media),
:where(:has(> .sh-ai-overlay)) {
	position: relative;
}

/* Wrapper aus PHP: schmiegt sich an das Bild */
.sh-ai-media {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.wp-block-image:is(.alignwide, .alignfull) .sh-ai-media {
	display: block;
}

.wp-block-image.is-style-rounded .sh-ai-media {
	border-radius: 9999px;
	overflow: hidden;
}

/* Overlay aus den SH-Templates (Blog-Hero, Karten): deckt den Bildcontainer,
 * ohne dessen eigenes ::after (Verlauf) anzufassen. Außen der Container für
 * die Größenabfrage, innen der Träger des Labels – ein ::after kann sein
 * eigenes Element nicht abfragen. */
.sh-ai-overlay,
.sh-ai-overlay > span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.sh-ai-overlay {
	z-index: 2;
	container-type: size;
}

/* ---------- 6. Das Label ---------- */
:is(.sh-ai-generated, .sh-ai-modified):not(.et_pb_image, .wp-block-image)::after,
.et_pb_image:is(.sh-ai-generated, .sh-ai-modified) .et_pb_image_wrap::after,
.wp-block-image:is(.sh-ai-generated, .sh-ai-modified) .sh-ai-media::after,
.wp-block-image:is(.sh-ai-generated, .sh-ai-modified):not(:has(.sh-ai-media))::after {
	content: var(--sh-ai-word);
	content: var(--sh-ai-word) / var(--sh-ai-alt);

	position: absolute;
	z-index: 5;
	top: var(--sh-ai-top);
	right: var(--sh-ai-right);
	bottom: var(--sh-ai-bottom);
	left: var(--sh-ai-left);
	transform: translate(var(--sh-ai-tx), var(--sh-ai-ty));

	/* Divi-Clearfix (::after mit height/width 0, visibility hidden) neutralisieren */
	display: block;
	visibility: visible;
	opacity: 1;
	float: none;
	clear: none;
	width: max-content;
	height: auto;
	max-width: calc(100% - 2 * var(--sh-ai-gap));
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;

	padding: var(--sh-ai-pad);
	border-radius: var(--sh-ai-r-tl) var(--sh-ai-r-tr) var(--sh-ai-r-br) var(--sh-ai-r-bl);
	background: var(--sh-ai-mark) no-repeat .95em 50% / auto 1em, var(--sh-ai-bg);
	color: var(--sh-ai-fg);

	font-family: var(--sh-font-head, 'Montserrat', Helvetica, Arial, sans-serif);
	font-size: var(--sh-ai-size);
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-shadow: none;
	white-space: nowrap;

	pointer-events: none;
	user-select: none;
}

/* Kleine Vorschaubilder (Overlay schmaler als 200px): nur das Zeichen */
@container (max-width: 200px) {
	.sh-ai-overlay > :is(.sh-ai-generated, .sh-ai-modified)::after {
		content: "\200B";
		content: "\200B" / var(--sh-ai-alt);
		padding: .6em .5em .6em 2.35em;
	}
}

/* ---------- 7. Kein Doppel ---------- */
/* Automatisches Label innerhalb eines manuell gekennzeichneten Elements entfällt. */
:is(.sh-ai-generated, .sh-ai-modified):not(.sh-ai-auto) :is(
	.sh-ai-auto:not(.et_pb_image, .wp-block-image),
	.et_pb_image.sh-ai-auto .et_pb_image_wrap,
	.wp-block-image.sh-ai-auto .sh-ai-media
)::after {
	content: none;
}

/* Kontrastmodus (Windows): Pille nicht wegfiltern lassen */
@media (forced-colors: active) {
	:is(.sh-ai-generated, .sh-ai-modified)::after,
	:is(.sh-ai-generated, .sh-ai-modified) :is(.et_pb_image_wrap, .sh-ai-media)::after {
		forced-color-adjust: none;
	}
}