/**
 * _partials/case-study-overlay.css — case-study preview dialog.
 *
 * Loaded by FIVE callsites via their `styles:` frontmatter / directory
 * data cascade:
 *   1. src/index.njk                                    (home FW grid)
 *   2. src/case-studies/index.njk                       (CSL grid)
 *   3. src/case-studies/case-studies.json (cascade)     (detail pages)
 *   4. src/_includes/layouts/in-development-case-study.njk (Phlip)
 *   5. src/clients/clients.json (cascade)               (client detail)
 *
 * Modal dialog shown when clicking a case-study card — eager-inline
 * <dialog> per featured card on the home page; deferred-render on
 * other pages via the data-cs-overlay-grid attribute + click handler.
 *
 * Markup in src/_includes/partials/case-study-overlay.njk. Class
 * prefix: `innov8-cso-`.
 *
 * Extracted from src/assets/css/app.css CASE STUDY OVERLAY section
 * as part of #147 PR 3 — CSS file split: complex pages. Content byte-
 * for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	CASE STUDY OVERLAY
	─────────────────────────────────────────────────────────────────────
	The modal preview shown when clicking a Featured Work card. Markup
	in `src/_includes/partials/case-study-overlay.njk` (a macro called
	from `featured-work.njk` once per featured study). Uses the
	browser-native <dialog> element for accessibility (focus trap,
	escape-to-close, ::backdrop for free).

	Per the #38 scope decision: eager-inline overlay for the 9
	featured cards only. Click intercept lives in featured-work.njk
	as an inline <script> using event delegation; progressive
	enhancement preserves navigate-to-detail behavior when JS is
	disabled.

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

@layer components {
	/* ─── Dialog frame ──────────────────────────────────────────────── */
	/* The <dialog> itself sits transparently at the page level. Its
		inner .innov8-cso-card is the actual styled surface. Clicking on
		the gap between card and dialog edges closes (handled in JS). */
	.innov8-cso {
		padding: 0;
		border: none;
		background: transparent;
		color: var(--fg-primary);
		max-width: min(960px, 100vw - 48px);
		max-height: calc(100vh - 48px);
		width: 100%;
		margin: auto;
		overflow: visible;
	}

	/* The native ::backdrop pseudo-element. Glass blur + dark overlay
		matching the kit's vibe. Animation respects prefers-reduced-
		motion via the @media block at the end. */
	.innov8-cso::backdrop {
		background: rgba(4, 6, 14, 0.72);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		animation: innov8-cso-fade-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	@keyframes innov8-cso-fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes innov8-cso-lift-in {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ─── Inner card (the styled surface) ───────────────────────────── */
	.innov8-cso-card {
		position: relative;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		background: var(--color-ink-900);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-xl);
		animation: innov8-cso-lift-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* ─── Close button (top-right corner) ───────────────────────────── */
	.innov8-cso-close {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-pill);
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		color: var(--fg-primary);
		cursor: pointer;
		transition:
			background var(--duration-base) var(--ease-out),
			border-color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.innov8-cso-close:hover,
	.innov8-cso-close:focus-visible {
		background: rgba(95, 236, 253, 0.18);
		border-color: var(--border-brand);
		transform: scale(1.05);
		outline: none;
	}

	/* ─── Hero (top of card) ──────────────────────────────────────────
		Two-layer backdrop expressed via pseudo-elements rather than
		physical decorative divs:
			::before — aurora (radial-gradient blob + 20px blur)
			::after  — grid (vertical + horizontal 1px line pattern)
		Both layers carry `pointer-events: none` so they never absorb
		clicks intended for the content. `z-index: 0` locks them under
		the content layer (which gets `z-index: 1`); explicit z-index
		is required because the aurora's `filter: blur` creates its
		own stacking context that could otherwise paint over a content
		sibling that has no explicit z-index. `overflow: visible` on the hero is
		mandatory — `overflow: hidden` clips the title + summary +
		callout CTA when the modal card constrains its own height. */
	.innov8-cso-hero {
		position: relative;
		padding: clamp(40px, 5vw, 64px) clamp(28px, 3.6vw, 44px) clamp(32px, 4vw, 48px);
		background: var(--color-ink-1000);
		overflow: visible;
	}

	.innov8-cso-hero::before,
	.innov8-cso-hero::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	/* Aurora — radial-gradient backdrop with a 20px blur for the
	   soft, glowing brand colorwash behind the hero content. */
	.innov8-cso-hero::before {
		background:
			radial-gradient(70% 60% at 20% 30%, rgba(31, 86, 245, 0.55), transparent 65%),
			radial-gradient(60% 50% at 80% 70%, rgba(95, 236, 253, 0.35), transparent 65%);
		filter: blur(20px);
	}

	/* Grid — 48px crosshatch with a radial-gradient mask that
		feathers the edges so the grid fades to invisible at the
		hero's perimeter rather than meeting the edge hard. */
	.innov8-cso-hero::after {
		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: 48px 48px;
		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-cso-hero-content {
		position: relative;
		z-index: 1;
	}

	.innov8-cso-eyebrow {
		margin-bottom: clamp(14px, 1.6vw, 20px);
	}

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

	.innov8-cso-lead {
		margin: clamp(16px, 2vw, 24px) 0 0;
		max-width: 60ch;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	/* ─── Body (scrollable middle section) ──────────────────────────── */
	.innov8-cso-body {
		padding: clamp(28px, 3.6vw, 44px);
		display: flex;
		flex-direction: column;
		gap: clamp(24px, 3vw, 36px);
	}

	/* ─── Meta row (engagement + tech + live link) ──────────────────── */
	.innov8-cso-meta {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(20px, 2.4vw, 32px);
		margin: 0;
		padding: 16px 0;
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-cso-meta-pair {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.innov8-cso-meta-pair dt {
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
	}

	.innov8-cso-meta-pair dd {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		color: var(--fg-primary);
	}

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

	.innov8-cso-tech-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-cso-external-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--accent-spark);
		text-decoration: none;
		transition: gap var(--duration-base) var(--ease-out);
	}

	.innov8-cso-external-link:hover,
	.innov8-cso-external-link:focus-visible {
		gap: 10px;
		outline: none;
	}

	/* ─── Problem / Approach / Outcome sections ─────────────────────── */
	.innov8-cso-section {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.innov8-cso-section-title {
		margin: 0;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--accent-spark);
	}

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

	/* ─── Metrics grid (at-a-glance outcomes) ───────────────────────── */
	.innov8-cso-metrics {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: clamp(12px, 1.6vw, 18px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-cso-metric {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: clamp(16px, 2vw, 20px);
		background: var(--bg-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-md);
		/* Container-query context (#134) — lets the metric-value font-size
			below scale to the card's rendered width via cqi units. The grid
			template uses repeat(auto-fit, minmax(140px, 1fr)) so cards land
			anywhere from ~140px to ~250px wide depending on metric count
			and viewport, and the value typography needs to adapt to that
			actual rendered width rather than viewport width. */
		container-type: inline-size;
	}

	.innov8-cso-metric-value {
		font-family: var(--font-display);
		font-weight: 700;
		/* Container-query based scaling (#134) — adapts to the card's
			rendered width. 14cqi = 14% of card inline-size: ~21px at a
			150px card, ~28px at 200px, clamped to 18-32px to stay
			readable in either direction. Previously this used viewport-
			relative `3vw` which couldn't see the card it lives in, so
			long values like "~50M Americans" on Phlip overflowed the
			140px floor card. */
		font-size: clamp(18px, 14cqi, 32px);
		line-height: 1.1;
		color: var(--accent-spark);
		/* Backstop for unbreakable long values (#134) — let "Americans"
			wrap to a second line rather than overflow the card width
			when font-shrinking alone isn't enough. `overflow-wrap:
			anywhere` also feeds into min-content calculation so the grid
			doesn't force the card itself wider to accommodate the value. */
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.innov8-cso-metric-label {
		font-family: var(--font-sans);
		font-size: var(--text-body-sm);
		line-height: 1.35;
		color: var(--fg-secondary);
	}

	/* ─── Fallback line (when no Sprint 4 narrative present) ────────── */
	.innov8-cso-fallback {
		margin: 0;
		padding: 16px 18px;
		background: var(--glass);
		border: 1px dashed var(--border-default);
		border-radius: var(--radius-md);
		font-family: var(--font-sans);
		font-size: var(--text-body-sm);
		line-height: var(--leading-base);
		color: var(--fg-muted);
		text-wrap: pretty;
	}

	/* ─── Footer CTA ────────────────────────────────────────────────── */
	.innov8-cso-footer {
		padding: 0 clamp(28px, 3.6vw, 44px) clamp(28px, 3.6vw, 44px);
	}

	.innov8-cso-cta {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 14px 28px;
		border-radius: var(--radius-pill);
		background-color: var(--accent-spark);
		color: var(--color-ink-1000);
		font-family: var(--font-mono);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			gap var(--duration-base) var(--ease-out),
			background-color var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);
	}

	.innov8-cso-cta:hover,
	.innov8-cso-cta:focus-visible {
		gap: 14px;
		background: var(--color-cyan-200);
		box-shadow: var(--shadow-glow-cyan);
		outline: none;
	}

	/* Callout CTA (#134) — top-of-modal variant of .innov8-cso-cta.
		Lifted from the design-system's "B · Inner hairline · Square /
		cut" preview (docs/branding/design-system/preview/components-
		buttons-primary.html), described there as "the default CTA":
		solid blue-500 fill, inset cyan hairline stroke, white top-edge
		highlight, hard square corners. Reads as a prominent callout
		rather than a de-emphasized secondary — visually distinct from
		the footer's solid-cyan PILL CTA, so the two CTAs in the same
		modal don't compete on the same geometry. Margin-top separates
		it from the lead paragraph above. */
	.innov8-cso-cta--callout {
		margin-top: clamp(20px, 2.4vw, 28px);
		padding: 14px 26px;
		border-radius: 0;
		background-color: var(--color-blue-500);
		color: #fff;
		font-size: 13px;
		/* Inset cyan hairline + top-edge highlight — the visual
			signature of the B-hairline-square treatment. The stroke is
			inset (not a border) so it doesn't add to the element's
			box-model dimensions. */
		box-shadow:
			inset 0 0 0 1px rgba(95, 236, 253, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.28);
	}

	.innov8-cso-cta--callout:hover,
	.innov8-cso-cta--callout:focus-visible {
		gap: 14px;
		background: var(--color-blue-400);
		color: #fff;
		/* Hover brightens the inset stroke + highlight rather than
			adding an outer glow (which is the pill CTA's hover signature).
			Keeps the geometric distinction between the two CTAs intact. */
		box-shadow:
			inset 0 0 0 1px rgba(95, 236, 253, 0.8),
			inset 0 1px 0 rgba(255, 255, 255, 0.35);
		outline: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-cso::backdrop,
		.innov8-cso-card {
			animation: none;
		}
		.innov8-cso-close,
		.innov8-cso-close:hover,
		.innov8-cso-close:focus-visible,
		.innov8-cso-cta,
		.innov8-cso-cta:hover,
		.innov8-cso-cta:focus-visible,
		.innov8-cso-external-link,
		.innov8-cso-external-link:hover,
		.innov8-cso-external-link:focus-visible {
			transition: none;
			transform: none;
			gap: 10px;
		}
	}
}