/*
 * Hakutulokset (avalon/search-results): the search page's results as a list. Each result: a small picture when it has one,
 * the type in small capitals, the title, a short extract; hairlines between the results, sharp corners, no shadows, as
 * everywhere on the site. The list starts at the page's left edge (as the hero's text); the text lines are at most 860px.
 * The page numbers are the posts' (posts.css).
 */

.ab-search-results__count {
	margin: 0 0 8px;
	color: var(--ab-muted, #4a5563);
	font-size: 16px;
	font-weight: 500;
}

.ab-results {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ab-line, #d6e0e8);
}

.ab-result {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin: 0;
	padding: 28px 0;
	border-bottom: 1px solid var(--ab-line, #d6e0e8);
}

.ab-result__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--ab-tint, #eaf8f9);
}

/* a result without a picture: the same tile with a small document icon, so the texts start on one line */
.ab-result__media--none {
	background: var(--ab-tint, #eaf8f9) url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z' stroke='%2330a9b0' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6' stroke='%2330a9b0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px no-repeat;
}

.ab-result__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ab-result__body {
	max-width: 860px;
}

.ab-result__type {
	margin: 0 0 6px;
	color: var(--ab-accent-ink, #0e7c83);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ab-result__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.ab-result__title a {
	color: var(--ab-heading, #012b55);
	text-decoration: none;
}

.ab-result__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ab-result__title a:focus-visible {
	outline: 3px solid var(--ab-navy, #002b56);
	outline-offset: 3px;
}

.ab-result__excerpt {
	margin: 0;
	color: var(--ab-muted, #4a5563);
	font-size: 17px;
	line-height: 1.55;
}

.ab-result mark {
	background: rgba(48, 203, 211, 0.3);
	color: inherit;
}

/* nothing found */
.ab-noresults {
	max-width: 720px;
	padding: 8px 0 24px;
}

.ab-noresults__title {
	margin: 0 0 12px;
	color: var(--ab-heading, #012b55);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.ab-noresults__hint {
	margin: 0 0 20px;
	color: var(--ab-muted, #4a5563);
	font-size: 17px;
	line-height: 1.55;
}

.ab-noresults__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-noresults__links li {
	margin: 0;
}

.ab-noresults__links a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--ab-line, #cfd9e2);
	color: var(--ab-heading, #012b55);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.ab-noresults__links a:hover {
	border-color: var(--ab-navy, #002b56);
}

.ab-search-results .ab-pagination {
	margin-top: 40px;
}

@media (max-width: 768px) {
	.ab-result {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
		padding: 20px 0;
	}

	.ab-result__title {
		font-size: 19px;
	}

	.ab-result__excerpt {
		font-size: 15px;
	}

	.ab-noresults__title {
		font-size: 22px;
	}
}