/**
 * filter-shelf.css — shared chip-based filter primitive + case-studies sidebar.
 *
 * Loaded by:
 *   - src/case-studies/index.njk  (4-axis sidebar: Industry, Decade, Agency, Tech)
 *   - src/clients/index.njk        (1-axis shelf: Industry only)
 *
 * Structure
 * ─────────
 * §1  Chip styles (shared)   — `.innov8-filter-chip*` — used by both pages.
 * §2  Horizontal shelf       — `.innov8-filter` + `.innov8-filter-shelf` — clients page only.
 * §3  Sidebar layout         — `.innov8-filter-sidebar` — case-studies page only.
 * §4  Mobile drawer          — fixed bottom-sheet behavior (case-studies).
 * §5  Backdrop               — overlay behind the mobile drawer.
 * §6  Mobile trigger bar     — count + Filters button above the grid.
 * §7  Active chip strip      — horizontal scroll strip of active filters.
 * §8  Card enter animation   — staggered translateY fade-in on filter change.
 */

@layer components {
	/* ─────────────────────────────────────────────────────────────────────
		§1  CHIP STYLES — shared between the shelf and the sidebar.
		Renders the pill-shaped filter buttons with aria-pressed toggle state.
		Class prefix: `innov8-filter-chip`.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-group {
		margin-bottom: clamp(20px, 2.4vw, 28px);
	}

	.innov8-filter-group-label {
		margin: 0 0 10px;
		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-filter-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.innov8-filter-chip-wrap {
		display: inline-flex;
	}

	/* Chip button. `aria-pressed` is the single source of truth — CSS
		keys the active state off the attribute so visual + a11y can't drift. */
	.innov8-filter-chip {
		appearance: none;
		display: inline-flex;
		align-items: center;
		padding: 6px 14px;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-pill);
		background-color: rgba(255, 255, 255, 0.04);
		font-family: var(--font-mono);
		font-size: 12px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--fg-secondary);
		cursor: pointer;
		transition:
			background-color var(--duration-base) var(--ease-out),
			border-color var(--duration-base) var(--ease-out),
			color var(--duration-base) var(--ease-out);
	}

	.innov8-filter-chip:hover,
	.innov8-filter-chip:focus-visible {
		border-color: var(--border-strong);
		color: var(--fg-primary);
		outline: none;
	}

	.innov8-filter-chip[aria-pressed='true'] {
		background: rgba(95, 236, 253, 0.18);
		border-color: var(--border-brand);
		color: var(--accent-spark);
	}

	.innov8-filter-chip[aria-pressed='true']:hover,
	.innov8-filter-chip[aria-pressed='true']:focus-visible {
		background: rgba(95, 236, 253, 0.26);
	}

	/* ─────────────────────────────────────────────────────────────────────
		§2  HORIZONTAL SHELF — clients page (1-axis, above the grid).
		Preserved unchanged from the original implementation.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter {
		padding: clamp(28px, 3.6vw, 44px) 0;
		background: var(--color-ink-950);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-filter-header {
		margin-bottom: clamp(20px, 2.4vw, 28px);
	}

	.innov8-filter-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(--fg-tertiary);
	}

	.innov8-filter-hint {
		margin: 6px 0 0;
		max-width: 60ch;
		font-family: var(--font-sans);
		font-size: var(--text-body-sm);
		line-height: var(--leading-base);
		color: var(--fg-muted);
	}

	.innov8-filter-shelf {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(20px, 2.4vw, 32px);
	}

	/* innov8-filter-group + innov8-filter-group-label + chips
		are §1 shared rules above; only the min-width differs on the shelf */
	.innov8-filter .innov8-filter-group {
		flex: 1 1 240px;
		min-width: 0;
		margin-bottom: 0;
	}

	/* ─────────────────────────────────────────────────────────────────────
		§3  SIDEBAR LAYOUT — case-studies page, desktop (≥1024px).

		The sidebar is a sticky <aside> to the left of the card grid.
		Width transitions between 240px (expanded) and 44px (collapsed).
		`overflow-x: hidden` clips the body content during the collapse
		transition; `overflow-y: auto` scrolls the body when it overflows.
		───────────────────────────────────────────────────────────────────── */

	.innov8-csl-content {
		background: var(--color-ink-1000);
		padding: 0 0 clamp(64px, 8vw, 112px);
		position: relative;
		z-index: 210;
	}

	@media (min-width: 1024px) {
		.innov8-csl-content {
			z-index: unset;
		}
	}

	/* Two-column flex: sidebar + main.
	   position: relative anchors the ::before full-height column divider below. */
	.innov8-csl-layout {
		display: flex;
		align-items: flex-start;
		gap: 0;
		padding-top: clamp(32px, 4vw, 48px);
		position: relative;
	}

	/* Full-height vertical divider at the right edge of the sidebar column.
		The sidebar element itself uses align-self: flex-start so its height only
		covers the chip content. This pseudo-element extends the visual separation
		all the way to the bottom of the content area regardless of sidebar height.
		Transitions with the sidebar width toggle (250ms ease-out). */
	.innov8-csl-layout::before {
		border-left: 1px solid var(--border-subtle);
		bottom: 0;
		content: '';
		left: 240px;
		pointer-events: none;
		position: absolute;
		top: 0;
		transition: left 250ms var(--ease-out);
		z-index: 0;
	}

	.innov8-csl-layout:has(.innov8-filter-sidebar.is-collapsed)::before {
		left: 44px;
	}

	@media (max-width: 1023px) {
		.innov8-csl-layout::before {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-csl-layout::before {
			transition: none;
		}
	}

	.innov8-csl-main {
		flex: 1;
		min-width: 0;
	}

	.innov8-filter-sidebar {
		flex-shrink: 0;
		width: 240px;
		transition: width 250ms var(--ease-out);
		overflow-x: hidden;
		overflow-y: auto;
		position: sticky;
		top: 100px;
		/* Constrain so it doesn't scroll past the viewport */
		max-height: calc(100vh - 120px);
		padding-right: 24px;
		/* Show scrollbar only when needed, styled to match dark theme */
		scrollbar-width: thin;
		scrollbar-color: var(--border-subtle) transparent;
		/* Align-self: flex-start so the sidebar doesn't stretch to the
			 full height of the main content column */
		align-self: flex-start;
	}

	.innov8-filter-sidebar.is-collapsed {
		width: 44px;
	}

	/* Sidebar header: icon + title + count badge + toggle button */
	.innov8-filter-sidebar-header {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0 0 16px;
		border-bottom: 1px solid var(--border-subtle);
		margin-bottom: 20px;
		/* Fixed width so the header doesn't reflow during width transition */
		min-width: 216px;
	}

	.innov8-filter-sidebar-label {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
		white-space: nowrap;
	}

	.innov8-filter-sidebar-label .ti {
		font-size: 15px;
		color: var(--fg-tertiary);
		flex-shrink: 0;
	}

	/* Active count badge */
	.innov8-filter-active-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: var(--radius-pill);
		background: rgba(95, 236, 253, 0.18);
		border: 1px solid var(--border-brand);
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 500;
		color: var(--accent-spark);
		white-space: nowrap;
	}

	/* Push the toggle to the far right of the header */
	.innov8-filter-sidebar-toggle {
		appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-left: auto;
		flex-shrink: 0;
		border: 1px solid var(--border-subtle);
		border-radius: var(--radius-md);
		background: transparent;
		color: var(--fg-tertiary);
		cursor: pointer;
		transition:
			border-color var(--duration-base) var(--ease-out),
			color var(--duration-base) var(--ease-out);
	}

	.innov8-filter-sidebar-toggle:hover,
	.innov8-filter-sidebar-toggle:focus-visible {
		border-color: var(--border-strong);
		color: var(--fg-primary);
		outline: none;
	}

	/* Chevron icon rotates 180° when collapsed → points right to expand */
	.innov8-filter-toggle-icon {
		font-size: 14px;
		transition: transform 250ms var(--ease-out);
	}

	.innov8-filter-sidebar.is-collapsed .innov8-filter-toggle-icon {
		transform: rotate(180deg);
	}

	/* Mobile close button — hidden on desktop */
	.innov8-filter-drawer-close {
		display: none;
	}

	/* Sidebar body: the four chip groups */
	.innov8-filter-sidebar-body {
		/* Minimum width prevents chip groups from reflowing during collapse */
		min-width: 216px;
	}

	/* Sidebar footer: count + reset */
	.innov8-filter-sidebar-footer {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 16px;
		border-top: 1px solid var(--border-subtle);
		margin-top: 4px;
		min-width: 216px;
	}

	/* Hide body and footer content when collapsed; only the header icon shows */
	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-body,
	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-footer {
		visibility: hidden;
		pointer-events: none;
	}

	/* Collapsed: show only the sticky toggle icon at top */
	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-header {
		flex-direction: column;
		gap: 12px;
		border-bottom: none;
		margin-bottom: 0;
		padding-top: 4px;
	}

	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-title-text,
	.innov8-filter-sidebar.is-collapsed .innov8-filter-active-count {
		display: none;
	}

	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-toggle {
		margin-left: 0;
	}

	/* The desktop status bar is hidden on mobile
		(handled in §4 below via media query) */
	.innov8-list-status-desktop {
		display: flex;
	}

	/* ─────────────────────────────────────────────────────────────────────
		§4  MOBILE DRAWER — <1024px.

		The sidebar switches from a sticky sidebar to a fixed bottom drawer.
		The same <aside> element is used; CSS repositions it. The `.drawer-open`
		class is toggled by JS when the mobile trigger is tapped.
		───────────────────────────────────────────────────────────────────── */

	@media (max-width: 1023px) {
		.innov8-csl-layout {
			display: block;
			padding-top: 0;
		}

		.innov8-csl-main {
			padding-top: 0;
		}

		/* The sidebar becomes a fixed bottom drawer */
		.innov8-filter-sidebar {
			position: fixed;
			inset: auto 0 0;
			/* Override the width transition; drawer is always full width */
			width: 100% !important;
			max-height: 85vh;
			overflow-x: visible;
			overflow-y: auto;
			padding-right: 0;
			/* Start off-screen below the viewport */
			transform: translateY(100%);
			transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
			z-index: 200;
			/* Drawer surface */
			background: var(--bg-surface);
			border-top: 1px solid var(--border-subtle);
			border-radius: 16px 16px 0 0;
			top: auto;
			align-self: auto;
		}

		.innov8-filter-sidebar.drawer-open {
			transform: translateY(0);
		}

		/* Drawer inner padding */
		.innov8-filter-sidebar-header {
			min-width: 0;
			padding: 16px 20px 14px;
			border-bottom: 1px solid var(--border-subtle);
			margin-bottom: 0;
		}

		.innov8-filter-sidebar-body {
			min-width: 0;
			padding: 20px 20px 8px;
		}

		.innov8-filter-sidebar-footer {
			min-width: 0;
			padding: 12px 20px 20px;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		/* Show mobile close button; hide desktop toggle */
		.innov8-filter-drawer-close {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			margin-left: auto;
			flex-shrink: 0;
			appearance: none;
			border: 1px solid var(--border-subtle);
			border-radius: var(--radius-md);
			background: transparent;
			color: var(--fg-tertiary);
			cursor: pointer;
		}

		.innov8-filter-drawer-close:hover,
		.innov8-filter-drawer-close:focus-visible {
			border-color: var(--border-strong);
			color: var(--fg-primary);
			outline: none;
		}

		.innov8-filter-sidebar-toggle {
			display: none;
		}

		/* Collapsed state is irrelevant on mobile */
		.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-body,
		.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-footer {
			visibility: visible;
			pointer-events: auto;
		}

		.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-header {
			flex-direction: row;
			padding: 16px 20px 14px;
			border-bottom: 1px solid var(--border-subtle);
			margin-bottom: 0;
		}

		.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-title-text {
			display: inline;
		}

		/* Desktop status bar hidden on mobile */
		.innov8-list-status-desktop {
			display: none;
		}
	}

	/* ─────────────────────────────────────────────────────────────────────
		§5  BACKDROP — behind the mobile drawer.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-backdrop {
		position: fixed;
		inset: 0;
		background: var(--bg-overlay);
		z-index: 199;
		opacity: 0;
		pointer-events: none;
		transition: opacity 250ms ease;
	}

	.innov8-filter-backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* Backdrop only relevant on mobile */
	@media (min-width: 1024px) {
		.innov8-filter-backdrop,
		.innov8-filter-backdrop.is-visible {
			display: none;
		}
	}

	/* ─────────────────────────────────────────────────────────────────────
		§6  MOBILE TRIGGER BAR — hidden on desktop.

		A compact bar above the card grid showing the result count on the
		left and a "Filters" button with active-count badge on the right.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-mobile-bar {
		display: none;
	}

	@media (max-width: 1023px) {
		.innov8-filter-mobile-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: clamp(16px, 2.4vw, 24px) 0 12px;
			border-bottom: 1px solid var(--border-subtle);
			margin-bottom: 0;
		}
	}

	.innov8-filter-mobile-trigger {
		appearance: none;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 7px 16px;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-pill);
		background: transparent;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--fg-secondary);
		cursor: pointer;
		transition:
			border-color var(--duration-base) var(--ease-out),
			color var(--duration-base) var(--ease-out);
		white-space: nowrap;
	}

	.innov8-filter-mobile-trigger:hover,
	.innov8-filter-mobile-trigger:focus-visible {
		border-color: var(--border-strong);
		color: var(--fg-primary);
		outline: none;
	}

	.innov8-filter-mobile-trigger .ti {
		font-size: 14px;
	}

	/* Active count badge on the mobile trigger */
	.innov8-filter-mobile-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--radius-pill);
		background: rgba(95, 236, 253, 0.18);
		border: 1px solid var(--border-brand);
		font-size: 10px;
		color: var(--accent-spark);
	}

	/* ─────────────────────────────────────────────────────────────────────
		§7  ACTIVE CHIP STRIP — mobile only.

		A horizontally-scrollable strip of active-filter chips. JS builds
		and manages the inner content on every state change. Hidden when
		no filters are active.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-active-strip {
		display: none;
	}

	@media (max-width: 1023px) {
		.innov8-filter-active-strip {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 10px 0 12px;
			overflow-x: auto;
			/* Hide scrollbar — strip is swiped, not scrollbar-dragged */
			scrollbar-width: none;
		}

		.innov8-filter-active-strip::-webkit-scrollbar {
			display: none;
		}
	}

	/* Active chip: smaller than the sidebar chips, carries a remove × */
	.innov8-filter-active-chip {
		appearance: none;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 4px 10px;
		border: 1px solid var(--border-brand);
		border-radius: var(--radius-pill);
		background: rgba(95, 236, 253, 0.12);
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--accent-spark);
		cursor: pointer;
		white-space: nowrap;
		transition:
			background-color var(--duration-base) var(--ease-out),
			border-color var(--duration-base) var(--ease-out);
	}

	.innov8-filter-active-chip:hover,
	.innov8-filter-active-chip:focus-visible {
		background: rgba(95, 236, 253, 0.22);
		outline: none;
	}

	/* Clear-all button in the strip — plain mono text, no pill border */
	.innov8-filter-strip-clear {
		appearance: none;
		padding: 4px 8px;
		border: none;
		background: none;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--fg-muted);
		cursor: pointer;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.innov8-filter-strip-clear:hover,
	.innov8-filter-strip-clear:focus-visible {
		color: var(--fg-secondary);
		outline: none;
	}

	/* ─────────────────────────────────────────────────────────────────────
		§8  CARD ENTER ANIMATION — newly-visible cards on filter change.

		JS adds the `.filter-entering` class + `--filter-enter-i` CSS var
		to cards that transition from hidden → visible. The var drives the
		staggered delay (capped at 8 cards = 320ms max stagger).
		Respects prefers-reduced-motion.
		───────────────────────────────────────────────────────────────────── */

	@keyframes filterCardEnter {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	[data-cs-card].filter-entering {
		animation: filterCardEnter 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: calc(var(--filter-enter-i, 0) * 40ms);
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-filter-chip,
		.innov8-filter-chip:hover,
		.innov8-filter-chip:focus-visible,
		.innov8-filter-chip[aria-pressed='true'],
		.innov8-filter-sidebar,
		.innov8-filter-sidebar-toggle,
		.innov8-filter-toggle-icon {
			transition: none;
		}

		[data-cs-card].filter-entering {
			animation: none;
		}
	}

	/* ─────────────────────────────────────────────────────────────────────
		§9  DISABLED CHIP STATE — dead-end prevention.

		Chips that JS determines would produce 0 results are disabled.
		`pointer-events: none` prevents hover flicker while disabled;
		cursor + opacity signal unavailability visually.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-chip:disabled,
	.innov8-filter-chip[aria-disabled='true'] {
		opacity: 0.28;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* ─────────────────────────────────────────────────────────────────────
		§10  COLLAPSED SIDEBAR VERTICAL LABEL — desktop only.

		Hidden when expanded; revealed in the 44px icon strip.
		Uses writing-mode + rotate to run the text bottom-to-top so
		"Filters" reads naturally when the sidebar is in its collapsed strip.
		The badge reuses the existing `.innov8-filter-active-count` token
		styles but is overridden here for the rotated context.
		───────────────────────────────────────────────────────────────────── */

	.innov8-filter-sidebar-collapsed-label {
		display: none;
	}

	.innov8-filter-sidebar.is-collapsed .innov8-filter-sidebar-collapsed-label {
		display: flex;
		align-items: center;
		gap: 8px;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		padding: 12px 0 4px;
	}

	.innov8-filter-collapsed-text {
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
		white-space: nowrap;
	}

	/* Badge inside the collapsed label — slim down to fit the 44px strip */
	.innov8-filter-collapsed-badge {
		min-width: 16px;
		height: 16px;
		font-size: 9px;
	}

	/* Collapsed label is irrelevant on mobile (drawer covers the panel) */
	@media (max-width: 1023px) {
		.innov8-filter-sidebar-collapsed-label {
			display: none !important;
		}
	}

	/* ─────────────────────────────────────────────────────────────────────
		§11  MOBILE DRAWER FOOTER — 2-button grid layout.

		On mobile the footer becomes a 2-column grid: "Clear all" on the
		left and "Show X results" on the right. The desktop count text
		and reset button are hidden (count is in the trigger bar; the
		mobile clear-all button replaces the desktop reset).
		───────────────────────────────────────────────────────────────────── */

	/* Desktop default: hide the mobile-only buttons */
	.innov8-filter-drawer-clear,
	.innov8-filter-show-results {
		display: none;
	}

	@media (max-width: 1023px) {
		/* Reflow the footer into a 2-column button grid */
		.innov8-filter-sidebar-footer {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		/* Hide desktop-only elements inside the drawer footer */
		.innov8-filter-sidebar-footer > .innov8-list-count,
		.innov8-filter-sidebar-footer > .innov8-list-reset {
			display: none;
		}

		/* "Clear all" — left column */
		.innov8-filter-drawer-clear {
			display: flex;
			align-items: center;
			justify-content: center;
			appearance: none;
			padding: 8px;
			border: 1px solid var(--border-default);
			border-radius: var(--radius-md);
			background: transparent;
			font-family: var(--font-mono);
			font-size: var(--text-overline);
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--fg-secondary);
			cursor: pointer;
			transition: border-color var(--duration-base) var(--ease-out);
		}

		.innov8-filter-drawer-clear:hover,
		.innov8-filter-drawer-clear:focus-visible {
			border-color: var(--border-strong);
			outline: none;
		}

		/* "Show X results" — right column, brand accent */
		.innov8-filter-show-results {
			display: flex;
			align-items: center;
			justify-content: center;
			appearance: none;
			padding: 8px;
			border: 1px solid var(--border-brand);
			border-radius: var(--radius-md);
			background: transparent;
			font-family: var(--font-mono);
			font-size: var(--text-overline);
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--accent-spark);
			cursor: pointer;
			transition:
				background-color var(--duration-base) var(--ease-out),
				border-color var(--duration-base) var(--ease-out);
			white-space: nowrap;
		}

		.innov8-filter-show-results:hover,
		.innov8-filter-show-results:focus-visible {
			background: rgba(95, 236, 253, 0.1);
			outline: none;
		}

		@media (prefers-reduced-motion: reduce) {
			.innov8-filter-drawer-clear,
			.innov8-filter-show-results {
				transition: none;
			}
		}
	}

	/* ─────────────────────────────────────────────────────────────────────
		§12  CARD GRID COLUMN ADJUSTMENT — sidebar expanded vs collapsed.

		At ≥1024px the card grid switches between 2 columns (sidebar
		expanded, 240px taken) and 3 columns (sidebar collapsed, 44px).
		Uses :has() to read sidebar state from CSS without JS class juggling.
		───────────────────────────────────────────────────────────────────── */

	@media (min-width: 1024px) {
		.innov8-csl-layout:has(.innov8-filter-sidebar:not(.is-collapsed)) .innov8-csl-grid-rest {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}