/**
 * services.css — Services page styles + the Toolkit partial it consumes.
 *
 * Loaded by src/services.njk via its `styles:` frontmatter array, alongside
 * `pages/_partials/stack-matrix.css` (Stack Matrix is split out because
 * folding it in would push this file to 842 lines, ~1.7× the file-size cap).
 *
 * Two sections:
 *   1. TOOLKIT PARTIAL — `src/_includes/partials/toolkit.njk` (chip-shelf
 *                         of capabilities grouped by accent color)
 *   2. SERVICES PAGE   — services-specific section styling
 *
 * Extracted from src/assets/css/app.css as part of #147 PR 2 — CSS file
 * split: static pages. Content byte-for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	TOOLKIT PARTIAL
	─────────────────────────────────────────────────────────────────────
	Four-group tag inventory partial. Markup in
	`src/_includes/partials/toolkit.njk`. Consumed on `/about/`
	between the "03 / Track record" section and the client-marquee
	partial.

	Each group anchors on a brand-palette tone — cyan / blue /
	amber / volt — via a `.innov8-tk-group--{tone}` modifier class
	that maps the tone-specific values onto five custom properties
	(`--tk-fg`, `--tk-border`, `--tk-bg`, `--tk-hover`, `--tk-rule`)
	the inner elements consume. This keeps the modifier surface
	small (one class per group) while letting the inner dot, label,
	rule, and pills inherit the tone uniformly. Pills are CSP-safe
	(no inline styles, no client-side JS — pure CSS :hover).

	The h2 "TOOLKIT" word has a four-tone linear-gradient text fill
	(cyan → blue → amber → volt) — matches the kit reference's
	"toolkit as a system" visual hook. Falls back to `--fg-primary`
	via the surrounding span text when background-clip isn't
	supported.

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

@layer components {
	.innov8-tk {
		position: relative;
		padding: clamp(72px, 9vw, 112px) 0;
		background: var(--color-ink-950);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	/* Header — eyebrow + h2 (with gradient highlight on "toolkit")
		+ lead paragraph. Two-column layout on desktop (h2 on left,
		lead on right); stacks on mobile. */
	.innov8-tk-header {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(24px, 4vw, 48px);
		align-items: flex-end;
		margin-bottom: clamp(40px, 6vw, 64px);
	}

	.innov8-tk-eyebrow {
		grid-column: 1 / -1;
		margin-bottom: clamp(14px, 1.6vw, 20px);
	}

	.innov8-tk-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: clamp(40px, 5.6vw, 84px);
		line-height: 1;
		letter-spacing: 0.005em;
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-tk-title-grad {
		background: linear-gradient(
			110deg,
			var(--color-cyan-300) 0%,
			var(--color-blue-400) 50%,
			var(--color-amber-400) 85%,
			var(--color-volt-400) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	.innov8-tk-lead {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-base);
		color: var(--color-ink-200);
		max-width: 480px;
		text-wrap: pretty;
	}

	@media (max-width: 820px) {
		.innov8-tk-header {
			grid-template-columns: 1fr;
			gap: 20px;
			margin-bottom: clamp(32px, 4vw, 48px);
		}
	}

	/* Group container — four stacked sections, each tone-themed via
	   a modifier class that sets the five `--tk-*` custom props. */
	.innov8-tk-groups {
		display: flex;
		flex-direction: column;
		gap: clamp(28px, 3.6vw, 40px);
	}

	.innov8-tk-group {
		--tk-fg: var(--color-cyan-300);
		--tk-border: rgba(95, 236, 253, 0.32);
		--tk-bg: rgba(95, 236, 253, 0.06);
		--tk-hover: rgba(95, 236, 253, 0.14);
		--tk-rule: rgba(95, 236, 253, 0.25);
	}

	.innov8-tk-group--cyan {
		--tk-fg: var(--color-cyan-300);
		--tk-border: rgba(95, 236, 253, 0.32);
		--tk-bg: rgba(95, 236, 253, 0.06);
		--tk-hover: rgba(95, 236, 253, 0.14);
		--tk-rule: rgba(95, 236, 253, 0.25);
	}

	.innov8-tk-group--blue {
		--tk-fg: var(--color-blue-300);
		--tk-border: rgba(93, 126, 255, 0.32);
		--tk-bg: rgba(56, 102, 255, 0.06);
		--tk-hover: rgba(56, 102, 255, 0.14);
		--tk-rule: rgba(93, 126, 255, 0.25);
	}

	.innov8-tk-group--amber {
		--tk-fg: var(--color-amber-300);
		--tk-border: rgba(245, 158, 11, 0.32);
		--tk-bg: rgba(245, 158, 11, 0.06);
		--tk-hover: rgba(245, 158, 11, 0.14);
		--tk-rule: rgba(245, 158, 11, 0.25);
	}

	.innov8-tk-group--volt {
		--tk-fg: var(--color-volt-400);
		--tk-border: rgba(204, 255, 0, 0.32);
		--tk-bg: rgba(204, 255, 0, 0.05);
		--tk-hover: rgba(204, 255, 0, 0.12);
		--tk-rule: rgba(204, 255, 0, 0.25);
	}

	/* Group header — dot + label + rule line tailing off to right */
	.innov8-tk-group-header {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 16px;
	}

	.innov8-tk-group-dot {
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: var(--tk-fg);
		box-shadow: 0 0 10px var(--tk-fg);
		flex: 0 0 auto;
	}

	.innov8-tk-group-label {
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--tk-fg);
		white-space: nowrap;
	}

	.innov8-tk-group-rule {
		flex: 1;
		height: 1px;
		background: linear-gradient(90deg, var(--tk-rule), transparent);
	}

	/* Pill list — flex-wrapped tag pills, tone-colored bg + border. */
	.innov8-tk-pills {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.innov8-tk-pill {
		display: inline-flex;
		align-items: center;
		padding: 8px 14px;
		font-family: var(--font-mono);
		font-size: 12.5px;
		font-weight: 500;
		letter-spacing: 0.01em;
		color: var(--tk-fg);
		background-color: var(--tk-bg);
		border: 1px solid var(--tk-border);
		border-radius: 6px;
		cursor: default;
		white-space: nowrap;
		transition:
			background-color var(--duration-base) var(--ease-out),
			border-color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.innov8-tk-pill:hover {
		background-color: var(--tk-hover);
		transform: translateY(-1px);
	}
}

/* ─────────────────────────────────────────────────────────────────────
	SERVICES PAGE
	─────────────────────────────────────────────────────────────────────
	The /services/ long-form page. Markup in `src/services.njk`, data
	in `_data/services.json`. Six service cards each with tagline +
	description + deliverables checklist + representative case-study
	links. Embedded stats-band + cta-banner for visual rhythm.

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

@layer components {
	.innov8-srv {
		position: relative;
		color: var(--fg-primary);
	}

	/* Hero header CSS lives in the PAGE HEADER PARTIAL block (in shared.css
		the ABOUT PAGE section) — `.innov8-page-header-*` rules serve
		about / services / recs / contact uniformly. */

	/* ─── Services list section ─────────────────────────────────────── */
	.innov8-srv-list-section {
		padding: clamp(56px, 7vw, 96px) 0;
		background: var(--color-ink-1000);
	}

	.innov8-srv-list {
		display: flex;
		flex-direction: column;
		gap: clamp(24px, 3vw, 36px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ─── Service card ──────────────────────────────────────────────── */
	.innov8-srv-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(24px, 3vw, 32px);
		padding: clamp(28px, 3.6vw, 44px);
		background: var(--bg-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		scroll-margin-top: 140px; /* anchor-link landing space below the nav */
		transition: border-color var(--duration-base) var(--ease-out);
	}

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

	@media (min-width: 920px) {
		.innov8-srv-card {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		}
	}

	.innov8-srv-card-header {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.innov8-srv-card-eyebrow {
		/* No explicit margin — gap handles it inside the header flex. */
	}

	.innov8-srv-card-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(24px, 2.8vw, 36px);
		line-height: 1.1;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-srv-card-body {
		display: flex;
		flex-direction: column;
		gap: clamp(16px, 2vw, 20px);
	}

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

	.innov8-srv-card-subhead {
		margin: clamp(20px, 2.4vw, 28px) 0 12px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--accent-spark);
	}

	/* ─── Deliverables checklist ────────────────────────────────────── */
	.innov8-srv-card-deliverables-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-srv-card-deliverable {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: 1.4;
		color: var(--fg-secondary);
	}

	.innov8-srv-card-deliverable-mark {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		margin-top: 2px;
		border-radius: var(--radius-pill);
		background: rgba(95, 236, 253, 0.12);
		color: var(--accent-spark);
		font-size: 12px;
		font-weight: 700;
	}

	/* ─── Representative case studies ───────────────────────────────── */
	.innov8-srv-card-cases-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-srv-card-case-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		font-weight: 500;
		color: var(--accent-spark);
		text-decoration: none;
		transition: gap var(--duration-base) var(--ease-out);
	}

	.innov8-srv-card-case-link:hover,
	.innov8-srv-card-case-link:focus-visible {
		gap: 12px;
		outline: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-srv-card,
		.innov8-srv-card:hover,
		.innov8-srv-card-case-link,
		.innov8-srv-card-case-link:hover,
		.innov8-srv-card-case-link:focus-visible {
			transition: none;
			gap: 8px;
		}
	}
}