/*
 * BS360 AI-Kennzeichnung: frontend styles.
 *
 * Static layout rules live here (cacheable across pages); dynamic values
 * (color, opacity, min/max size from settings) arrive as CSS custom
 * properties via wp_add_inline_style() (see class-bs360-aid-loader.php).
 *
 * @since 1.0.0
 * @since 1.0.1 Removed .bs360-aid-wrapper: an extra wrapper <div> broke
 * normal theme layouts around <figure>/<figcaption> markup. The render
 * class (class-bs360-aid-render.php, wrap_with_icon()) now applies
 * position:relative directly to the block's own root element via
 * WP_HTML_Tag_Processor (class bs360-aid-anchor) and inserts the icon as
 * the last child before that element's own closing tag, so position:absolute
 * on the icon resolves against that element. Void/replaced elements (img,
 * video, iframe) can't contain child nodes, so those get a minimal
 * .bs360-aid-inline-anchor wrapper covering only that one element instead.
 */

.bs360-aid-anchor {
	position: relative;
	display: inline-block;
}

/* Since 1.0.1: minimal wrapper used only around void/replaced elements
   (img, video, iframe) that can't contain the icon as a child directly. */
.bs360-aid-inline-anchor {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.bs360-aid-inline-anchor > img,
.bs360-aid-inline-anchor > video,
.bs360-aid-inline-anchor > iframe {
	display: block;
	max-width: 100%;
}

.bs360-aid-icon {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	/* Since 1.0.6: height-based sizing instead of width-based. The two SVGs
	   share the same viewBox height (566.93) but differ in viewBox width
	   (the "vollständig generiert" pill is wider since its text is longer)
	   — sizing by a fixed width made the two icon types render at visibly
	   different heights next to each other. Fixing the height and letting
	   width follow the SVG's own aspect ratio keeps both icon types at a
	   consistent, comparable height, matching the settings field which
	   the person configuring this actually reads as a height value.
	   Since 1.0.9: replaced the clamp() with a fixed "2.2vw" midpoint with
	   a calc() that interpolates linearly between the configured min and
	   max height across a 375px-1920px viewport range. A fixed vw factor
	   only happened to roughly fit the *default* 24-32px range — for any
	   other min/max the person configures in settings (icon sizes are
	   user-configurable from 1-200px), a fixed vw factor scales completely
	   independently of those values. With the old formula, at min=24/max=32,
	   every viewport width below ~1090px landed exactly on min-size (the
	   icon was effectively always at its smallest on mobile and most
	   desktop widths, never smoothly scaling) — this calc() scales
	   proportionally between whatever min/max is configured, at any
	   viewport width, and correctly stays constant if min equals max. */
	height: calc(var(--bs360-aid-min-size, 24px) + (var(--bs360-aid-max-size, 32px) - var(--bs360-aid-min-size, 24px)) * clamp(0, (100vw - 375px) / 1545px, 1));
	width: auto;
	line-height: 0;
	pointer-events: none;
}

.bs360-aid-icon svg {
	display: block;
	height: 100%;
	width: auto;
}

/* Since 1.0.0: opacity applies only to the pill shape, never to the text,
   matching the official EU icon's own transparent variants (see 7.6). */
.bs360-aid-icon .bs360-aid-pill {
	fill: var(--bs360-aid-color, #3F4D55);
	opacity: var(--bs360-aid-opacity, 1);
}

.bs360-aid-icon .bs360-aid-text {
	fill: #fff;
}

/* Corner positions: relative to the image/video container, so they remain
   responsive as long as the container keeps a stable aspect ratio. */
.bs360-aid-pos-top-left {
	top: 0.5em;
	left: 0.5em;
}

.bs360-aid-pos-top-right {
	top: 0.5em;
	right: 0.5em;
}

.bs360-aid-pos-bottom-left {
	bottom: 0.5em;
	left: 0.5em;
}

.bs360-aid-pos-bottom-right {
	bottom: 0.5em;
	right: 0.5em;
}

.bs360-aid-embed-caption {
	margin: 0.5em 0 0;
	font-size: 0.85rem;
	color: #3F4D55;
}