/**
 * RnB AI Disclosure
 *
 * The badge is real text sitting on its own opaque background. It is never a
 * translucent tint over the photo, because a translucent layer cannot promise
 * a contrast ratio against an unknown image.
 *
 * Colours are exposed as custom properties so a site can match its own design.
 * If you override them, you take over responsibility for WCAG 1.4.3: the pair
 * must reach at least 4.5:1. The shipped default is roughly 17:1.
 *
 * The font size floor is enforced with max(), so --rnb-ai-badge-font-size can
 * only ever make the label larger than 14px, never smaller.
 */

/*
 * The badge is normally appended as a sibling of the image and positions
 * against whatever container the theme already positioned. Nothing is wrapped
 * around the image, because a wrapper would become the containing block for an
 * absolutely positioned image and would stop direct child selectors such as
 * `.card > img` from matching.
 */

/* Container of a core block, marked server side. */
.rnb-ai-has-badge {
	position: relative;
}

/*
 * Fallback for images whose container is not positioned. Making an already
 * relative element relative is a no-op, so this only affects containers that
 * would otherwise let the badge escape to a distant ancestor.
 */
:has(> .rnb-ai-badge) {
	position: relative;
}

/*
 * Opt-in wrapper, enabled per context with the rnb_ai_disclosure_wrap filter.
 * Use only where the image sits in normal flow and its container cannot be
 * given a position. It is deliberately not the default; see the README.
 */
.rnb-ai-media {
	position: relative;
	display: inline-block;
	max-inline-size: 100%;
	vertical-align: top;
	/* Removes the inline descender gap without restyling the <img> itself. */
	line-height: 0;
}

.rnb-ai-badge {
	--rnb-ai-badge-bg: #14161a;
	--rnb-ai-badge-fg: #ffffff;
	--rnb-ai-badge-font-size: 0.875rem;
	--rnb-ai-badge-padding-block: 0.35em;
	--rnb-ai-badge-padding-inline: 0.7em;
	--rnb-ai-badge-radius: 0;
	--rnb-ai-badge-offset: 0px;

	position: absolute;
	z-index: 2;
	inset-block-end: var(--rnb-ai-badge-offset);
	inset-inline-start: var(--rnb-ai-badge-offset);

	/* Shrinks to the text on wide images, wraps inside narrow ones. */
	inline-size: max-content;
	max-inline-size: calc(100% - (2 * var(--rnb-ai-badge-offset)));

	box-sizing: border-box;
	margin: 0;
	padding: var(--rnb-ai-badge-padding-block) var(--rnb-ai-badge-padding-inline);
	border: 0;
	border-radius: var(--rnb-ai-badge-radius);

	background-color: var(--rnb-ai-badge-bg);
	color: var(--rnb-ai-badge-fg);

	font-family: inherit;
	font-size: max(var(--rnb-ai-badge-font-size), 0.875rem);
	font-style: normal;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	overflow-wrap: break-word;

	/* Keeps a linked image clickable through the badge. */
	pointer-events: none;
}

/*
 * Image with a caption. The badge is placed in the markup right after the
 * image and before the caption. With the block-end inset left at auto it sits
 * at its static position, the bottom edge of the image, and is lifted from
 * there by its own height plus the offset. Anchoring it to the bottom of the
 * figure would put it on the caption instead.
 */
.rnb-ai-badge--above-caption {
	inset-block-end: auto;
	translate: 0 calc(-100% - var(--rnb-ai-badge-offset));
}

/* Opt-in compact variant, added through rnb_ai_disclosure_badge_classes. */
.rnb-ai-badge--corner {
	--rnb-ai-badge-offset: 0.5rem;
	--rnb-ai-badge-radius: 999px;
}

/*
 * Forced colours (Windows high contrast). The system replaces the background
 * and text colours, which would leave the badge without an edge, so give it
 * one that follows the forced text colour.
 */
@media (forced-colors: active) {
	.rnb-ai-badge {
		border: 1px solid;
	}
}

/*
 * In print there is no image underlay to sit on, so the badge becomes a plain
 * line of text after the image rather than an overlay.
 */
@media print {
	.rnb-ai-badge {
		position: static;
		display: inline-block;
		max-inline-size: 100%;
		border: 1px solid #000;
		background: none;
		color: #000;
		translate: none;
	}

	.rnb-ai-media {
		line-height: inherit;
	}
}