/**
 * Variant CSS: promo--ribbon-strip
 *
 * Slim, full-width promotional ribbon laid out on a single line: a small label
 * tag, the offer text with an inline detail (e.g. a discount code), and a CTA to
 * the right. The whole strip sits on a dark accent-mixed band so it reads as a
 * loud announcement bar; on it everything is on-dark text. Per KI-020 we never
 * use --bg-main as foreground: body text is --text-on-dark (white), and the tag
 * / detail use an accent→on-dark lift so they stay visible even when --accent
 * equals the dark surface. The CTA inverts to a light pill for contrast. Wraps
 * and centres on mobile. Part of the `promo` role.
 */

body.aibt-universal .universal-promo--ribbon-strip {
	padding-block: calc(clamp(0.6rem, 1.6vw, 1rem) * var(--density, 1));
}

/* The ribbon band. */
body.aibt-universal .universal-promo--ribbon-strip .universal-promo__ribbon {
	gap: clamp(0.7rem, 2vw, 1.4rem) !important;
	padding: clamp(0.75rem, 2vw, 1.05rem) clamp(1rem, 3vw, 1.8rem);
	border-radius: var(--decor-radius-pill, 999px);
	background: color-mix(in srgb, var(--accent) 30%, var(--background-dark, #141414));
	border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

/* Label tag. */
body.aibt-universal .universal-promo--ribbon-strip .universal-promo__tag {
	flex: 0 0 auto;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--background-dark, #141414) !important;
	margin: 0 !important;
	padding: 0.28rem 0.7rem;
	border-radius: var(--decor-radius-pill, 999px);
	/* High-contrast chip: accent lifted toward white so dark tag text reads. */
	background: color-mix(in srgb, var(--accent) 70%, var(--on-dark, #ffffff));
}

/* Offer line: headline + inline detail. */
body.aibt-universal .universal-promo--ribbon-strip .universal-promo__line {
	gap: clamp(0.4rem, 1.4vw, 0.85rem) !important;
	min-width: 0;
}

body.aibt-universal .universal-promo--ribbon-strip .universal-promo__headline {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	color: var(--text-on-dark, #ffffff) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-promo--ribbon-strip .universal-promo__detail {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	color: color-mix(in srgb, var(--accent) 55%, var(--on-dark, #ffffff)) !important;
	margin: 0 !important;
	padding: 0.18rem 0.6rem;
	border-radius: var(--decor-radius, 8px);
	border: 1px dashed color-mix(in srgb, var(--on-dark, #ffffff) 40%, transparent);
}

/* Inline CTA — light pill for contrast on the dark ribbon. */
body.aibt-universal .universal-promo--ribbon-strip .universal-promo__cta .wp-block-button__link {
	display: inline-block;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	padding: 0.5rem 1.2rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	background: var(--on-dark, #ffffff) !important;
	color: var(--background-dark, #141414) !important;
	border: 1px solid var(--on-dark, #ffffff) !important;
	transition: opacity var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-promo--ribbon-strip .universal-promo__cta .wp-block-button__link:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* Keyboard focus ring (a11y) — on-dark colour stays visible on the dark ribbon. */
body.aibt-universal .universal-promo--ribbon-strip .universal-promo__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--on-dark, #ffffff);
	outline-offset: 2px;
	border-radius: inherit;
}

/* Mobile: keep centred, wrap, cap uppercase tracking (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-promo--ribbon-strip .universal-promo__ribbon {
		border-radius: clamp(14px, 4vw, 20px);
	}
	body.aibt-universal .universal-promo--ribbon-strip .universal-promo__tag {
		letter-spacing: 0.04em !important;
	}
	body.aibt-universal .universal-promo--ribbon-strip .universal-promo__line {
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-promo--ribbon-strip .universal-promo__cta .wp-block-button__link {
		transition: none;
	}
}