/*
 * ANPS Agency: blog.css (context `blog`: blog home, category / tag / author / date archives, search)
 * =============================================================================
 * Ported from design/html/blog-desktop.html and blog-mobile.html. Cards live in cards.css,
 * the newsletter form in the anps/newsletter block style.
 *
 * Sections: .blog-hero (breadcrumbs, H1 + intro, mobile search) · .blog-fbar (topic chips + desktop
 * search, sticky) · .blog-list (featured post, grid, .pager). The newsletter band (.nl-band) is styled
 * by the anps/newsletter block, so it also works on single posts.
 */

/* -------------------------------------------------------------- hero -- */

.blog-hero {
	padding-top: 96px;
	background: var(--py);
}

.bh-wrap {
	padding-top: 72px;
	padding-bottom: 72px;
}

.bh-grid {
	margin-top: 64px;
	align-items: end;
}

.bh-title {
	grid-column: 1 / span 7;
}

.bh-intro {
	grid-column: 8 / span 5;
}

/* ------------------------------------------------------ search form -- */

.srch {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 4px;
	min-width: 280px;
	color: var(--ink);
	transition: border-color 0.25s;
}

.srch svg {
	flex: none;
}

.srch:focus-within {
	border-color: var(--ink);
}

.srch input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
}

.srch input::placeholder {
	color: var(--ink2);
	opacity: 1;
}

.srch:has(input:focus-visible) {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* ------------------------------------------------------- topics bar -- */

.fbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.blog-topics .opts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-topics li {
	display: flex;
}

/* ------------------------------------------------------------ posts -- */

.blog-list {
	background: var(--paper);
}

.bl-wrap {
	padding-top: 64px;
	padding-bottom: 120px;
}

.post-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 24px 0 48px;
}

/* -------------------------------------------------------- pagination -- */

.pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 88px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.pager-of {
	font-size: 15px;
	color: var(--ink2);
}

.pager ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}

.pager ol a,
.pager-gap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 500;
}

.pager ol a {
	border: 1px solid var(--line);
	color: var(--ink);
	transition: border-color 0.25s;
}

.pager ol a:hover {
	border-color: var(--ink);
}

.pager ol a[aria-current] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.pager-dir {
	display: flex;
	align-self: flex-start;
	gap: 32px;
}

.pager-dir .tl {
	padding: 10px 0 7px;
}

.pager-prev .arw svg {
	scale: -1 1;
}

/* ------------------------------------------------------------ tablet -- */

@media (max-width: 900px) {

	.bh-title,
	.bh-intro {
		grid-column: 1 / -1;
	}

	.bh-grid {
		row-gap: 28px;
	}

	.fbar-in {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------ mobile -- */

@media (max-width: 600px) {

	.blog-hero {
		padding-top: 72px;
	}

	.bh-wrap {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding-top: 28px;
		padding-bottom: 36px;
	}

	.bh-grid {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-top: 0;
	}

	.bh-intro {
		font-size: 18px;
		line-height: 1.35;
		text-wrap: wrap;
	}

	.srch.srch-m {
		min-width: 0;
		background: var(--paper);
	}

	.fbar-in {
		display: block;
		min-height: 0;
		padding: 0;
	}

	.blog-topics .opts {
		padding: 12px 20px;
	}

	.bl-wrap {
		padding-top: 32px;
		padding-bottom: 56px;
	}

	.pager {
		margin-top: 48px;
		padding-top: 40px;
	}

	.pager-of {
		display: none;
	}

	.pager ol a {
		width: 40px;
	}

	.pager-dir {
		gap: 20px;
	}
}