.qmt-listing-main {
	background: linear-gradient(180deg, var(--qmt-color-background-secondary) 0, var(--qmt-color-background) 18rem);
	min-height: 100vh;
}

.qmt-listing-wrap {
	padding-block: var(--qmt-space-8) var(--qmt-space-14);
}

.qmt-archive-hero {
	align-items: start;
	background: var(--qmt-color-surface);
	border: 1px solid var(--qmt-color-border);
	border-radius: var(--qmt-radius-lg);
	box-shadow: var(--qmt-shadow-md);
	display: grid;
	gap: var(--qmt-space-6);
	grid-template-columns: auto minmax(0, 1fr);
	margin-bottom: var(--qmt-space-8);
	padding: clamp(var(--qmt-space-6), 4vw, var(--qmt-space-10));
}

.qmt-archive-hero-icon,
.qmt-empty-icon {
	align-items: center;
	background: hsl(221 83% 53% / 0.1);
	border: 1px solid hsl(221 83% 53% / 0.2);
	border-radius: var(--qmt-radius-lg);
	color: var(--qmt-color-primary);
	display: inline-flex;
	height: 3.25rem;
	justify-content: center;
	width: 3.25rem;
}

.qmt-archive-hero-copy {
	display: grid;
	gap: var(--qmt-space-3);
}

.qmt-archive-hero h1 {
	font-size: clamp(var(--qmt-font-size-3xl), 5vw, var(--qmt-font-size-5xl));
	margin: 0;
	overflow-wrap: anywhere;
}

.qmt-archive-hero p {
	color: var(--qmt-color-muted);
	font-size: var(--qmt-font-size-lg);
	margin: 0;
	max-width: 48rem;
}

.qmt-archive-count {
	color: var(--qmt-color-muted);
	font-size: var(--qmt-font-size-sm);
	font-weight: var(--qmt-weight-semibold);
}

.qmt-listing-section,
.qmt-archive-discovery,
.qmt-related-categories-section,
.qmt-related-tools-section {
	display: grid;
	gap: var(--qmt-space-6);
}

.qmt-article-grid,
.qmt-topic-grid,
.qmt-tool-grid {
	display: grid;
	gap: var(--qmt-space-5);
}

.qmt-archive-discovery {
	align-items: center;
	grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1fr);
	margin-bottom: var(--qmt-space-8);
}

.qmt-archive-discovery h2,
.qmt-archive-discovery p {
	margin: 0;
}

.qmt-archive-grid,
.qmt-search-result-grid,
.qmt-topic-grid,
.qmt-tool-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qmt-pagination {
	margin-top: var(--qmt-space-8);
}

.qmt-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--qmt-space-2);
	justify-content: center;
}

.qmt-pagination .page-numbers {
	align-items: center;
	background: var(--qmt-color-surface);
	border: 1px solid var(--qmt-color-border);
	border-radius: var(--qmt-radius-lg);
	color: var(--qmt-color-muted);
	display: inline-flex;
	font-size: var(--qmt-font-size-sm);
	font-weight: var(--qmt-weight-semibold);
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.625rem 0.875rem;
	text-decoration: none;
}

.qmt-pagination .page-numbers.current {
	background: var(--qmt-color-primary);
	border-color: var(--qmt-color-primary);
	color: var(--qmt-color-primary-foreground);
}

.qmt-pagination a.page-numbers:hover {
	border-color: hsl(221 83% 53% / 0.35);
	color: var(--qmt-color-primary);
}

.qmt-empty-state {
	align-items: center;
	display: grid;
	gap: var(--qmt-space-4);
	justify-items: center;
	margin-inline: auto;
	max-width: 52rem;
	text-align: center;
}

.qmt-empty-state h2,
.qmt-empty-state p {
	margin: 0;
}

.qmt-empty-state p {
	color: var(--qmt-color-muted);
	max-width: 38rem;
}

.qmt-empty-search {
	max-width: 36rem;
	width: 100%;
}

.qmt-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qmt-space-3);
	justify-content: center;
}

.qmt-empty-tools {
	display: grid;
	gap: var(--qmt-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--qmt-space-4);
	text-align: left;
	width: 100%;
}

.qmt-search-form {
	display: flex;
	gap: var(--qmt-space-2);
}

.qmt-search-form input[type="search"] {
	background: var(--qmt-color-surface);
	border: 1px solid var(--qmt-color-border);
	border-radius: var(--qmt-radius-lg);
	color: var(--qmt-color-body);
	min-height: 2.75rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	width: 100%;
}

.qmt-search-form button {
	background: var(--qmt-color-primary);
	border: 1px solid var(--qmt-color-primary);
	border-radius: var(--qmt-radius-lg);
	color: var(--qmt-color-primary-foreground);
	font-weight: var(--qmt-weight-semibold);
	padding-inline: var(--qmt-space-5);
}

@media (max-width: 1024px) {
	.qmt-archive-grid,
	.qmt-search-result-grid,
	.qmt-topic-grid,
	.qmt-tool-grid,
	.qmt-empty-tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.qmt-listing-wrap {
		padding-block: var(--qmt-space-5) var(--qmt-space-10);
	}

	.qmt-archive-hero {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--qmt-space-5);
	}

	.qmt-archive-discovery {
		grid-template-columns: minmax(0, 1fr);
	}

	.qmt-archive-hero p {
		font-size: var(--qmt-font-size-base);
	}

	.qmt-archive-grid,
	.qmt-search-result-grid,
	.qmt-topic-grid,
	.qmt-tool-grid,
	.qmt-empty-tools {
		grid-template-columns: minmax(0, 1fr);
	}

	.qmt-search-form,
	.qmt-empty-actions {
		flex-direction: column;
	}

	.qmt-search-form button,
	.qmt-empty-actions .qmt-button {
		width: 100%;
	}
}