/**
 * Subreality AI-Media-Label - Frontend-Darstellung der Kennzeichnung.
 *
 * Ausschliesslich visuell (HTML/CSS), keine Bildmanipulation. Wird sowohl
 * im Frontend als auch in der Block-Editor-Vorschau geladen.
 */

/* =========================
   Layout
========================= */
/* height: 100% reicht eine definierte Elternhoehe an das Bild durch.
   Ohne diese Zeile bezieht sich eine Theme-Regel wie
   .karte img { height: 100%; object-fit: cover; } auf den Wrapper statt
   auf den Bildcontainer und faellt mangels definierter Wrapper-Hoehe auf
   height: auto zurueck - das Bild verliert seinen Zuschnitt.
   Die Regel neutralisiert sich selbst: Hat der Elternteil keine
   definierte Hoehe (normales Bild im Textfluss), berechnet CSS
   height: 100% zu auto, das Layout bleibt unveraendert. */
.subreal-ai-badge-image {
	position: relative;
	display: inline-block;
	max-width: 100%;
	height: 100%;
	line-height: 0;
}

/* Dedizierte Bildcontainer (Karten, Hero-Bereiche) geben dem Bild per
   width/height: 100% ihre eigene Groesse vor. Der Wrapper ist als
   inline-block aber shrink-to-fit und bleibt auf der natuerlichen
   Bildgroesse stehen - im Container entsteht dann ein leerer Rand.
   Steht der Wrapper allein in einem solchen Container, nimmt er daher
   dessen volle Groesse an.
   Ausgenommen sind die Content-Container figure, p und a: dort stehen
   Bilder in ihrer natuerlichen Groesse, ein voller Wrapper wuerde das
   Badge vom Bild wegruecken. */
:where(:not(figure, p, a)) > .subreal-ai-badge-image:only-child {
	display: block;
	width: 100%;
	height: 100%;
}

/* Spezifitaet bewusst per :where() auf 0,1,0 gesenkt: Theme-Regeln wie
   .card img { height: 220px; object-fit: cover; } muessen die Bildgroesse
   weiterhin bestimmen (der Wrapper darf das Layout nie veraendern).
   Diese Regel dient nur als Fallback fuer voellig ungestylte Bilder. */
.subreal-ai-badge-image :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Modifier fuer Vollbreiten-/Hero-Bilder: laesst den Wrapper unabhaengig
   von der natuerlichen Bildbreite die volle Containerbreite einnehmen.
   Wird nicht automatisch gesetzt; Themes ergaenzen die Klasse gezielt
   ueber den Filter subreal_ai_badge_wrap_classes. */
.subreal-ai-badge-image-vollbreite {
	display: block;
	width: 100%;
}

.subreal-ai-badge-image-vollbreite img {
	width: 100%;
}

/* =========================
   Komponenten
========================= */
.subreal-ai-badge {
	position: absolute;
	z-index: 2;
	display: inline-block;
	padding: 0.2em 0.65em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: #ffffff;
	background-color: rgba(17, 17, 17, 0.55);
	border-radius: 4px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	white-space: nowrap;
	pointer-events: none;
}

/* =========================
   Utilities (Badge-Position)
========================= */
.subreal-ai-badge-pos-br .subreal-ai-badge {
	right: 0.5em;
	bottom: 0.5em;
}

.subreal-ai-badge-pos-bl .subreal-ai-badge {
	bottom: 0.5em;
	left: 0.5em;
}

.subreal-ai-badge-pos-tr .subreal-ai-badge {
	top: 0.5em;
	right: 0.5em;
}

.subreal-ai-badge-pos-tl .subreal-ai-badge {
	top: 0.5em;
	left: 0.5em;
}