/* ==========================================================================
   Listings — design_reference/विभाग सूची पृष्ठ (category), tag, author, search, 404
   ========================================================================== */

/* Header */
.archive-head {
	display: grid;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--line);
}

.archive-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4);
}

.archive-head__main { display: grid; gap: var(--s-2); }

.archive-head__title {
	justify-self: start;
	padding-bottom: var(--s-2);
	border-bottom: 3px solid var(--cat, var(--brand));
	color: var(--heading);
	font-size: var(--fs-1);
}

.archive-head__desc,
.archive-head__count {
	max-width: 60ch;
	color: var(--muted);
	font-size: var(--fs-7);
}

.archive-head__related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	margin-top: var(--s-2);
	color: var(--muted);
	font-size: var(--fs-7);
}

.archive-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.archive-chips::-webkit-scrollbar { display: none; }
.archive-chips .pill { min-height: 36px; padding-inline: var(--s-4); }

/* Filters */
.archive-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}

.archive-filters__field {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding: 0 var(--s-2) 0 var(--s-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--muted);
	font-size: var(--fs-7);
}

.archive-filters__field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.archive-filters select {
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-weight: 700;
	cursor: pointer;
}

.archive-filters select:focus { outline: none; }


/* Lead + list */
.archive-lead { margin-bottom: var(--s-7); }

@media (min-width: 1024px) {
	.archive-lead__list {
		padding-left: var(--gutter);
		border-left: 1px solid var(--line);
	}
}

.archive-list > .card { padding-block: var(--s-2); }
.archive-empty { color: var(--muted); }

.archive-sidebar {
	display: grid;
	gap: var(--s-6);
	align-content: start;
}

.archive-sidebar__sticky {
	position: sticky;
	top: calc(var(--sticky-h) + var(--s-5)); /* the stuck header incl. the admin bar, not just the desktop nav */
}

/* Search */
.search-head .search-form { max-width: 720px; }
.search-head__count { color: var(--ink); font-weight: 700; }

mark {
	padding: 0 2px;
	border-radius: 2px;
	background: var(--tint);
	background: color-mix(in srgb, var(--warn) 35%, transparent);
	color: inherit;
}

.search-empty {
	display: grid;
	gap: var(--s-3);
	justify-items: start;
	max-width: 720px;
	margin-bottom: var(--s-6);
}

.search-empty h1,
.search-empty h2 { font-size: var(--fs-2); color: var(--heading); }
.search-empty > p { color: var(--muted); }
.search-empty .search-form { width: 100%; }

.search-empty > .not-found__code { /* .search-empty > p (above) would otherwise win on specificity. A decorative numeral: outside the type scale. */
	color: var(--brand);
	font: 700 clamp(4rem, 3rem + 5vw, 7rem) / 1 var(--font-body);
}

/* Author */
.author-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	align-items: center;
	margin-bottom: var(--s-6);
	padding: var(--s-6);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.author-head__label { color: var(--muted); font-size: var(--fs-7); }
.author-head__name { color: var(--heading); font-size: var(--fs-1); }
.author-head__bio { max-width: 60ch; margin-top: var(--s-2); }

.author-head__meta {
	display: flex;
	gap: var(--s-4);
	margin-top: var(--s-2);
	color: var(--muted);
	font-size: var(--fs-7);
}

.author-head__meta a { color: var(--blue); text-decoration: underline; }