/*
 * ArtX search page: the results heading (lg at xs, xl from sm, the term in
 * blue) 40px below the header, the tabs row 30px below the heading (40px
 * tall at xs with 30px pills, 50px from sm with 40px pills carrying a 12px
 * count), the works section (grid.css, filters.css) with its filter bar
 * 40px below the tabs and no works heading, and the Artists tab's count
 * line and rail (artist-rail.css). Reads tokens.css; tokens.md "Search
 * page".
 */

.artx-search__frame {
	padding-top: var(--artx-space-4);
}

.artx-search-header__heading {
	margin: 0;
	color: var(--artx-color-black-100);
	font-size: var(--artx-type-lg-size);
	line-height: var(--artx-type-lg-line);
	letter-spacing: var(--artx-type-lg-tracking);
	font-weight: var(--artx-font-weight-regular);
}

.artx-search-header__term {
	color: var(--artx-color-blue-100);
}

.artx-search-tabs {
	display: flex;
	gap: var(--artx-filter-gap);
	height: var(--artx-search-tabs-row-height);
	margin-top: 30px;
	padding-top: var(--artx-space-1);
	overflow-x: auto;
	scrollbar-width: none;
}

.artx-search-tabs::-webkit-scrollbar {
	display: none;
}

.artx-search-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: var(--artx-pill-height);
	padding: var(--artx-pill-padding);
	border: 1px solid var(--artx-color-black-15);
	border-radius: var(--artx-pill-radius);
	color: var(--artx-color-black-100);
	font-size: var(--artx-type-xs-size);
	line-height: var(--artx-type-xs-line);
	white-space: nowrap;
}

.artx-search-tab:hover,
.artx-search-tab:focus-visible {
	border-color: var(--artx-color-black-100);
	color: var(--artx-color-black-100);
}

.artx-search-tab--active,
.artx-search-tab--active:hover,
.artx-search-tab--active:focus-visible {
	background: var(--artx-color-blue-100);
	border-color: var(--artx-color-blue-100);
	color: var(--artx-color-white-100);
}

.artx-search-tab__count {
	display: none;
	position: relative;
	top: -6px;
	margin-left: var(--artx-space-0-5);
	color: var(--artx-color-blue-100);
	font-size: var(--artx-type-xxs-size);
	line-height: 0;
}

.artx-search-tab--active .artx-search-tab__count {
	color: var(--artx-color-white-100);
}

.artx-search-artists {
	margin-top: var(--artx-space-4);
}

.artx-search-artists__count {
	margin: 0;
	font-size: var(--artx-type-sm-size);
	line-height: var(--artx-results-count-line);
	font-weight: var(--artx-font-weight-bold);
}

.artx-search-artists .artx-artist-rail {
	margin-top: var(--artx-space-2);
}

/* The works section: the filter bar 40px below the tabs; its pills sit 10px inside the
   50px bar here (on the artist page they sit on the bar's top edge), as measured */
.artx-search .artx-works {
	margin-top: var(--artx-space-4);
}

.artx-search .artx-works > .artx-filter-bar {
	margin-top: 0;
}

.artx-search .artx-filter-bar__row {
	padding-top: var(--artx-space-1);
}

@media (min-width: 768px) {
	.artx-search-header__heading {
		font-size: var(--artx-type-xl-size);
		line-height: var(--artx-type-xl-line);
		letter-spacing: var(--artx-type-xl-tracking);
	}

	.artx-search-tab {
		font-size: var(--artx-type-sm-size);
		line-height: 20px;
	}

	.artx-search-tab__count {
		display: inline-block;
	}

	.artx-search-artists__count {
		font-size: var(--artx-type-xs-size);
		font-weight: var(--artx-font-weight-regular);
	}
}

.artx-search .artx-filter-bar__row--sm::after {
	top: var(--artx-space-1);
}

@media (max-width: 767px) {
	.artx-search .artx-works__count {
		margin-top: 90px;
	}
}

.artx-search-correction, .artx-search-interpretation { margin: 20px 0 0; max-width: 75ch; line-height: 1.6; }
.artx-search-correction a, .artx-search-interpretation a { text-decoration: underline; text-underline-offset: 3px; }
.artx-search-recovery { padding: 24px; background: var(--artx-color-black-5, #f5f5f5); margin-top: 20px; }
.artx-search-recovery p { margin: 0 0 12px; }
.artx-search-recovery__links { display: flex; flex-wrap: wrap; gap: 12px; }
.artx-search-recovery__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: white; border: 1px solid #ccc; border-radius: 24px; }
.artx-search-recovery a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.artx-search-header__heading { overflow-wrap: anywhere; }