/**
 * _partials/recommendations-featured.css — home-page recommendations grid.
 *
 * Loaded by src/index.njk via its `styles:` frontmatter array.
 *
 * Curated 4-card grid of LinkedIn recommendations on the home page.
 * Distinct from the full /recommendations/ index page (which has its
 * own pages/recommendations.css from PR 2). Markup in
 * src/_includes/partials/recommendations-featured.njk.
 *
 * Extracted from src/assets/css/app.css RECOMMENDATIONS section as
 * part of #147 PR 3 — CSS file split: complex pages. Content byte-
 * for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	RECOMMENDATIONS
	─────────────────────────────────────────────────────────────────────
	4-up testimonial-card grid. Markup in
	`src/_includes/partials/recommendations-featured.njk`. Consumes
	`_data/recommendations.json` filtered by `is_featured: true`.

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

@layer components {
	.innov8-rec {
		position: relative;
		padding: clamp(56px, 7vw, 96px) 0;
		/* ink-950 alternation against the ink-1000 Stats Band above
			 and the ink-1000 CTA banner below. */
		background: var(--color-ink-950);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-rec-header {
		margin-bottom: clamp(28px, 3.6vw, 44px);
		max-width: 720px;
	}

	.innov8-rec-eyebrow {
		margin-bottom: 14px;
	}

	.innov8-rec-title {
		margin: 0 0 16px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(26px, 3vw, 38px);
		line-height: 1.15;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-rec-lead {
		margin: 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;
	}

	.innov8-rec-grid {
		display: grid;
		gap: clamp(16px, 2vw, 24px);
		grid-template-columns: 1fr;
	}

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

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

	/* Each home-page card is wrapped in an anchor that routes to the
		matching section on /recommendations/. The anchor strips its own
		default chrome (color, underline, focus outline) and delegates
		the visual hover/focus treatment to the inner .innov8-rec-card.
		`height: 100%` lets the inner card fill the grid-row height (the
		grid stretches the anchor; the anchor passes that height down to
		its child via the explicit height rule). Without these two
		height:100% rules, the inner cards size to their content and the
		row reads with ragged-bottom cards. #132. */
	.innov8-rec-card-link {
		display: block;
		height: 100%;
		color: inherit;
		text-decoration: none;
		border-radius: var(--radius-lg);
		outline: none;
	}

	.innov8-rec-card-link:focus-visible .innov8-rec-card {
		border-color: var(--border-brand);
		box-shadow: 0 0 0 2px var(--border-brand);
	}

	.innov8-rec-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 24px;
		height: 100%;
		padding: clamp(24px, 3vw, 32px);
		background: var(--bg-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-lg);
		transition:
			border-color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.innov8-rec-card:hover,
	.innov8-rec-card-link:hover .innov8-rec-card {
		border-color: var(--border-brand);
		transform: translateY(-2px);
	}

	.innov8-rec-blockquote {
		margin: 0;
		padding: 0;
		border: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.innov8-rec-mark {
		color: var(--accent-spark);
		opacity: 0.6;
	}

	.innov8-rec-quote {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		font-weight: 500;
		line-height: 1.5;
		color: var(--fg-primary);
		text-wrap: pretty;
	}

	.innov8-rec-attribution {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding-top: 16px;
		border-top: 1px solid var(--border-subtle);
	}

	.innov8-rec-author {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--text-body-sm);
		letter-spacing: var(--tracking-snug);
		color: var(--accent-spark);
		text-transform: uppercase;
	}

	.innov8-rec-role {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
	}

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

	.innov8-rec-footer {
		margin-top: clamp(28px, 3.6vw, 40px);
	}

	.innov8-rec-view-all {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-family: var(--font-mono);
		font-size: 15px;
		letter-spacing: 0.04em;
		color: var(--accent-spark);
		text-decoration: none;
		transition: gap var(--duration-base) var(--ease-out);
	}

	.innov8-rec-view-all:hover,
	.innov8-rec-view-all:focus-visible {
		gap: 14px;
		outline: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-rec-card,
		.innov8-rec-card:hover,
		.innov8-rec-view-all,
		.innov8-rec-view-all:hover,
		.innov8-rec-view-all:focus-visible {
			transition: none;
			transform: none;
			gap: 10px;
		}
	}
}