/**
 * case-studies-list.css — the /case-studies/ index page.
 *
 * Loaded by src/case-studies/index.njk via its `styles:` frontmatter
 * array (alongside _partials/case-study-overlay.css since the list page
 * uses the overlay dialog on its cards).
 *
 * Hybrid-card layout per the #39 scope decision: editorial hero card
 * (first/featured case study), then a 3-column grid of cards re-using
 * the .innov8-fw-card visual language (via the `fwCard` async filter).
 * Class prefix: `innov8-csl-` (page sections + hero card). Filter shelf
 * uses the shared `innov8-filter-` primitive from
 * _partials/filter-shelf.css (extracted in #124 DRY pass).
 *
 * Filter wiring lives in src/assets/js/case-studies-filter.js (loaded
 * via the page's `scripts:` frontmatter). Each `<li class="innov8-csl-
 * item">` carries data-industry / data-decade / data-agency / data-
 * techs attributes the JS engine matches chip selections against.
 *
 * Extracted from src/assets/css/app.css CASE STUDIES LIST + FILTER
 * SHELF section as part of #147 PR 3 — CSS file split: complex pages.
 * Content byte-for-byte preserved at extraction time. Filter shelf
 * subsequently extracted into _partials/filter-shelf.css during #124
 * DRY pass, bringing this file under the 500-line cap (was 523, now
 * 441 — cap exception no longer needed).
 */

/* ─────────────────────────────────────────────────────────────────────
	CASE STUDIES LIST + FILTER SHELF
	─────────────────────────────────────────────────────────────────────
	The `/case-studies/` index page. Markup lives in
	`src/case-studies/index.njk` (the listing) +
	`src/_includes/partials/case-studies-filter.njk` (the chip shelf).
	Behavior lives in `src/assets/js/case-studies-filter.js`.

	Layout shape per the #39 hybrid-card scope decision:

		1. Hero header — title + result-count + intro lead
		2. Filter shelf — 4 chip groups (Industry, Decade, Agency, Tech)
											with `aria-pressed` toggle state, URL-hash backed
		3. Editorial hero card — first case study as a side-by-side
														meta+visual treatment (full-width row)
		4. Grid — remaining case studies in 3-col grid reusing the
							`.innov8-fw-card` macro markup (styling already lives
							in the FEATURED WORK SECTION block above)
		5. Empty state — revealed by the JS engine when no cards match

	Class prefixes:
		• `innov8-csl-`     case-studies-list (page sections + hero card)
		• `innov8-filter-`  shared filter shelf primitive
												(_partials/filter-shelf.css, #124 DRY pass)

	Filter wiring: each `<li class="innov8-csl-item">` carries
	`data-cs-card` so the JS engine can find it, plus space-separated
	`data-industry / data-decade / data-agency / data-techs` value lists
	the engine matches chip selections against. Hidden cards get the
	HTML `hidden` attribute (UA default `display: none`).
	───────────────────────────────────────────────────────────────────── */

@layer components {
	/* ─── Page article frame ────────────────────────────────────────── */
	.innov8-csl {
		position: relative;
		color: var(--fg-primary);
	}

	/* ─── 1. Hero header ────────────────────────────────────────────── */
	/* Top padding floors at 120px so the eyebrow clears the floating
		 glass-pill nav (position: fixed; top: 28px; height: ~70px). */
	.innov8-csl-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-csl-hero-inner {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 32px;
	}

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

	.innov8-csl-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-csl-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;
	}

	/* ─── 2. Filter shelf ───────────────────────────────────────────────
		Extracted to src/assets/css/pages/_partials/filter-shelf.css in #124
		DRY pass. Class prefix migrated from `.innov8-cslf-*` to the canonical
		`.innov8-filter-*` (shared with /clients/). Markup classes renamed
		correspondingly in src/_includes/partials/case-studies-filter.njk. */

	/* ─── Status row + grid section background ─────────────────────────
		Status row controls (count + reset) 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. */

	/* ─── 3 + 4. Grid + items ───────────────────────────────────────── */
	.innov8-csl-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(16px, 2vw, 24px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-csl-grid + .innov8-csl-grid {
		margin-top: clamp(16px, 2vw, 24px);
	}

	.innov8-csl-grid-rest {
		grid-template-columns: 1fr;
	}

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

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

	.innov8-csl-item {
		position: relative;
		display: flex;
	}

	/* The macro-rendered card needs to fill the <li> wrapper so the
		grid cells stay flush; the macro itself uses
		`position: relative` on `.innov8-fw-card` (which we don't
		override) so the stretched-link inside still works. */
	.innov8-csl-item > .innov8-fw-card {
		width: 100%;
	}

	/* ─── Editorial hero card (first item, full-width row) ──────────── */
	.innov8-csl-item-hero {
		/* Hero is its own single-cell row in a 1-col parent grid. */
		display: block;
	}

	.innov8-csl-hero-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		background:
			linear-gradient(180deg, rgba(31, 86, 245, 0.06) 0%, rgba(95, 236, 253, 0.04) 100%), var(--color-ink-900);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		overflow: hidden;
		transition:
			border-color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);
	}

	@media (min-width: 768px) {
		.innov8-csl-hero-card {
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		}
	}

	.innov8-csl-hero-card:hover,
	.innov8-csl-hero-card:focus-within {
		border-color: var(--border-brand);
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
	}

	.innov8-csl-hero-card-meta {
		display: flex;
		flex-direction: column;
		gap: clamp(14px, 1.6vw, 20px);
		padding: clamp(28px, 3.6vw, 48px);
	}

	.innov8-csl-hero-eyebrow {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
	}

	.innov8-csl-hero-eyebrow > span:first-child {
		color: var(--accent-spark);
	}

	/* Industry segment in the hero card eyebrow — amber per the #164 two-
		accent semantic-duality adoption. Industry is categorical metadata
		("here's how to categorize this thing"), distinct from the cyan
		client_name segment which carries the brand-link character. The
		`> span:first-child` rule above paints the client name cyan; this
		rule paints the industry span amber regardless of DOM position. */
	.innov8-csl-hero-industry {
		color: var(--accent-data);
	}

	.innov8-csl-sep {
		color: var(--fg-muted);
	}

	.innov8-csl-hero-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(28px, 3.6vw, 44px);
		line-height: var(--leading-snug);
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-csl-hero-link {
		color: inherit;
		text-decoration: none;
	}

	/* Stretched-link — the `::after` covers the whole card so anywhere-
		 click navigates without nesting block-level children inside `<a>`. */
	.innov8-csl-hero-link::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: auto;
	}

	.innov8-csl-hero-link:focus-visible {
		outline: none;
	}

	.innov8-csl-hero-link:focus-visible::after {
		outline: 2px solid var(--accent-spark);
		outline-offset: -4px;
	}

	.innov8-csl-hero-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-csl-hero-chip {
		display: inline-flex;
		align-items: center;
		padding: 4px 10px;
		border-radius: var(--radius-pill);
		background: rgba(95, 236, 253, 0.1);
		border: 1px solid rgba(95, 236, 253, 0.25);
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--accent-spark);
	}

	.innov8-csl-hero-cta {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-top: 6px;
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		letter-spacing: 0.04em;
		color: var(--accent-spark);
	}

	.innov8-csl-hero-cta-arrow {
		transition: transform var(--duration-base) var(--ease-out);
	}

	.innov8-csl-hero-card:hover .innov8-csl-hero-cta-arrow,
	.innov8-csl-hero-card:focus-within .innov8-csl-hero-cta-arrow {
		transform: translateX(4px);
	}

	/* ─── Hero-card visual side ──────────────────────────────────────── */
	.innov8-csl-hero-card-visual {
		position: relative;
		min-height: 280px;
		background: var(--color-ink-1000);
		overflow: hidden;
	}

	.innov8-csl-hero-card-blob {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(70% 60% at 30% 30%, rgba(31, 86, 245, 0.55) 0%, transparent 65%),
			radial-gradient(60% 50% at 70% 70%, rgba(95, 236, 253, 0.35) 0%, transparent 65%);
		filter: blur(20px);
		transform: scale(1.1);
	}

	.innov8-csl-hero-card-grid {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
		background-size: 40px 40px;
		opacity: 0.5;
		mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent 80%);
		-webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent 80%);
	}

	.innov8-csl-hero-card-badge {
		position: absolute;
		left: 24px;
		bottom: 24px;
		padding: 6px 12px;
		background: rgba(0, 0, 0, 0.55);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: var(--radius-pill);
		border: 1px solid rgba(255, 255, 255, 0.1);
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-secondary);
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-csl-hero-card,
		.innov8-csl-hero-card:hover,
		.innov8-csl-hero-card:focus-within,
		.innov8-csl-hero-cta-arrow,
		.innov8-csl-hero-card:hover .innov8-csl-hero-cta-arrow,
		.innov8-csl-hero-card:focus-within .innov8-csl-hero-cta-arrow {
			transition: none;
			transform: none;
		}
	}

	/* ─── 5. Empty / no-results state ───────────────────────────────────
		Extracted into shared _partials/list-controls.css in #124 DRY
		pass as the canonical .innov8-list-empty / -title / -lead. The
		case-studies treatment WAS the canonical design (more polished
		than the clients-roster variant); both pages now use it. */

	/* ─── Hero card screenshot + fade ───────────────────────────────────
		The first case study's right-side visual panel now renders the
		hero_image (or first gallery image) rather than just the abstract
		blob/gradient. A gradient overlay fades the image from the card
		background color on the left edge to transparent, so the screenshot
		bleeds in from the right and blends into the meta text column.

		Layer order (bottom → top):
			1. innov8-csl-hero-card-blob   — ambient color backdrop (fallback)
			2. innov8-csl-hero-card-grid   — fine dot grid (fallback texture)
			3. innov8-csl-hero-card-img    — actual screenshot
			4. innov8-csl-hero-card-fade   — left-to-transparent gradient
			5. innov8-csl-hero-card-badge  — "Featured · Ongoing" pill (DOM-last)

		On mobile (<768px) where the card stacks vertically the fade runs
		bottom-to-top so the image bleeds upward into the viewport edge
		rather than sideways. */
	.innov8-csl-hero-card-img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		/* Slight dim so the blob color reads through at the edges */
		opacity: 0.75;
		transition: opacity var(--duration-base) var(--ease-out);
	}

	.innov8-csl-hero-card:hover .innov8-csl-hero-card-img,
	.innov8-csl-hero-card:focus-within .innov8-csl-hero-card-img {
		opacity: 0.9;
	}

	.innov8-csl-hero-card-fade {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
		/* Mobile/stacked: fade from bottom so the image blends into the
		   viewport edge above the meta panel below. */
		background: linear-gradient(to top, var(--color-ink-1000) 0%, transparent 50%);
	}

	@media (min-width: 768px) {
		.innov8-csl-hero-card-fade {
			/* Side-by-side layout: fade from left (matching card background)
			   to transparent so the screenshot appears to emerge from behind
			   the meta text column. */
			background: linear-gradient(to right, var(--color-ink-900) 0%, transparent 44%);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-csl-hero-card-img,
		.innov8-csl-hero-card:hover .innov8-csl-hero-card-img,
		.innov8-csl-hero-card:focus-within .innov8-csl-hero-card-img {
			transition: none;
			opacity: 0.75;
		}
	}
}