/**
 * clients-list.css — the /clients/ index page.
 *
 * Loaded by src/clients/index.njk via its `styles:` frontmatter array.
 *
 * Logo-forward 3-column card grid that collapses to 2 → 1 columns at
 * narrower breakpoints. No filter shelf in iteration 1 (per the #41
 * scope decision — 16 clients is a small enough set to scan visually).
 * Class prefix: `innov8-cl-`.
 *
 * Extracted from src/assets/css/app.css CLIENTS LIST section as part
 * of #147 PR 3 — CSS file split: complex pages. Content byte-for-byte
 * preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	CLIENTS LIST
	─────────────────────────────────────────────────────────────────────
	The `/clients/` index page. Markup in `src/clients/index.njk`.
	Logo-forward 3-col card grid (collapses to 2 → 1 on narrower
	viewports). Each card: industry tick (top-right), logo (center),
	name + case-study count (bottom). Cards lift + border-shift to
	brand-spark on hover.

	No filter shelf in iteration 1 per the #41 scope decision (16
	clients fit in a single view; case-studies index already owns
	the heavy filter UI).

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

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

	/* ─── Hero header ───────────────────────────────────────────────── */
	/* Top padding floors at 120px so the eyebrow clears the floating
		 glass-pill nav (position: fixed; top: 28px; height: ~70px). */
	.innov8-cl-hero {
		position: relative;
		padding: clamp(120px, 11vw, 160px) 0 clamp(32px, 4vw, 48px);
		background:
			radial-gradient(80% 60% at 20% 0%, rgba(31, 86, 245, 0.14), transparent 60%),
			radial-gradient(60% 50% at 90% 20%, rgba(95, 236, 253, 0.06), transparent 60%), var(--color-ink-1000);
	}

	.innov8-cl-hero-inner {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 32px;
	}

	.innov8-cl-eyebrow {
		margin-bottom: clamp(18px, 2vw, 24px);
	}

	.innov8-cl-title {
		margin: 0;
		max-width: 22ch;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--text-h1);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-cl-lead {
		margin: clamp(20px, 2.4vw, 28px) 0 0;
		max-width: 64ch;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	/* ─── Status row + grid section background ─────────────────────────
		Status row controls (count + reset + arrow-link) AND the section
		wrapper (.innov8-list-section) all extracted into shared
		_partials/list-controls.css in #124 DRY pass. Markup uses
		.innov8-list-* canonical classes; no rules live here. Bottom-
		padding standardized on case-studies' tighter clamp (was 9vw on
		clients, now 8vw — design-DRY convergence per Mike's call). */

	/* ─── 3-col grid → 2-col → 1-col ────────────────────────────────── */
	.innov8-cl-grid {
		display: grid;
		gap: clamp(12px, 1.4vw, 16px);
		grid-template-columns: 1fr;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 580px) {
		.innov8-cl-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 980px) {
		.innov8-cl-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.innov8-cl-item {
		display: flex;
	}

	/* ─── Client card ───────────────────────────────────────────────── */
	.innov8-cl-card {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 220px;
		padding: 28px 24px 22px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		backdrop-filter: blur(16px) saturate(140%);
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		color: inherit;
		text-decoration: none;
		transition:
			background var(--duration-base) var(--ease-out),
			border-color var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.innov8-cl-card:hover,
	.innov8-cl-card:focus-visible {
		background: linear-gradient(180deg, rgba(95, 236, 253, 0.06), rgba(255, 255, 255, 0.01));
		border-color: var(--border-brand);
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
		outline: none;
	}

	/* ─── Industry tick top-right ─────────────────────────────────────
		Amber per the #164 two-accent semantic-duality adoption — industry
		is categorical metadata, not an interactive element. */
	.innov8-cl-card-industry {
		position: absolute;
		top: 14px;
		right: 14px;
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent-data);
	}

	/* ─── Logo block (center, height-anchored) ──────────────────────── */
	.innov8-cl-card-logo-wrap {
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: var(--fg-secondary);
		transition: color var(--duration-base) var(--ease-out);
	}

	.innov8-cl-card:hover .innov8-cl-card-logo-wrap,
	.innov8-cl-card:focus-visible .innov8-cl-card-logo-wrap {
		color: var(--accent-spark);
	}

	/* See note on .innov8-cm-logo above — silhouette filter dropped
		because several client logo files lack alpha channels and were
		rendering as solid white rectangles. Natural colors instead. */
	.innov8-cl-card-logo {
		max-height: 60px;
		max-width: 260px;
		width: auto;
		height: auto;
		object-fit: contain;
		opacity: 0.85;
		transition: opacity var(--duration-base) var(--ease-out);
	}

	.innov8-cl-card:hover .innov8-cl-card-logo,
	.innov8-cl-card:focus-visible .innov8-cl-card-logo {
		opacity: 1;
	}

	.innov8-cl-card-fallback {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(20px, 2vw, 26px);
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
	}

	/* ─── Bottom meta (name + count) ────────────────────────────────── */
	.innov8-cl-card-meta {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding-top: 8px;
		border-top: 1px solid var(--border-subtle);
	}

	.innov8-cl-card-name {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--text-body-lg);
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
	}

	.innov8-cl-card-count {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
	}

	.innov8-cl-card-count-empty {
		color: var(--fg-muted);
	}

	.innov8-cl-card-arrow {
		transition: transform var(--duration-base) var(--ease-out);
	}

	.innov8-cl-card:hover .innov8-cl-card-arrow,
	.innov8-cl-card:focus-visible .innov8-cl-card-arrow {
		transform: translateX(3px);
		color: var(--accent-spark);
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-cl-card,
		.innov8-cl-card:hover,
		.innov8-cl-card:focus-visible,
		.innov8-cl-card-arrow,
		.innov8-cl-card:hover .innov8-cl-card-arrow,
		.innov8-cl-card:focus-visible .innov8-cl-card-arrow {
			/* Arrow-link reduced-motion override now lives in
				_partials/list-controls.css alongside the shared
				.innov8-list-arrow-link rules (#124 DRY pass). */
			transition: none;
			transform: none;
		}
	}

	/* ─── Industry filter shelf ───────────────────────────────────────
		Extracted to src/assets/css/pages/_partials/filter-shelf.css in
		#124 DRY pass. Class prefix migrated from `.innov8-clf-*` to the
		canonical `.innov8-filter-*` (shared with /case-studies/). Markup
		classes renamed correspondingly in src/clients/index.njk's inline
		filter shelf section. Behavior + JS still lives inline at the
		bottom of src/clients/index.njk; the data-cl-* attributes on the
		chip buttons + the data-industry attr on the .innov8-cl-item
		wrappers are what the engine matches. */

	/* ─── Reset button + empty-state panel ──────────────────────────────
		Extracted into shared _partials/list-controls.css in #124 DRY pass
		as the canonical .innov8-list-* primitive. The case-studies-list
		design was the canonical winner — more polished + carries more
		brand intent (cyan-tinted reset, uppercase bold empty-title,
		bg-card panel background). The clients roster picks up the same
		treatment — that's the intended outcome of standardization, not
		a regression. */
}