/**
 * Variant CSS: about--values-icon-band
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: "about us" as a horizontal band of 3-4 core values. A centred
 *   one-line intro (kicker + headline + supporting deck) sits ABOVE a single
 *   row of value cells, each = a thin-line inline SVG icon + a short title + one
 *   line of copy, separated by thin vertical hairlines. This is deliberately
 *   distinct from:
 *     - values-grid (numbered card grid, longer descriptions, no icons)
 *     - mission-vision-values-trio (3 pillars with label + heading + paragraph)
 *   Here it is a light, iconic strip framed by top/bottom hairlines.
 *
 * Centering (A8/A9): the intro group and every centred text block in it (kicker
 *   / headline / deck) keep horizontal-auto margins so the constrained-layout
 *   centring is never overridden into a left pin. Inside each value cell the
 *   icon/title/desc are left-aligned (NOT centred), so they take margin:0 -
 *   no A8/A9 exposure there.
 *
 * KI-020 safety: no --bg-main as foreground anywhere. Icons + titles use
 *   --text-primary, the icon glyph tints to --accent, desc uses
 *   --text-secondary, em accent --accent on the light page ground.
 *
 * Polish: icon has a hover lift + colour transition (wrapped in
 *   prefers-reduced-motion). No interactive controls in this variant, so the
 *   focus-visible ring requirement is N/A (purely editorial text + decor icon).
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --text-*, --space-*, --tracking-*,
 * --leading-*, --divider-primary, --duration-fast, --ease-default).
 * Theme-portable: a dark theme supplies a dark --background + lighter text + the
 * hairlines fade against it.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--values-icon-band
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Inherits the skeleton's fluid section padding. A bottom hairline matches the
   sibling about variants so stacked sections read as a sequence. */
body.aibt-universal .universal-about--values-icon-band {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Intro - centred one-line lead =======================================
   The intro group is a constrained centred group; keep it centred and give it
   breathing room before the values band. */
body.aibt-universal .universal-about--values-icon-band .universal-about__intro {
	margin: 0 auto var(--space-xl) auto;
	text-align: center;
}

/* Kicker - small uppercase label. --text-secondary per the small-text contrast
   rule. Centred direct child -> horizontal margins auto (A8/A9). */
body.aibt-universal .universal-about--values-icon-band .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

/* Headline - display face, primary ink. Size/weight from the block inline
   style. Centred -> margin-inline auto. */
body.aibt-universal .universal-about--values-icon-band h2.universal-about__headline,
body.aibt-universal .universal-about--values-icon-band .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	max-width: 24ch;
	margin: 0 auto !important;
}

body.aibt-universal .universal-about--values-icon-band .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 500);
}

/* Deck - single supporting line. Secondary ink, relaxed leading. Centred ->
   margin-inline auto. */
body.aibt-universal .universal-about--values-icon-band .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 52ch;
	margin: var(--space-md) auto 0 auto !important;
}

/* === The values band ======================================================
   A clean full-width strip. Top + bottom hairlines frame it as a distinct band;
   the columns block lays the value cells in a row. */
body.aibt-universal .universal-about--values-icon-band .universal-about__band {
	margin: 0;
	gap: 0;
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
}

/* Each value column - a thin vertical divider between cells (skip the first).
   Generous vertical padding gives the band presence. */
body.aibt-universal .universal-about--values-icon-band .universal-about__valcol {
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1.1rem, 2.5vw, 1.9rem);
	min-width: 0;
	border-left: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
}

body.aibt-universal .universal-about--values-icon-band .universal-about__valcol:first-child {
	border-left: 0;
}

/* Value group - icon + title + desc stacked, left-aligned. */
body.aibt-universal .universal-about--values-icon-band .universal-about__value {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

/* Icon chip - thin-line glyph, accent tint, hover lift. */
body.aibt-universal .universal-about--values-icon-band .universal-about__value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--accent);
	border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
	border-radius: var(--decor-radius, 10px);
	transition:
		transform var(--duration-fast, 0.18s) var(--ease-default, ease),
		border-color var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-about--values-icon-band .universal-about__value-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* Title - display face, primary ink. */
body.aibt-universal .universal-about--values-icon-band .universal-about__value-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Desc - one line, secondary ink, comfortable measure. */
body.aibt-universal .universal-about--values-icon-band .universal-about__value-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 400 !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* Hover - lift the icon chip + warm its border. */
@media (hover: hover) {
	body.aibt-universal .universal-about--values-icon-band .universal-about__value:hover .universal-about__value-icon {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	}
}

/* === Tablet - keep the row but tighten cell padding ======================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol {
		padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(0.9rem, 2vw, 1.4rem);
	}
}

/* === Mobile - 2x2 grid =====================================================
   The columns block stacks one-per-row at <=781px by default, which would make
   four tall cells. Force a 2x2 layout: rows of two, vertical hairline only
   between the two cells in a row, horizontal hairline between rows. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--values-icon-band .universal-about__band {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol {
		flex: 0 0 50%;
		max-width: 50%;
		box-sizing: border-box;
		border-left: 0;
		border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}

	/* Vertical divider only between the two cells of each row (2nd + 4th). */
	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol:nth-child(2n) {
		border-left: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}

	/* No top hairline on the first row (the band already has a top border). */
	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol:nth-child(1),
	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol:nth-child(2) {
		border-top: 0;
	}
}

/* === Phone - single column ================================================ */
@media (max-width: 480px) {
	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol {
		flex: 0 0 100%;
		max-width: 100%;
		border-left: 0 !important;
	}

	body.aibt-universal .universal-about--values-icon-band .universal-about__valcol:not(:first-child) {
		border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (A5 / KI-003). */
	body.aibt-universal .universal-about--values-icon-band .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Reduced motion - kill the hover lift ================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--values-icon-band .universal-about__value-icon {
		transition: none;
	}

	body.aibt-universal .universal-about--values-icon-band .universal-about__value:hover .universal-about__value-icon {
		transform: none;
	}
}

/* === Editor wrapper - content stays visible in the block editor =========== */
.editor-styles-wrapper .universal-about--values-icon-band .universal-about__band,
.editor-styles-wrapper .universal-about--values-icon-band .universal-about__value {
	opacity: 1 !important;
	transform: none !important;
}