.ai-image-label-host--relative {
	position: relative;
}

.ai-image-label-host--inline {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.ai-image-label-host--wrapper {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.ai-image-label-overlay {
	--aiml-label-offset: 0.5rem;
	position: absolute;
	z-index: 30;
	display: flex;
	max-width: calc(100% - 1rem);
	flex-wrap: wrap;
	gap: 0.25rem;
	line-height: normal;
	pointer-events: none;
}

.ai-image-label-position--top-left {
	top: var(--aiml-label-offset);
	left: var(--aiml-label-offset);
	justify-content: flex-start;
}

.ai-image-label-position--top-right {
	top: var(--aiml-label-offset);
	right: var(--aiml-label-offset);
	justify-content: flex-end;
}

.ai-image-label-position--bottom-left {
	bottom: var(--aiml-label-offset);
	left: var(--aiml-label-offset);
	justify-content: flex-start;
}

.ai-image-label-position--bottom-right {
	right: var(--aiml-label-offset);
	bottom: var(--aiml-label-offset);
	justify-content: flex-end;
}

/*
 * The badge sits over an unknown photo, so contrast has to hold in the worst case: a
 * blown-out white area behind it. With opaque white text over rgba(0, 0, 0, A):
 *
 *   composite = (1 - A)                        over a white backdrop
 *   L         = ((composite + 0.055) / 1.055) ^ 2.4
 *   ratio     = 1.05 / (L + 0.05)  >=  4.5     ->  A >= 0.535
 *
 * A = 0.55 yields 4.76:1, leaving a little headroom for JPEG artefacts and subpixel
 * rendering. Do not lower it, and do not put opacity on .ai-image-label-overlay: that
 * fades the text as well as the background and invalidates the calculation above.
 *
 * Font size is deliberately small. WCAG defines no minimum size; it only relaxes the
 * threshold to 3:1 for large text (>= 24px, or >= 18.66px bold). Staying small keeps
 * this text in the strict 4.5:1 bucket, which the alpha above already satisfies.
 */
.ai-image-label-badge {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.2em 0.5em;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.35;
	overflow-wrap: break-word;
	white-space: normal;
}

.ai-image-label-description {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.wp-block-cover.ai-image-label-host > .ai-image-label-overlay {
	z-index: 40;
}

/*
 * Windows High Contrast mode support
 */
@media (forced-colors: active) {
	.ai-image-label-badge {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}

@media (max-width: 480px) {
	.ai-image-label-overlay {
		--aiml-label-offset: 0.35rem;
		max-width: calc(100% - 0.7rem);
	}
}