.search-page{
	--search-green:#0d5c40;
	--search-ink:#20332a;
	--search-muted:#52685d;
	--search-gold:#e8a428;
	--search-line:rgba(13,92,64,.14);
	background:
		radial-gradient(circle at 8% 0,rgba(232,164,40,.08),transparent 22rem),
		radial-gradient(circle at 96% 12%,rgba(13,92,64,.07),transparent 24rem),
		#f8fbf9;
	color:var(--search-ink);
}
.search-page *{box-sizing:border-box}
.main_bg.search-page > .wrap > .search-main{
	padding:1rem 0 3.5rem;
	overflow-x:clip;
	min-height:32rem;
}
.search-breadcrumb{margin-bottom:.85rem}

.search-hero{
	background:#fff;
	border:1px solid var(--search-line);
	border-radius:24px;
	padding:1.35rem 1.25rem 1.2rem;
	box-shadow:0 16px 40px rgba(20,54,39,.07);
	min-height:11.5rem;
}
.search-hero__eyebrow{
	margin:0 0 .35rem;
	color:var(--search-green);
	font-size:.82rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}
.search-hero h1{
	margin:0 0 1rem;
	font-size:clamp(1.45rem,2.4vw,2rem);
	line-height:1.25;
	color:var(--search-ink);
	overflow-wrap:anywhere;
}
.search-hero__form{
	display:flex;
	gap:10px;
	align-items:center;
	max-width:42rem;
	position:relative;
	overflow:visible;
}
/* flex-basis must stay auto: the form switches to a column on mobile, where a
   basis of 0 would control the height and collapse the field to its text size. */
.search-hero__form input[type="search"]{
	flex:1 1 auto;
	min-width:0;
	width:100%;
	height:48px;
	min-height:48px;
	border:1px solid var(--search-line);
	border-radius:999px;
	padding:0 18px;
	font:inherit;
	background:#f8fbf9;
	color:var(--search-ink);
	outline:none;
}
.search-hero__form input[type="search"]:focus{
	border-color:var(--search-green);
	background:#fff;
	box-shadow:0 0 0 3px rgba(13,92,64,.12);
}
.search-hero__form button{
	appearance:none;
	flex:0 0 auto;
	border:0;
	height:48px;
	min-height:48px;
	min-width:44px;
	padding:0 22px;
	border-radius:999px;
	background:var(--search-green);
	color:#fff;
	font-weight:700;
	font:inherit;
	cursor:pointer;
}
.search-hero__form button:hover{background:#084530}
.search-hero__count{
	margin:.75rem 0 0;
	color:var(--search-muted);
	font-size:.95rem;
}

.search-filters{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:1.1rem 0 1.25rem;
}
.search-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:44px;
	padding:0 14px;
	border-radius:999px;
	border:1px solid var(--search-line);
	background:#fff;
	color:var(--search-ink);
	text-decoration:none;
	font-size:.92rem;
	font-weight:600;
}
.search-chip span{
	display:inline-flex;
	min-width:1.4em;
	justify-content:center;
	color:var(--search-muted);
	font-weight:700;
	font-size:.82rem;
}
.search-chip.is-active{
	background:var(--search-green);
	border-color:var(--search-green);
	color:#fff;
}
.search-chip.is-active span{color:#fff}
.search-chip:hover{border-color:var(--search-green)}

.search-results{
	display:grid;
	gap:14px;
}
.search-card{
	display:grid;
	grid-template-columns:140px minmax(0,1fr);
	gap:16px;
	align-items:stretch;
	background:#fff;
	border:1px solid var(--search-line);
	border-radius:18px;
	padding:14px;
	min-height:133px;
	box-shadow:0 10px 24px rgba(20,54,39,.05);
}
.search-card__thumb{
	display:block;
	width:140px;
	height:105px;
	border-radius:12px;
	overflow:hidden;
	background:linear-gradient(180deg,#e8f4ee,#d9eee4);
	flex-shrink:0;
}
.search-card__thumb img,
.search-card__thumb picture,
.search-card__thumb picture img{
	display:block;
	width:140px;
	height:105px;
	object-fit:cover;
}
.search-card__icon{
	display:block;
	width:100%;
	height:100%;
	background:
		radial-gradient(circle at 30% 30%,rgba(232,164,40,.35),transparent 46%),
		linear-gradient(160deg,#0d5c40,#157451);
}
.search-card--portal .search-card__icon{
	background:
		radial-gradient(circle at 70% 24%,rgba(255,255,255,.28),transparent 42%),
		linear-gradient(160deg,#084530,#1a8f63);
}
.search-card--training .search-card__icon{
	background:
		radial-gradient(circle at 24% 70%,rgba(232,164,40,.4),transparent 46%),
		linear-gradient(160deg,#0b4a34,#0d5c40);
}
.search-card__body{min-width:0}
.search-card__meta{
	display:flex;
	flex-wrap:wrap;
	gap:8px 12px;
	align-items:center;
	margin-bottom:.4rem;
	color:var(--search-muted);
	font-size:.82rem;
}
.search-badge{
	display:inline-flex;
	align-items:center;
	min-height:24px;
	padding:0 8px;
	border-radius:999px;
	background:#e8f4ee;
	color:var(--search-green);
	font-weight:700;
	font-size:.75rem;
}
.search-card h2{
	margin:0 0 .35rem;
	font-size:1.08rem;
	line-height:1.35;
}
.search-card h2 a{
	color:var(--search-ink);
	text-decoration:none;
}
.search-card h2 a:hover{color:var(--search-green)}
.search-card h2 mark,
.search-card p mark{
	background:rgba(232,164,40,.35);
	color:inherit;
	padding:0 .1em;
	border-radius:2px;
}
.search-card p{
	margin:0 0 .7rem;
	color:var(--search-muted);
	font-size:.94rem;
	line-height:1.5;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.search-card__cta{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	color:var(--search-green);
	font-weight:700;
	text-decoration:none;
}
.search-card__cta:hover{color:#084530}

.search-empty{
	background:#fff;
	border:1px solid var(--search-line);
	border-radius:20px;
	padding:1.6rem 1.2rem;
	min-height:12rem;
}
.search-empty h2{margin:0 0 .5rem;font-size:1.25rem}
.search-empty p{margin:0 0 1rem;color:var(--search-muted);max-width:40rem}
.search-empty__links,
.search-empty__groups{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.search-empty__links a,
.search-empty__groups a{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 14px;
	border-radius:999px;
	border:1px solid var(--search-line);
	background:#f8fbf9;
	color:var(--search-ink);
	text-decoration:none;
	font-weight:600;
}
.search-empty__groups{margin-top:12px}
.search-empty__groups a{background:#fff}

.search-paging-wrap{margin-top:1.4rem}
.search-paging .page_ellipsis{min-width:44px;display:inline-flex;justify-content:center}

@media (max-width:720px){
	.search-hero{padding:1.1rem 1rem 1rem;border-radius:18px}
	.search-hero__form{
		flex-direction:row;
		align-items:center;
		gap:8px;
	}
	/* 16px keeps iOS Safari from zooming the page when the field takes focus. */
	.search-hero__form input[type="search"]{
		flex:1 1 0;
		width:auto;
		min-width:0;
		height:52px;
		min-height:52px;
		font-size:16px;
	}
	.search-hero__form button{
		flex:0 0 auto;
		width:auto;
		min-width:104px;
		height:52px;
		min-height:52px;
		padding:0 18px;
		font-size:1rem;
	}
	.search-card{
		grid-template-columns:96px minmax(0,1fr);
		gap:12px;
		padding:12px;
		min-height:120px;
	}
	.search-card__thumb,
	.search-card__thumb img,
	.search-card__thumb picture,
	.search-card__thumb picture img{
		width:96px;
		height:96px;
	}
	.search-card h2{font-size:1rem}
	/* Wrapping put the five filters on three rows and pushed the results below
	   the fold, so they scroll sideways on narrow screens instead. */
	.search-filters{
		gap:8px;
		flex-wrap:nowrap;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		scroll-snap-type:x proximity;
		scrollbar-width:none;
		padding-bottom:2px;
	}
	.search-filters::-webkit-scrollbar{display:none}
	.search-chip{
		flex:0 0 auto;
		scroll-snap-align:start;
		white-space:nowrap;
	}
	/* The global stylesheet drops pagination to 36px under 480px, which is below
	   a comfortable touch target. */
	.search-paging ul.pagination li a.page_item,
	.search-paging ul.pagination li span.page_item{
		min-width:44px;
		height:44px;
	}
}

@media (min-width:980px){
	.search-hero{padding:1.7rem 1.8rem 1.4rem}
	.search-results{gap:16px}
}