/**
 * Variant CSS: offer--icon-cards-3col
 * Layer 2 - Path B universal offer variant (authored 2026-05-29).
 *
 * Concept: the classic premium 3-up SERVICE CARDS row. Each card carries an
 * accent icon chip + service title (h3) + 2-3 line description + a subtle
 * "learn more" text-link. Generous cards, resting elevation, hover lift +
 * accent edge. The single most common high-quality services layout.
 *
 * Differentiator vs sibling offer variants:
 *   - case-studies-with-metrics: photo cards + quantified metric.
 *   - numbered-grid-6-capabilities: 6 text cards w numbered index (no icon/link).
 *   - pricing-list-menu-style: stacked text price list (no cards).
 *   THIS one: 3 icon cards + per-card text-link CTA.
 *
 * Tokens: semantic only (Layer 2 API). Cards sit on --background-card so they
 * LIFT (not recede) on dark themes (brass 0x242424 / lime 0x1F1F26 / vivid
 * 0x25262E / utility 0x2C3138 all clear their base); on white themes the border
 * + resting shadow carry the elevation. Icon chip = --accent-fade tint + --accent
 * glyph. Link colour = --accent on the card surface (AA in 8/9 themes; the
 * light-industrial-orange accent is a known theme-level small-text ceiling).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--icon-cards-3col {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Constrained-layout direct children inherit `margin-inline:auto !important`
   (centres them). Capping the intro width WITHOUT resetting that margin would
   centre the narrow intro while the full-width card row stays flush-left, so
   the left edges misalign. Pin the intro flush-left so its kicker + headline
   share the card row's left edge. */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__intro {
	margin-block: 0 clamp(3rem, 7vh, 5rem);
	margin-inline: 0 auto !important;
	max-width: 34ch;
}

/* Kicker: uppercase tracked accent, matches sibling offer variants. */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__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;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* == Cards row == */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__cards {
	gap: clamp(1.25rem, 2.5vw, 2rem) !important;
	align-items: stretch !important;
}

/* Card: vertical flex so the link anchors the bottom edge and every card in
   the row shares an equal height regardless of copy length. */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	box-shadow: var(--decor-shadow, none);
	position: relative;
	overflow: hidden;
	transition:
		border-color var(--duration-fast) var(--ease-snappy),
		box-shadow var(--duration-fast) var(--ease-snappy),
		transform var(--duration-fast) var(--ease-snappy);
}

/* Accent top edge: hidden at rest, scales in from the left on hover so the
   card reads as a deliberate, interactive surface (not a static box). */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card:hover {
	border-color: var(--accent);
	box-shadow: var(--decor-shadow-elevated, none);
	transform: translateY(-4px);
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card:hover::before {
	transform: scaleX(1);
}

/* Turn the card border accent when a child link is keyboard-focused, so the
   active card is unmistakable (the link keeps the skeleton focus ring). */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card:focus-within {
	border-color: var(--accent);
}

/* == Icon chip: accent-tinted square, vivid accent glyph (stroke inherits
   currentColor). The persistent accent identity for each card. == */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.25rem, 5vw, 3.75rem);
	height: clamp(3.25rem, 5vw, 3.75rem);
	flex: 0 0 auto;
	background: var(--accent-fade);
	border-radius: var(--decor-radius, 0px);
	color: var(--accent);
	margin-bottom: var(--space-md);
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__icon svg {
	width: 50%;
	height: 50%;
	display: block;
}

/* == Card title == */
body.aibt-universal .universal-offer--icon-cards-3col h3.universal-offer__card-title,
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-xl) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

/* == Card description == */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 38ch;
}

/* == Learn-more link: a real styled text-link affordance (underline + arrow,
   hover nudge). Pushed to the card's bottom edge via margin-top:auto so links
   align across the row. NOT a filled pill: keeps the section's CTA hierarchy
   subordinate to the page's primary conversion band. == */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card-cta {
	margin-top: auto;
	padding-top: var(--space-md);
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link {
	background: transparent !important;
	color: var(--accent) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.3 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--duration-fast) var(--ease-snappy);
}

/* Arrow: appended decoratively (CSS escape for the right-arrow glyph) so the
   bound text stays clean; nudges right on hover. */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.1em;
	line-height: 1;
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link:hover {
	color: var(--accent-hover, var(--accent)) !important;
	text-decoration-thickness: 2px;
}

body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link:hover::after {
	transform: translateX(0.25rem);
}

/* Keyboard focus ring on the learn-more link itself (the card also accents its
   border via :focus-within, but the link needs its own visible affordance). */
body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* == Responsive: stack to a single column ==
   Columns block stacks at its own 781px breakpoint; force it for parity so
   gap + alignment stay under our control. */
@media (max-width: 781px) {
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__cards {
		flex-direction: column !important;
		gap: 1.25rem !important;
	}
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card {
		width: 100% !important;
	}
}

/* Cap uppercase tracking on small screens: wide letter-spacing reads as gaps
   at narrow widths. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__kicker {
		letter-spacing: 0 !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card,
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card::before,
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link,
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link::after {
		transition: none;
	}
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card:hover {
		transform: none;
	}
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__card:hover::before {
		transform: scaleX(1);
	}
	body.aibt-universal .universal-offer--icon-cards-3col .universal-offer__link .wp-block-button__link:hover::after {
		transform: none;
	}
}

/* == Editor wrapper: hover-only states are inert in the editor; ensure the
   accent edge is not stuck visible and cards render at rest. == */
.editor-styles-wrapper .universal-offer--icon-cards-3col .universal-offer__card::before {
	transform: scaleX(0);
}