/**
 * Variant CSS: about--values-grid
 * Layer 2 - Path B universal ABOUT variant (mission + core values).
 *
 * Concept: a left-aligned mission intro (kicker + headline + 1-2 line mission)
 * then a row of 3-4 value cards. Each card leads with a small accent index +
 * rule, then a LARGE value name (the focal principle) + short description, so
 * the grid reads as culture/principles rather than a generic feature list.
 *
 * Surface contract: value cards sit on --background-card (lifts clear of base
 * AND --background-alt on every dark theme - brass #242424, lime #1F1F26,
 * vivid #25262E, utility #2C3138) with a hairline edge. No recession on dark.
 * Number = --accent (decorative display), names = --text-primary, desc =
 * --text-secondary. Semantic tokens only; never a hardcoded hex on a theme
 * surface; never color:var(--bg-main) as foreground.
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--values-grid {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* === Mission intro ======================================================== */
body.aibt-universal .universal-about--values-grid .universal-about__intro {
	max-width: 56ch;
	margin: 0 0 clamp(2.5rem, 6vh, 4.5rem) 0;
}

body.aibt-universal .universal-about--values-grid .universal-about__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-about--values-grid h2.universal-about__headline,
body.aibt-universal .universal-about--values-grid .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Signature em-accent on the emphasised headline fragment — matches sibling
   about variants (italic-color theme treatment). */
body.aibt-universal .universal-about--values-grid .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-about--values-grid .universal-about__mission {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* === Values grid ==========================================================
   Mobile-first: cards are full-width and stack. flex-wrap lets them reflow to
   2-up (tablet) and 4-up (desktop) via the flex-basis floors below. The core
   wp:columns row would otherwise force a single cramped row at 4 columns. */
body.aibt-universal .universal-about--values-grid .universal-about__values {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--space-md) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--values-grid .universal-about__value {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 100%;
	padding: var(--space-lg) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	transition: border-color var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-about--values-grid .universal-about__value:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

/* Index eyebrow - decorative accent, deliberately smaller than the value name
   so the PRINCIPLE (name) is the focal point, not the digit. Short accent rule
   beneath anchors the card head. */
body.aibt-universal .universal-about--values-grid .universal-about__value-num {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: var(--text-xl) !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	padding: 0 0 var(--space-sm) 0 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	font-variant-numeric: tabular-nums;
	position: relative;
}

body.aibt-universal .universal-about--values-grid .universal-about__value-num::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.25rem;
	height: 2px;
	background: var(--divider-accent, var(--accent-fade));
}

body.aibt-universal .universal-about--values-grid h3.universal-about__value-name,
body.aibt-universal .universal-about--values-grid .universal-about__value-name {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	/* Sized so long single-word Polish values (Konsekwencja, Partnerstwo) fit
	   on one line in a ~4-up column even in the widest display fonts, instead of
	   breaking mid-word. Smaller than --text-2xl on purpose. */
	font-size: clamp(1.3rem, 1.5vw, 1.55rem) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	/* Never hyphenate / break a value word in the middle — wrap whole words. */
	hyphens: manual;
	overflow-wrap: break-word;
	word-break: normal;
}

body.aibt-universal .universal-about--values-grid .universal-about__value-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;
}

/* === Tablet: 2-up grid (>=560px) ========================================== */
@media (min-width: 560px) {
	body.aibt-universal .universal-about--values-grid .universal-about__value {
		/* two per row, accounting for one gap */
		flex: 1 1 calc(50% - (var(--space-md) / 2));
	}
}

/* === Desktop: 4-up row (>=960px) ========================================== */
@media (min-width: 960px) {
	body.aibt-universal .universal-about--values-grid .universal-about__value {
		/* four per row, accounting for three gaps */
		flex: 1 1 calc(25% - (var(--space-md) * 3 / 4));
	}
}

/* Tighten the wide kicker tracking on phones: 0.24em on a ~12px uppercase
   label fragments words at narrow widths. Cap to a calm 0 / minimal value. */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--values-grid .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Motion respect (also covered by skeleton, kept local + explicit) ===== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--values-grid .universal-about__value {
		transition: none;
	}
	body.aibt-universal .universal-about--values-grid .universal-about__value:hover {
		transform: none;
	}
}

/* === Editor parity - no hover transform / no reveal offset in the canvas === */
.editor-styles-wrapper .universal-about--values-grid .universal-about__value {
	transform: none !important;
}