/* Listing Manager — archive pages (templates/taxonomy-apk_category.php, categories.php, 404.php)
   Category terms, /games/, /apps/, /updated/, search results, the /categories/ index and the 404 page.
   Loads after tiles.css; colours come from the tokens in global.css, so dark and light both follow. */

.lm-archive {
	padding-bottom: 8px;
}

/* ------------------------------------------------------------------
 * Section head: title, then "134 listings · Page 2 of 12"
 * ------------------------------------------------------------------ */

.lm-archive-head {
	margin: 4px 0 20px;
}

/* Pages with no breadcrumb above the head (/categories/, the 404) need their own space under the header. */
.lm-archive-head:first-child {
	margin-top: 22px;
}

.lm-archive-title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --lm-ink );
	overflow-wrap: anywhere;
}

.lm-archive-count {
	margin: 6px 0 0;
	font-size: 14px;
	color: var( --lm-muted );
}

/* ------------------------------------------------------------------
 * Tile grid: 6 columns (12 per page divides evenly), 4 on phones
 * ------------------------------------------------------------------ */

.lm-tile-grid.lm-archive-tiles {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 24px 16px;
}

@media ( max-width: 900px ) {
	.lm-tile-grid.lm-archive-tiles {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 768px ) {
	.lm-archive-title {
		font-size: 24px;
	}

	.lm-tile-grid.lm-archive-tiles {
		gap: 16px 8px;
	}
}

/* ------------------------------------------------------------------
 * Pagination: 1 2 ... 45, every target 44px
 * ------------------------------------------------------------------ */

.lm-pagination {
	margin: 28px 0 8px;
}

.lm-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lm-pagination li {
	margin: 0;
}

.lm-pagination li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --lm-tap );
	height: var( --lm-tap );
	padding: 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var( --lm-ink );
	text-decoration: none;
	background: var( --lm-panel );
	border: 1px solid var( --lm-line );
	border-radius: 10px;
}

.lm-pagination li > a.page-numbers:hover {
	color: var( --lm-link );
	border-color: var( --lm-blue );
}

.lm-pagination li > .page-numbers.current {
	color: #fff;
	background: var( --lm-btn );
	border-color: var( --lm-btn );
}

.lm-pagination li > .page-numbers.dots {
	color: var( --lm-muted );
	background: transparent;
	border-color: transparent;
}

@media ( max-width: 480px ) {
	.lm-pagination ul.page-numbers {
		gap: 6px;
	}

	.lm-pagination li > .page-numbers {
		padding: 0 8px;
	}
}

/* ------------------------------------------------------------------
 * Empty states (no results, empty archive, 404): message, search form, pills
 * ------------------------------------------------------------------ */

.lm-empty {
	padding: 4px 0 24px;
}

.lm-empty-text,
.lm-search-empty {
	margin: 0;
	font-size: 17px;
	color: var( --lm-ink );
}

.lm-find {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 18px 0 0;
}

.lm-find .lm-find-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var( --lm-tap );
	padding: 0 14px;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	color: var( --lm-ink );
	background: var( --lm-panel );
	border: 1px solid var( --lm-line );
	border-radius: 10px;
}

.lm-find .lm-find-input::placeholder {
	color: var( --lm-muted );
	opacity: 1;
}

.lm-find .lm-find-button {
	flex: 0 0 auto;
	height: var( --lm-tap );
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background: var( --lm-btn );
	border: 1px solid var( --lm-btn );
	border-radius: 10px;
}

.lm-find .lm-find-button:hover {
	filter: brightness( 1.1 );
}

.lm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.lm-chips a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --lm-tap );
	padding: 0 18px;
	font-size: 15px;
	font-weight: 600;
	color: var( --lm-link );
	text-decoration: none;
	background: var( --lm-panel );
	border: 1px solid var( --lm-line );
	border-radius: 999px;
}

.lm-chips a:hover {
	color: var( --lm-link );
	border-color: var( --lm-blue );
}

@media ( max-width: 600px ) {
	.lm-chips a {
		flex: 1 1 auto;
	}
}