/* Blog (Insights): listing header, category links, search form and the article page (pagination styles are in base.css). */

/* ---------- Listing header ---------- */

.th-blog-header {
	padding-bottom: 0;
}

.th-blog-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: clamp(28px, 4vw, 40px);
}

.th-blog-header__inner .th-intro {
	flex: 1 1 520px;
}

.th-blog-header h1 {
	font-size: var(--th-fs-h2);
}

/* Category links, as tabs along the bottom of the header. */
.th-blog-filter {
	display: flex;
	gap: 4px 28px;
	overflow-x: auto;
	scrollbar-width: none;
}

.th-blog-filter a {
	flex: none;
	padding: 12px 0;
	border-bottom: 3px solid transparent;
	color: var(--th-text-muted);
	font-size: var(--th-fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.th-blog-filter a:hover {
	color: var(--th-navy);
}

.th-blog-filter a[aria-current] {
	border-bottom-color: var(--th-blue);
	color: var(--th-navy);
}

/* ---------- Search form (core markup: get_search_form) ---------- */

.search-form {
	display: flex;
	flex: 0 1 380px;
	min-width: 0;
	max-width: 100%;
}

.search-form label {
	flex: 1;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--th-border-strong);
	border-right: 0;
	border-radius: var(--th-radius-sm) 0 0 var(--th-radius-sm);
	background: var(--th-white);
	color: var(--th-text);
	font: inherit;
	font-size: var(--th-fs-body);
}

.search-form .search-field:focus-visible {
	outline-offset: -1px;
}

.search-form .search-submit {
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 0 var(--th-radius-sm) var(--th-radius-sm) 0;
	background: var(--th-navy);
	color: var(--th-white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.search-form .search-submit:hover {
	filter: brightness(1.12);
}

/* ---------- Article ---------- */

.th-article__header h1 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	text-wrap: balance;
}

.th-article__header .th-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.th-article__header .th-eyebrow a:hover {
	text-decoration: underline;
}

.th-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: var(--th-text-muted);
	font-size: var(--th-fs-sm);
}

.th-article__image img {
	display: block;
	width: 100%;
}

.th-blog-more__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
	justify-content: space-between;
}

.th-blog-more__head h2 {
	font-size: var(--th-fs-h2-sm);
}