/**
 * Blog base: layout of the list pages, hero details, category chips row, pagination and the
 * search form. Uses only the site's design tokens (site.css defines them). Hand-written.
 */

/* Page background and text colour follow the site tokens, in light and dark. */
body.bwm-blog {
	margin: 0;
	background: var(--page-bg);
	color: var(--text-2);
	font: var(--text-body);
}

/* The hero is the site's PageHero; these only cover what a blog adds to it. */
.PostHero__meta {
	margin: var(--space-4) 0 0;
	color: var(--brand-text-on-dark);
	font: var(--text-body-sm);
}

.PostHero__eyebrowLink {
	color: inherit;
	text-decoration: none;
}

.PostHero__eyebrowLink:hover,
.PostHero__eyebrowLink:focus-visible {
	text-decoration: underline;
}

/* The chips row sits above the grid with the same rhythm as the site's filter chips. */
.FilterChips__chips[data-chips] {
	margin-bottom: var(--space-8);
}

.FilterChips__chips[data-chips] a.FilterChips__chip {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Grid of post cards: spacing under the chips, and the empty state. */
.PostGrid__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.PostGrid__empty {
	margin: var(--space-8) 0;
	text-align: center;
	font: var(--text-body-lg);
}

.PostGrid__back {
	margin: var(--space-6) 0 var(--space-10);
}

/* Pagination: pill links like the chips, current page filled. */
.Pagination__nav {
	margin-top: var(--space-10);
}

.Pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0 var(--space-4);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-full);
	background: var(--surface-raised);
	color: var(--text-1);
	font: var(--text-chip-label);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.Pagination__list a.page-numbers:hover,
.Pagination__list a.page-numbers:focus-visible {
	background: var(--surface-hover-strong);
}

.Pagination__list .page-numbers.current {
	border-color: var(--chip-active-bg);
	background: var(--chip-active-bg);
	color: var(--chip-active-text);
}

.Pagination__list .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Search form: one floating field and a button on a line, stacked on phones. */
.SearchForm__form {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	max-width: var(--size-prose-max);
	margin: 0 auto var(--space-8);
}

.SearchForm__field {
	flex: 1;
}

.SearchForm__form .Button__button {
	min-height: var(--input-height);
}

/* Phone: the search button goes under the field. */
@media (max-width: 640px) {
	.SearchForm__form {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Visitors who prefer less motion get no sliding capsule transitions on the chips. */
@media (prefers-reduced-motion: reduce) {
	.Pagination__list .page-numbers {
		transition: none;
	}
}

/* Cookie bar and settings dialog: hidden until consent-ui.js shows them. The site's own classes set a display
   (flex), which would beat the browser's [hidden], so hidden is made to win here. */
#bwm-consent [hidden] {
	display: none !important;
}