/**
 * Variant CSS: partners--become-partner-cta
 *
 * Recruitment band inviting new partners — dark surface with kicker, headline,
 * three perk bullets and a primary + ghost CTA pair. Distinct from the listing
 * variants: this asks visitors to join, not displays existing partners. Dark
 * surface = --background-dark + --text-on-dark; the headline em uses an
 * accent→on-dark lift (KI-020 safe, never --bg-main as foreground). Buttons and
 * layout stack on mobile. Third variant of `partners`.
 */

body.aibt-universal .universal-partners--become-partner-cta {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Dark panel. */
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__inner {
	background: var(--background-dark, #141414);
	border-radius: var(--decor-radius, 18px);
	padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3.4rem) !important;
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	/* Accent lifted toward on-dark so it stays legible on the dark panel. */
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff)) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__headline {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 auto var(--space-md) auto !important;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__headline em {
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff)) !important;
	font-style: italic;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-on-dark, #fff) !important;
	opacity: 0.82;
	margin: 0 auto var(--space-lg) auto !important;
}

/* Perk bullets — centered list with custom accent markers. */
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__perks {
	list-style: none !important;
	max-width: 32rem;
	margin: 0 auto var(--space-lg) auto !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	text-align: left;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__perks li {
	position: relative;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	color: var(--text-on-dark, #fff) !important;
	opacity: 0.9;
	padding-left: 1.8rem;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__perks li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff));
}

/* CTA pair. */
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-wrap {
	gap: 0.8rem !important;
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #fff) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--text-base) !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	padding: 0.85rem 1.9rem !important;
	border: none !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-2px);
}

/* Ghost CTA — outline on the dark panel. */
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-secondary .wp-block-button__link {
	background: transparent !important;
	color: var(--text-on-dark, #fff) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--text-base) !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	padding: 0.85rem 1.9rem !important;
	border: 1px solid color-mix(in srgb, var(--on-dark, #fff) 38%, transparent) !important;
	transition: border-color var(--duration-fast, 0.18s) var(--ease-default, ease),
		background var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-secondary .wp-block-button__link:hover {
	border-color: color-mix(in srgb, var(--on-dark, #fff) 70%, transparent) !important;
	background: color-mix(in srgb, var(--on-dark, #fff) 8%, transparent) !important;
}

/* Keyboard focus ring — on-dark lift so it reads on the dark panel; a11y, no
   visual regression on mouse use. */
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta .wp-block-button__link:focus-visible,
body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-secondary .wp-block-button__link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--accent) 55%, var(--on-dark, #fff));
	outline-offset: 2px;
	border-radius: var(--decor-radius-pill, 999px);
}

/* Mobile: stack buttons full width, ease padding. */
@media (max-width: 781px) {
	body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-wrap {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}
	body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-wrap .wp-block-button {
		width: 100%;
	}
	body.aibt-universal .universal-partners--become-partner-cta .universal-partners__cta-wrap .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Cap tracking at the smallest breakpoint — A5 clipping guard. */
@media (max-width: 640px) {
	body.aibt-universal .universal-partners--become-partner-cta .universal-partners__kicker {
		letter-spacing: 0 !important;
	}
}