/* ============================================================
   search.css — Public search results (newsprint family)
   Loaded only on /search.php (scoped via body.search).
   Mirrors the token system from editorial.css / jobs.css.
   ============================================================ */

/* ---------- Page-scoped token overrides ----------
   Shared tokens come from tokens.css (:root). Only the paper pair differs. */
body.search {
	--paper: #F4F1EA;
	--paper-pure: #FBF9F3;

	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ------------- Filter Bar ------------- */
body.search .search-filter {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto auto;
	gap: var(--s-4);
	align-items: anchor-center;
	padding: var(--s-4) 0 var(--s-5);
	border-bottom: 1px solid var(--ink);
	margin-bottom: var(--s-6);
  background: var(--white);
  padding: var(--s-5);
}

body.search .search-filter__field {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}

body.search .search-filter__label {
	font-family: var(--font-furniture);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--muted);
}

body.search .search-filter__input,
body.search .search-filter__select {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink);
	padding: var(--s-2) 0;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
}

body.search #searchResultsPage a {
	text-decoration: none;
}

/* ---------- Page header ---------- */
body.search .searchPageHeader {
	padding: var(--s-5) 0 var(--s-4);
	border-bottom: 3px double var(--rule);
	margin-bottom: var(--s-5);
}

body.search .searchPageHeading {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 var(--s-2);
}

body.search .searchPageMeta {
	font-family: var(--font-furniture);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0;
}

body.search .searchPageMeta a {
	color: var(--accent);
}

/* ---------- Result list ---------- */
body.search .searchPageList {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.search .searchPageItem {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule-soft);
	background: transparent;
}

body.search .searchPageThumbLink {
	flex: 0 0 96px;
}

body.search .searchPageThumb {
	width: 96px;
	height: 72px;
	object-fit: cover;
	display: block;
	background: var(--tint);
	filter: saturate(0.9) contrast(1.02);
}

body.search .searchPageText {
	min-width: 0;
}

body.search .searchPageTitle {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	display: inline-block;
	margin-bottom: var(--s-2);
}

body.search .searchPageTitle:hover {
	color: var(--link-hover);
}

body.search .searchPageTeaser {
	font-size: 0.9rem;
	color: var(--ink-soft);
	margin: 0 0 var(--s-2);
}

body.search .searchPageDate {
	font-family: var(--font-furniture);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

/* ---------- Empty states ---------- */
body.search .searchPageEmpty {
	padding: var(--s-6) var(--s-4);
	text-align: center;
	background: var(--paper-pure);
	border: 1px solid var(--rule-soft);
	color: var(--ink-soft);
}

body.search .searchPageEmpty a {
	color: var(--accent);
}

/* ---------- Pager ---------- */
body.search .searchPagePager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
	padding: var(--s-5) 0 var(--s-6);
	font-family: var(--font-furniture);
	font-size: 0.85rem;
}

body.search .pagerLink {
	display: inline-block;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--rule-soft);
	color: var(--ink);
	background: var(--paper-pure);
}

body.search a.pagerLink:hover {
	border-color: var(--rule);
	color: var(--link-hover);
}

body.search .pagerCurrent {
	background: var(--ink);
	color: var(--paper-pure);
	border-color: var(--ink);
}

/* ---------- Mobile ---------- */
@media (max-width: 650px) {
	body.search .searchPageThumbLink {
		flex-basis: 72px;
	}

	body.search .searchPageThumb {
		width: 72px;
		height: 56px;
	}
}