/* ==========================================================================
   ARCHIVE CSS - opportunity archive, taxonomy archives, and search results.
   ========================================================================== */

.archive-header {
	padding-block: 32px 8px;
}
.archive-header__title {
	font-size: 26px;
	font-weight: 800;
	color: var(--color-navy-900);
	margin: 0 0 6px;
}
.archive-header__count {
	color: var(--color-text-muted);
	font-size: 14px;
	margin: 0;
}

.filters-bar {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	padding-block: 14px;
	z-index: 20;
}
.filters-bar__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}
.filters-bar select,
.filters-bar input {
	width: 100%;
}

@media (min-width: 900px) {
	.filters-bar__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
		align-items: center;
	}
	/* With the academic level select the row is one column wider; the keyword
	   field gives up the space rather than every select getting narrower. */
	.filters-bar__grid--six {
		grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto;
	}
	/* Guidance & Resources filter bar only has a type select + a submit
	   button - the 5-column grid above would leave awkward empty tracks. */
	.filters-bar__grid--simple {
		grid-template-columns: 1fr auto;
	}
}

.results-grid {
	padding-block: 32px;
	grid-template-columns: 1fr;
}
.results-grid[data-loading="1"] {
	opacity: 0.5;
	pointer-events: none;
}
.results-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.results-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Moved here from single.css: single.css only loads on a single
   opportunity, so these rules never reached the search page they were
   written for. archive.css is the one loaded on is_search(). */
/* --- Search: nothing found -------------------------------------------------- */
.results-empty--search {
	text-align: left;
	max-width: 680px;
	margin-inline: auto;
	padding: 40px 24px 48px;
	color: var(--color-text-muted);
}
.results-empty__title {
	margin: 0 0 8px;
	font-size: clamp(21px, 3vw, 27px);
	letter-spacing: -0.02em;
	color: var(--color-navy-900);
}
.results-empty__label {
	margin: 26px 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.results-empty__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.results-empty__chips a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	text-decoration: none;
}
.results-empty__chips a:hover {
	border-color: var(--color-primary-ink);
	color: var(--color-primary-ink);
}
.results-empty__recent {
	list-style: none;
	margin: 0;
	padding: 0;
}
.results-empty__recent a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	text-decoration: none;
}
.results-empty__recent a:hover { color: var(--color-primary-ink); }
.results-empty__recent svg { color: var(--color-primary-ink); }

/* ==========================================================================
   MOBILE: nothing tall gets to be sticky.

   The filter bar stacks on a narrow screen and can run to half the viewport.
   Sticking that leaves a couple of centimetres of actual results visible
   underneath it, which is worse than simply scrolling past it once. Same for
   the search field: it is used at the start of a visit, not throughout it.
   ========================================================================== */
@media (max-width: 767px) {
	.filters-bar {
		position: static;
		top: auto;
		z-index: auto;
	}
}