/**
 * _partials/capabilities.css — home-page Capabilities row.
 *
 * Loaded by src/index.njk via its `styles:` frontmatter array.
 *
 * Three-up grid of practice areas ("Frontend architecture", "Marketing
 * sites", "Product UI"). Markup in src/_includes/partials/capabilities.njk.
 *
 * Extracted from src/assets/css/app.css as part of #147 PR 3 — CSS
 * file split: complex pages. Content byte-for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	CAPABILITIES
	─────────────────────────────────────────────────────────────────────
	Three-up grid of practice areas. Markup lives in
	`src/_includes/partials/capabilities.njk`. Each card: big numeral
	(01/02/03) + title + body. Cards lift slightly + border-color
	shifts to brand-spark on hover.

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

@layer components {
	.innov8-cap {
		position: relative;
		padding: clamp(56px, 7vw, 96px) 0;
		/* ink-950 alternation against the ink-1000 Featured Work above
			and the ink-1000 Stats Band below (Stats Band updated in
			this same pass to ink-1000 to complete the rhythm). */
		background: var(--color-ink-950);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-cap-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 24px;
		margin-bottom: clamp(28px, 3.6vw, 44px);
		flex-wrap: wrap;
	}

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

	.innov8-cap-title {
		margin: 0;
		max-width: 760px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(26px, 3vw, 38px);
		line-height: 1.15;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

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

	.innov8-cap-card {
		display: flex;
		flex-direction: column;
		gap: clamp(12px, 1.6vw, 18px);
		padding: clamp(28px, 3.2vw, 40px);
		background: var(--bg-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		transition:
			border-color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);
	}

	.innov8-cap-card:hover {
		border-color: var(--border-brand);
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}

	.innov8-cap-card-number {
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		font-weight: 500;
		letter-spacing: 0.18em;
		color: var(--accent-spark);
	}

	.innov8-cap-card-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(22px, 2.4vw, 30px);
		line-height: 1.15;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-cap-card-body {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-cap-card,
		.innov8-cap-card:hover {
			transition: none;
			transform: none;
		}
	}
}