/**
 * list-controls.css — shared list-page UI controls primitive.
 *
 * Loaded by:
 *   - src/case-studies/index.njk
 *   - src/clients/index.njk
 *
 * Both pages declare the partial in their `styles:` frontmatter array.
 *
 * Class prefix: `innov8-list-`. Covers the chrome that wraps a filterable
 * list-of-items page — the status row (count + reset button + optional
 * arrow link to a sibling page), and the empty-state panel revealed when
 * filters yield zero matches.
 *
 * Previously split between two prefix-specific implementations
 * (`.innov8-csl-*` on case-studies, `.innov8-cl-*` on clients) that had
 * meaningfully different visual treatments — different reset button
 * styling, different empty-panel typography + chrome. Per the #124 DRY
 * pass: standardized on case-studies' design as canonical because it's
 * more polished + carries more brand intent (cyan-tinted reset for
 * affordance contrast, uppercase bold empty-panel title for brand voice,
 * subtle bg-card background for the empty panel to provide breathing
 * room). The clients page picks up the same treatment, which is the
 * intended outcome of standardization — not a regression.
 *
 * Markup contract:
 *
 *   <div class="innov8-list-status" aria-live="polite">
 *     <span class="innov8-list-count" data-…-count>Showing X of Y items</span>
 *     <button type="button"
 *             class="innov8-list-reset"
 *             data-…-reset
 *             hidden>
 *       Reset filters
 *     </button>
 *     <!-- Optional companion link to a sibling page (clients-roster
 *          variant uses this; case-studies-list doesn't currently). -->
 *     <a href="…" class="innov8-list-arrow-link">
 *       See the full roster
 *       <span class="innov8-list-arrow" aria-hidden="true">&rarr;</span>
 *     </a>
 *   </div>
 *
 *   <div class="innov8-list-empty" data-…-empty hidden>
 *     <p class="innov8-list-empty-title">No items match your filter.</p>
 *     <p class="innov8-list-empty-lead">Try relaxing a filter…</p>
 *   </div>
 *
 * Data attributes (`data-cs-count` / `data-cs-reset` / `data-cs-empty`
 * on case-studies; `data-cl-count` / `data-cl-reset` / `data-cl-empty`
 * on clients) stay prefix-specific because they're consumed by per-page
 * filter JS engines. Only the CSS surfaces are canonicalized.
 *
 * Extracted in #124 — CSS audit DRY pass. The two prior implementations
 * lived at:
 *   - src/assets/css/pages/case-studies-list.css §"Status row" + §"Empty"
 *   - src/assets/css/pages/clients-list.css §"Status row" + §"Reset
 *     button + empty-state panel"
 *
 * Per the [[dry_applies_to_design_too]] memory note — when auditing
 * duplicated CSS, "intentionally tuned per-page" is a code smell, not
 * design intent. Pick the better design as canonical + converge.
 */

@layer components {
	/* ─────────────────────────────────────────────────────────────────────
		LIST SECTION — wrapper for the grid + status row.

		Sits between the filter shelf and the empty state, contains the
		grid of cards. Sets the page-section background tone (ink-1000)
		and the vertical padding. Standardized on case-studies' tighter
		bottom-padding clamp; was per-page-tuned (8vw vs 9vw on clients)
		before #124 DRY pass.

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

	.innov8-list-section {
		padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 112px);
		background: var(--color-ink-1000);
	}

	/* ─────────────────────────────────────────────────────────────────────
		STATUS ROW — count + reset button + optional companion link.

		Layout: a flex row that wraps on narrow viewports. Sits between
		the filter shelf and the grid as a thin divider strip with mono-
		case-overline typography.

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

	.innov8-list-status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin: 0 0 clamp(24px, 3vw, 36px);
		padding: 14px 0;
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.innov8-list-count {
		color: var(--fg-tertiary);
	}

	/* Reset button — canonical design from /case-studies/: prominent
		cyan tint via `--accent-spark` color + brand-hover border. Larger
		padding than the prior clients-page variant (6×14 vs 4×12) for
		better tap-target affordance + visual presence in the status row. */
	.innov8-list-reset {
		appearance: none;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 14px;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-pill);
		background: transparent;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--accent-spark);
		cursor: pointer;
		transition: border-color var(--duration-base) var(--ease-out);
	}

	.innov8-list-reset:hover,
	.innov8-list-reset:focus-visible {
		border-color: var(--border-brand);
		outline: none;
	}

	/* Companion link — used on /clients/ to link to /case-studies/.
		Not currently used on /case-studies/ but baked in here so a future
		callsite (e.g. a "See client roster →" on /case-studies/) gets the
		treatment for free. Gap-grow on hover gives the arrow some lift
		without animating the arrow itself. */
	.innov8-list-arrow-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--accent-spark);
		text-decoration: none;
		transition: gap var(--duration-base) var(--ease-out);
	}

	.innov8-list-arrow-link:hover,
	.innov8-list-arrow-link:focus-visible {
		gap: 12px;
		outline: none;
	}

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

	.innov8-list-arrow-link:hover .innov8-list-arrow,
	.innov8-list-arrow-link:focus-visible .innov8-list-arrow {
		transform: translateX(4px);
	}

	/* ─────────────────────────────────────────────────────────────────────
		EMPTY STATE — panel revealed when filters yield zero matches.

		Canonical design from /case-studies/: subtle `var(--bg-card)`
		background + dashed border for visual containment, uppercase bold
		display-font title for brand voice, body text capped at 52ch with
		`text-wrap: pretty` for readability.
		───────────────────────────────────────────────────────────────────── */

	.innov8-list-empty {
		margin-top: clamp(24px, 3vw, 36px);
		padding: clamp(28px, 3.6vw, 44px);
		background: var(--bg-card);
		border: 1px dashed var(--border-default);
		border-radius: var(--radius-lg);
		text-align: center;
	}

	.innov8-list-empty-title {
		margin: 0 0 8px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--text-h4);
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
	}

	.innov8-list-empty-lead {
		margin: 0 auto;
		max-width: 52ch;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	/* Reduced-motion override — collapse all transitions/transforms in
		the list-controls surface so vestibular-sensitive users get a
		static UI. Mirrors the prefers-reduced-motion blocks in
		filter-shelf.css and the per-page CSS. */
	@media (prefers-reduced-motion: reduce) {
		.innov8-list-reset,
		.innov8-list-reset:hover,
		.innov8-list-reset:focus-visible,
		.innov8-list-arrow-link,
		.innov8-list-arrow-link:hover,
		.innov8-list-arrow-link:focus-visible,
		.innov8-list-arrow,
		.innov8-list-arrow-link:hover .innov8-list-arrow,
		.innov8-list-arrow-link:focus-visible .innov8-list-arrow {
			transition: none;
			transform: none;
		}
	}
}