/**
 * Variant CSS: contact--dark-channels-band
 *
 * A dark, full-bleed contact band: a lead block (kicker + headline + one line +
 * CTA) on the left, a column of channel rows (phone / email / Messenger /
 * address) — each an icon tile + label + value — on the right. No form. The
 * reversed colour scheme gives the section the weight of a closing invitation.
 * Always-dark surface like the footer, so body text is --text-on-dark (white);
 * the kicker, channel labels, icon tiles and the CTA use an accent->on-dark lift
 * so they stay visible even in themes where --accent equals the dark surface
 * (KI-020). Stacks to one column on mobile. Part of the `contact` role.
 */

body.aibt-universal .universal-contact--dark-channels-band {
	background: var(--background-dark, #141414);
	color: var(--text-on-dark, #ffffff);
	padding-block: calc(clamp(3.6rem, 7.5vw, 6rem) * var(--density, 1));
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cols {
	gap: clamp(var(--space-lg), 5vw, var(--space-2xl, 4rem));
	align-items: center;
}

/* ── Lead column ───────────────────────────────────────────────────── */
body.aibt-universal .universal-contact--dark-channels-band .universal-contact__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 lift: stays legible even when --accent ≈ the dark surface (KI-020). */
	color: color-mix(in srgb, var(--accent) 62%, var(--on-dark, #ffffff)) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__headline {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark, #ffffff) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-on-dark, #ffffff) !important;
	opacity: 0.82;
	margin: 0 0 var(--space-lg) 0 !important;
	max-width: 42ch;
}

/* CTA: accent->on-dark lift so the fill never collapses into the dark band. */
body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta {
	margin: 0;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta .wp-block-button__link {
	background: color-mix(in srgb, var(--accent) 80%, var(--on-dark, #ffffff)) !important;
	color: var(--background-dark, #141414) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	padding: 1rem 2.2rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	border: none !important;
	min-height: var(--target-min, 44px);
	transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta .wp-block-button__link:hover {
	background: var(--on-dark, #ffffff) !important;
	transform: translateY(-2px);
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta .wp-block-button__link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--accent) 60%, var(--on-dark, #ffffff));
	outline-offset: 3px;
	border-radius: var(--decor-radius-pill, 999px);
}

/* ── Channel rows ──────────────────────────────────────────────────── */
body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channelscol {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each row: icon tile + body, divided by a faint hairline on the dark surface. */
body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel {
	gap: clamp(0.9rem, 2vw, 1.3rem) !important;
	align-items: center;
	padding: clamp(0.9rem, 2.4vw, 1.3rem) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--on-dark, #ffffff) 14%, transparent);
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channelscol > .universal-contact__channel:first-child {
	padding-top: 0;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channelscol > .universal-contact__channel:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Icon tile: accent-tinted square, lifted off the dark surface (KI-020-safe). */
body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--decor-radius);
	background: color-mix(in srgb, var(--accent) 24%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #ffffff));
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-icon svg {
	display: block;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-body {
	min-width: 0;
	gap: 0.15rem;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: color-mix(in srgb, var(--accent) 55%, var(--on-dark, #ffffff)) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-value {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 500;
	line-height: 1.3 !important;
	color: var(--text-on-dark, #ffffff) !important;
	margin: 0 !important;
	overflow-wrap: anywhere;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-contact--dark-channels-band .universal-contact__leadcol {
		margin-bottom: var(--space-lg);
	}
}

/* Cap letter-spacing on small screens (avoids cramped uppercase kicker/labels). */
@media (max-width: 640px) {
	body.aibt-universal .universal-contact--dark-channels-band .universal-contact__kicker,
	body.aibt-universal .universal-contact--dark-channels-band .universal-contact__channel-label {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* Respect reduced-motion: neutralize the CTA lift transform. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta .wp-block-button__link {
		transition: none !important;
	}
	body.aibt-universal .universal-contact--dark-channels-band .universal-contact__cta .wp-block-button__link:hover {
		transform: none;
	}
}
