/**
 * EMOBILITY FOR ALL - product archive & filtering (Phase 8).
 *
 * Registered alongside (and depends on) the Phase 5 design system stylesheet
 * (public.css) - only new component classes live here (archive layout,
 * filter sidebar/drawer, chips, toolbar); every color, spacing, and type
 * token comes from public.css's :root custom properties.
 *
 * Enqueued only on the /products/ archive/category pages (see
 * Product_Archive::maybe_enqueue_assets()).
 *
 * Breakpoints match public.css: sm 576  md 768  lg 992  xl 1200.
 * The filter sidebar becomes a static column at the same `lg` breakpoint
 * the header's primary nav switches from mobile to desktop at.
 */

/* Skip link - archive-products.php owns the full document like
   front-page.php, so this stylesheet (not the theme) is responsible for
   one, same as homepage.css. */
.emobility-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	z-index: var( --emobility-z-toast );
	padding: var( --emobility-space-2 ) var( --emobility-space-4 );
	background: var( --emobility-primary-600 );
	color: var( --emobility-white );
	border-radius: 0 0 var( --emobility-radius-md ) 0;
}

.emobility-skip-link:focus {
	top: 0;
}

.emobility-archive {
	padding-block: var( --emobility-space-8 );
}

/* --- Header (title/description/media/subcategories) ------------------- */

.emobility-archive__header {
	margin-bottom: var( --emobility-space-8 );
	max-width: 860px;
}

.emobility-archive__header h1 {
	margin-bottom: var( --emobility-space-3 );
}

.emobility-archive__header-media {
	margin-bottom: var( --emobility-space-6 );
	border-radius: var( --emobility-radius-lg );
	overflow: hidden;
	max-height: 220px;
}

.emobility-archive__header-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.emobility-archive__description {
	max-width: 65ch;
}

.emobility-archive__subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: var( --emobility-space-2 );
	list-style: none;
	margin: var( --emobility-space-4 ) 0 0;
	padding: 0;
}

/* --- Toolbar (filter toggle + sort) ------------------------------------ */

.emobility-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --emobility-space-4 );
	margin-bottom: var( --emobility-space-6 );
}

.emobility-archive__filter-count {
	margin-left: var( --emobility-space-2 );
}

.emobility-archive__sort-field {
	display: flex;
	align-items: center;
	gap: var( --emobility-space-2 );
	margin-left: auto;
}

.emobility-archive__sort-field .emobility-select {
	width: auto;
}

/* --- Layout: sidebar + results ------------------------------------------ */

.emobility-archive__layout {
	display: block;
}

.emobility-archive__scrim {
	position: fixed;
	inset: 0;
	background: rgba( 15, 23, 42, 0.5 );
	z-index: calc( var( --emobility-z-modal ) - 1 );
}

.emobility-archive__sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min( 320px, 85vw );
	background: var( --emobility-color-surface );
	z-index: var( --emobility-z-modal );
	transform: translateX( -100% );
	transition: transform var( --emobility-transition-base );
	overflow-y: auto;
	padding: var( --emobility-space-6 ) var( --emobility-container-padding );
	box-shadow: var( --emobility-shadow-lg );
}

.emobility-archive__sidebar.is-open {
	transform: translateX( 0 );
}

.emobility-archive__filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --emobility-space-6 );
}

.emobility-archive__filter-header h2 {
	margin: 0;
}

.emobility-archive__filter-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: none;
	border: var( --emobility-border-width ) solid var( --emobility-color-border );
	border-radius: var( --emobility-radius-md );
	font-size: var( --emobility-text-xl );
	line-height: 1;
	color: var( --emobility-color-text );
	cursor: pointer;
}

.emobility-archive__filter-actions {
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-3 );
	margin-top: var( --emobility-space-6 );
	padding-top: var( --emobility-space-6 );
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
	position: sticky;
	bottom: 0;
	background: var( --emobility-color-surface );
}

@media ( min-width: 992px ) {
	.emobility-archive__layout {
		display: grid;
		grid-template-columns: 260px minmax( 0, 1fr );
		gap: var( --emobility-space-8 );
		align-items: start;
	}

	.emobility-archive__filter-toggle,
	.emobility-archive__filter-header,
	.emobility-archive__scrim {
		display: none !important;
	}

	.emobility-archive__sidebar {
		position: static;
		width: auto;
		transform: none;
		z-index: auto;
		box-shadow: none;
		padding: 0;
		overflow: visible;
	}

	.emobility-archive__filter-actions {
		position: static;
	}
}

/* --- Filter groups ------------------------------------------------------ */

.emobility-archive__filter-group {
	border: none;
	padding: 0;
	margin: 0 0 var( --emobility-space-6 );
}

.emobility-archive__filter-legend {
	display: block;
	font-size: var( --emobility-text-sm );
	font-weight: var( --emobility-font-weight-semibold );
	color: var( --emobility-color-heading );
	margin-bottom: var( --emobility-space-3 );
}

.emobility-archive__filter-options {
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-2 );
	max-height: 220px;
	overflow-y: auto;
}

.emobility-archive__filter-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-2 );
}

.emobility-archive__filter-links a {
	color: var( --emobility-color-text );
	text-decoration: none;
	font-size: var( --emobility-text-sm );
}

.emobility-archive__filter-links a:hover {
	color: var( --emobility-primary-600 );
}

.emobility-archive__price-inputs {
	display: flex;
	align-items: center;
	gap: var( --emobility-space-2 );
}

.emobility-archive__price-field {
	margin-bottom: 0;
	flex: 1;
}

.emobility-archive__price-sep {
	color: var( --emobility-color-text-muted );
}

/* --- Results: count, chips, grid ---------------------------------------- */

.emobility-archive__count {
	font-size: var( --emobility-text-sm );
	color: var( --emobility-color-text-muted );
	margin: 0 0 var( --emobility-space-4 );
}

.emobility-archive__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --emobility-space-2 );
	margin-bottom: var( --emobility-space-6 );
}

.emobility-chip {
	display: inline-flex;
	align-items: center;
	gap: var( --emobility-space-2 );
	padding: var( --emobility-space-2 ) var( --emobility-space-3 );
	border-radius: var( --emobility-radius-full );
	background: var( --emobility-color-surface-muted );
	border: var( --emobility-border-width ) solid var( --emobility-color-border );
	font-size: var( --emobility-text-sm );
	color: var( --emobility-color-text );
	text-decoration: none;
	white-space: nowrap;
}

.emobility-chip:hover {
	border-color: var( --emobility-primary-400 );
	color: var( --emobility-primary-600 );
}

.emobility-chip--clear {
	background: transparent;
	color: var( --emobility-color-text-muted );
	border-style: dashed;
}

.emobility-archive__grid {
	margin-top: var( --emobility-space-2 );
}

.emobility-archive__empty {
	text-align: center;
	padding: var( --emobility-space-12 ) var( --emobility-space-6 );
}

.emobility-archive__empty p {
	margin-bottom: var( --emobility-space-6 );
	color: var( --emobility-color-text-muted );
}

.emobility-archive__empty .emobility-flex {
	justify-content: center;
}

/* Loading state while an AJAX filter request is in flight (see archive.js). */
.emobility-archive__main.is-loading #emobility-archive-results {
	opacity: 0.5;
	pointer-events: none;
}

/* `.emobility-no-scroll` (locks background scroll while the mobile filter
   drawer is open) now lives in public.css as a shared utility - Phase 9's
   product-page lightbox needs the exact same body-scroll lock, and
   duplicating the rule per-page risks the two definitions drifting apart. */