/**
 * _partials/stats-band.css — three-up commitments row.
 *
 * Loaded by src/index.njk + src/about.njk + src/services.njk via their
 * `styles:` frontmatter arrays (shared partial).
 *
 * Markup in src/_includes/partials/stats-band.njk. Three stat cards
 * with prefix/value/suffix + supporting label.
 *
 * Extracted from src/assets/css/app.css STATS BAND section as part of
 * #147 PR 3 — CSS file split: complex pages. Content byte-for-byte
 * preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	STATS BAND
	─────────────────────────────────────────────────────────────────────
	Three-up commitments row. Markup in
	`src/_includes/partials/stats-band.njk`. Numbers per the #48
	"craft + commitments" scope decision (NOT the kit's marketing
	numbers; the hero already owns the credibility framing).

	Class prefix: `innov8-sb-`.
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-sb {
		position: relative;
		padding: clamp(44px, 5.5vw, 72px) 0;
		/* ink-1000 alternation against the ink-950 Capabilities above
			+ ink-950 Recommendations below. The glass-card commitments
			inside the section still provide their own visual lift
			regardless of the band background. */
		background: var(--color-ink-1000);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-sb-header {
		margin-bottom: clamp(24px, 3vw, 36px);
	}

	.innov8-sb-eyebrow {
		margin-bottom: 14px;
	}

	.innov8-sb-title {
		margin: 0;
		max-width: 720px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(22px, 2.6vw, 32px);
		line-height: 1.2;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-sb-grid {
		display: grid;
		gap: clamp(16px, 2vw, 24px);
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.innov8-sb-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 24px;
		min-height: 200px;
		padding: clamp(24px, 3vw, 36px);
		background: var(--glass);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		transition: border-color var(--duration-base) var(--ease-out);
	}

	.innov8-sb-card:hover {
		border-color: var(--border-brand);
	}

	.innov8-sb-value {
		display: flex;
		align-items: baseline;
		gap: 2px;
		font-family: var(--font-mono);
		font-weight: 700;
		font-size: clamp(48px, 6.5vw, 72px);
		line-height: 1;
		letter-spacing: -0.04em;
		font-variant-numeric: tabular-nums;
	}

	.innov8-sb-value-cyan {
		color: var(--accent-spark);
	}

	.innov8-sb-value-amber {
		color: var(--accent-warm);
	}

	.innov8-sb-value-volt {
		color: var(--accent-volt);
	}

	.innov8-sb-suffix,
	.innov8-sb-prefix {
		font-size: 0.45em;
		color: var(--fg-tertiary);
		margin-left: 4px;
	}

	.innov8-sb-prefix {
		margin-left: 0;
		margin-right: 4px;
	}

	.innov8-sb-label {
		margin: 0;
		max-width: 280px;
		font-family: var(--font-sans);
		font-size: var(--text-body-sm);
		line-height: 1.45;
		color: var(--fg-secondary);
		text-wrap: pretty;
	}
}