/**
 * _partials/stack-matrix.css — Stack Matrix partial styles.
 *
 * Loaded by src/services.njk via its `styles:` frontmatter array. Lives
 * here (not in pages/services.css) because folding it into services.css
 * would push that file to 842 lines, ~1.7× the 500-line file-size cap —
 * the partial is large enough on its own (448 lines) to warrant a
 * standalone file per the strategy doc's sub-splitting allowance.
 *
 * Markup: `src/_includes/partials/stack-matrix.njk`. Consumed exclusively
 * by services.njk to render the 6-era × N-stack capability matrix below
 * the Toolkit chip-shelf.
 *
 * Extracted from src/assets/css/app.css STACK MATRIX PARTIAL section as
 * part of #147 PR 2 — CSS file split: static pages. Content byte-for-
 * byte preserved.
 */

/* ═════════════════════════════════════════════════════════════════════════
	STACK MATRIX PARTIAL
	Companion CSS for src/_includes/partials/stack-matrix.njk — the
	capability × era cross-tab visualization on /services/. Implements
	the dual rendering called for in the partial:

		- Desktop / tablet (>=640px): the <table> renders as the visible
			matrix — capability rows × era columns, cells contain tech
			stamps.
		- Mobile (<640px): the <table> is visually hidden (still in the
			a11y tree for screen readers); a parallel <div class="innov8-sm-
			stack"> renders the same data as vertical era-cards listing only
			the capabilities active in each era.

	Tones map to brand palette via .innov8-sm-cap-row--{tone} on rows
	+ .innov8-sm-cell--{tone} on cells (era column tone — used for the
	column band) + .innov8-sm-era-header--{tone} on column headers.

	Class prefix: `innov8-sm-`.
	═════════════════════════════════════════════════════════════════════════ */

@layer components {
	.innov8-sm {
		position: relative;
		padding: clamp(72px, 9vw, 112px) 0;
	}

	/* Header — same shape as toolkit's two-column header */
	.innov8-sm-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-sm-eyebrow {
		grid-column: 1 / -1;
		margin-bottom: clamp(14px, 1.6vw, 20px);
	}

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

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

	.innov8-sm-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-sm-header {
			grid-template-columns: 1fr;
			gap: 16px;
			margin-bottom: clamp(32px, 4vw, 48px);
		}
	}

	/* ───── Desktop / tablet matrix table ─────────────────────────── */
	.innov8-sm-matrix-wrap {
		overflow-x: auto;
		margin: 0 calc(-1 * clamp(12px, 2vw, 24px));
		padding: 0 clamp(12px, 2vw, 24px);
	}

	.innov8-sm-matrix {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		min-width: 720px; /* keeps the matrix readable on tablets; overflow-x kicks in below this */
	}

	.innov8-sm-corner-cell {
		background: transparent;
		border: 0;
		min-width: 200px;
	}

	/* Era column headers */
	.innov8-sm-era-header {
		position: relative;
		padding: clamp(12px, 1.4vw, 18px) clamp(10px, 1.4vw, 16px);
		vertical-align: bottom;
		text-align: left;
		font-weight: 400; /* override <th> bold; we tone-code via the title styling */
		--sm-era-fg: var(--color-cyan-300);
		--sm-era-border: rgba(95, 236, 253, 0.4);
		--sm-era-bg: rgba(95, 236, 253, 0.05);
	}

	.innov8-sm-era-header--cyan {
		--sm-era-fg: var(--color-cyan-300);
		--sm-era-border: rgba(95, 236, 253, 0.4);
		--sm-era-bg: rgba(95, 236, 253, 0.05);
	}

	.innov8-sm-era-header--blue {
		--sm-era-fg: var(--color-blue-300);
		--sm-era-border: rgba(93, 126, 255, 0.4);
		--sm-era-bg: rgba(93, 126, 255, 0.05);
	}

	.innov8-sm-era-header--amber {
		--sm-era-fg: var(--color-amber-300);
		--sm-era-border: rgba(245, 158, 11, 0.4);
		--sm-era-bg: rgba(245, 158, 11, 0.05);
	}

	.innov8-sm-era-header--volt {
		--sm-era-fg: var(--color-volt-400);
		--sm-era-border: rgba(204, 255, 0, 0.4);
		--sm-era-bg: rgba(204, 255, 0, 0.05);
	}

	.innov8-sm-era-band {
		height: 2px;
		background: var(--sm-era-fg);
		border-radius: 1px;
		margin-bottom: 10px;
		box-shadow: 0 0 12px var(--sm-era-fg);
	}

	.innov8-sm-era-title {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(13px, 1.3vw, 15px);
		letter-spacing: 0.04em;
		color: var(--sm-era-fg);
		text-transform: uppercase;
		line-height: var(--leading-tight);
	}

	.innov8-sm-era-range {
		margin-top: 4px;
		font-family: var(--font-mono);
		font-size: 10.5px;
		letter-spacing: 0.08em;
		color: var(--fg-tertiary);
	}

	/* Capability rows */
	.innov8-sm-cap-row {
		--sm-cap-fg: var(--color-cyan-300);
		--sm-cap-bg: rgba(95, 236, 253, 0.05);
		--sm-cap-border: rgba(95, 236, 253, 0.18);
	}

	.innov8-sm-cap-row--cyan {
		--sm-cap-fg: var(--color-cyan-300);
		--sm-cap-bg: rgba(95, 236, 253, 0.05);
		--sm-cap-border: rgba(95, 236, 253, 0.18);
	}

	.innov8-sm-cap-row--blue {
		--sm-cap-fg: var(--color-blue-300);
		--sm-cap-bg: rgba(93, 126, 255, 0.05);
		--sm-cap-border: rgba(93, 126, 255, 0.18);
	}

	.innov8-sm-cap-row--amber {
		--sm-cap-fg: var(--color-amber-300);
		--sm-cap-bg: rgba(245, 158, 11, 0.05);
		--sm-cap-border: rgba(245, 158, 11, 0.18);
	}

	.innov8-sm-cap-row--volt {
		--sm-cap-fg: var(--color-volt-400);
		--sm-cap-bg: rgba(204, 255, 0, 0.04);
		--sm-cap-border: rgba(204, 255, 0, 0.18);
	}

	/* Capability label cell (leftmost cell of each row) */
	.innov8-sm-cap-cell {
		padding: clamp(14px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px);
		vertical-align: middle;
		text-align: left;
		border-top: 1px solid var(--border-subtle);
		font-weight: 400;
	}

	.innov8-sm-cap-cell {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.innov8-sm-cap-icon-frame {
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: var(--sm-cap-bg);
		border: 1px solid var(--sm-cap-border);
		color: var(--sm-cap-fg);
	}

	.innov8-sm-cap-icon {
		display: block;
	}

	.innov8-sm-cap-meta {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.innov8-sm-cap-title {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: clamp(13px, 1.3vw, 15px);
		letter-spacing: 0.015em;
		color: var(--fg-primary);
		text-transform: uppercase;
		line-height: var(--leading-tight);
		text-wrap: balance;
	}

	.innov8-sm-cap-years {
		font-family: var(--font-mono);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.1em;
		color: var(--sm-cap-fg);
	}

	/* Data cells */
	.innov8-sm-cell {
		padding: clamp(14px, 1.4vw, 18px) clamp(10px, 1.4vw, 16px);
		vertical-align: middle;
		border-top: 1px solid var(--border-subtle);
		font-family: var(--font-mono);
		font-size: 12px;
		line-height: var(--leading-snug);
		color: var(--fg-secondary);
		--sm-cell-tone-fg: var(--color-cyan-300);
	}

	.innov8-sm-cell--cyan {
		--sm-cell-tone-fg: var(--color-cyan-300);
	}

	.innov8-sm-cell--blue {
		--sm-cell-tone-fg: var(--color-blue-300);
	}

	.innov8-sm-cell--amber {
		--sm-cell-tone-fg: var(--color-amber-300);
	}

	.innov8-sm-cell--volt {
		--sm-cell-tone-fg: var(--color-volt-400);
	}

	.innov8-sm-cell-content {
		display: inline-block;
		max-width: 28ch;
		text-wrap: pretty;
	}

	.innov8-sm-cell--empty {
		color: var(--fg-muted);
	}

	.innov8-sm-cell-empty {
		display: inline-block;
		font-size: 18px;
		line-height: 1;
		opacity: 0.4;
	}

	/* ───── Mobile vertical era-stack ─────────────────────────────── */
	/* Hidden by default on desktop/tablet; revealed at <=639px. The
		table above is hidden at the same breakpoint to avoid duplicate
		content for sighted users. */
	.innov8-sm-stack {
		display: none;
	}

	@media (max-width: 639px) {
		.innov8-sm-matrix-wrap {
			display: none;
		}

		.innov8-sm-stack {
			display: flex;
			flex-direction: column;
			gap: 24px;
		}
	}

	.innov8-sm-stack-era {
		--sm-stack-era-fg: var(--color-cyan-300);
		--sm-stack-era-border: rgba(95, 236, 253, 0.25);
		--sm-stack-era-bg: rgba(95, 236, 253, 0.04);
		padding: 20px 18px;
		border-radius: var(--radius-lg);
		background: var(--sm-stack-era-bg);
		border: 1px solid var(--sm-stack-era-border);
	}

	.innov8-sm-stack-era--cyan {
		--sm-stack-era-fg: var(--color-cyan-300);
		--sm-stack-era-border: rgba(95, 236, 253, 0.25);
		--sm-stack-era-bg: rgba(95, 236, 253, 0.04);
	}

	.innov8-sm-stack-era--blue {
		--sm-stack-era-fg: var(--color-blue-300);
		--sm-stack-era-border: rgba(93, 126, 255, 0.25);
		--sm-stack-era-bg: rgba(93, 126, 255, 0.04);
	}

	.innov8-sm-stack-era--amber {
		--sm-stack-era-fg: var(--color-amber-300);
		--sm-stack-era-border: rgba(245, 158, 11, 0.25);
		--sm-stack-era-bg: rgba(245, 158, 11, 0.04);
	}

	.innov8-sm-stack-era--volt {
		--sm-stack-era-fg: var(--color-volt-400);
		--sm-stack-era-border: rgba(204, 255, 0, 0.25);
		--sm-stack-era-bg: rgba(204, 255, 0, 0.04);
	}

	.innov8-sm-stack-era-header {
		position: relative;
		padding-bottom: 12px;
		margin-bottom: 14px;
		border-bottom: 1px solid var(--sm-stack-era-border);
	}

	.innov8-sm-stack-era-band {
		width: 32px;
		height: 2px;
		background: var(--sm-stack-era-fg);
		border-radius: 1px;
		margin-bottom: 8px;
		box-shadow: 0 0 10px var(--sm-stack-era-fg);
	}

	.innov8-sm-stack-era-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 16px;
		letter-spacing: 0.04em;
		color: var(--sm-stack-era-fg);
		text-transform: uppercase;
		line-height: var(--leading-tight);
	}

	.innov8-sm-stack-era-range {
		margin: 4px 0 0;
		font-family: var(--font-mono);
		font-size: 10.5px;
		letter-spacing: 0.08em;
		color: var(--fg-tertiary);
	}

	.innov8-sm-stack-cap-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.innov8-sm-stack-cap {
		--sm-stack-cap-fg: var(--color-cyan-300);
	}

	.innov8-sm-stack-cap--cyan {
		--sm-stack-cap-fg: var(--color-cyan-300);
	}

	.innov8-sm-stack-cap--blue {
		--sm-stack-cap-fg: var(--color-blue-300);
	}

	.innov8-sm-stack-cap--amber {
		--sm-stack-cap-fg: var(--color-amber-300);
	}

	.innov8-sm-stack-cap--volt {
		--sm-stack-cap-fg: var(--color-volt-400);
	}

	.innov8-sm-stack-cap-head {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 3px;
	}

	.innov8-sm-stack-cap-icon {
		display: inline-flex;
		color: var(--sm-stack-cap-fg);
	}

	.innov8-sm-stack-cap-title {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.04em;
		color: var(--fg-primary);
		text-transform: uppercase;
	}

	.innov8-sm-stack-cap-cell {
		margin: 0 0 0 22px; /* hangs under the icon column */
		font-family: var(--font-mono);
		font-size: 11.5px;
		line-height: var(--leading-base);
		color: var(--fg-secondary);
	}
}