/* Performance Blog Grid — masonry listing with search
   Measured from reference: page bg #f8f8f8, search box #dddddd,
   meta/body text #333333 */

@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@400;500;700&display=swap');

.pbg-blog {
	--pbg-gap: 2rem;
	--pbg-col-min: 300px;
	font-family: 'Yantramanav', Arial, 'Helvetica Neue', sans-serif;
	background: #f8f8f8;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) 0;
}
.pbg-blog *, .pbg-blog *::before, .pbg-blog *::after {
	box-sizing: border-box;
}

/* ---------- Header: title + search ---------- */

.pbg-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.pbg-title {
	grid-column: 2;
	margin: 0;
	font-weight: 400;
	color: #333333;
	font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
	text-align: center;
	white-space: nowrap;
}

.pbg-search-form {
	grid-column: 3;
	justify-self: end;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 22rem;
}
.pbg-search-field {
	width: 100%;
	background: #dddddd;
	border: none;
	border-radius: 0.25rem;
	padding: 0.8rem 1rem 0.8rem 3rem;
	font-size: 1rem;
	font-family: inherit;
	color: #333333;
}
.pbg-search-field::placeholder {
	color: #6f6f6f;
}
.pbg-search-submit {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2.75rem;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a4a4a;
	cursor: pointer;
}

/* ---------- Masonry grid ---------- */

.pbg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--pbg-col-min), 1fr));
	gap: var(--pbg-gap);
	grid-auto-rows: 1px; /* fine-grained rows; JS sets each item's row-span */
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem);
	align-items: start;
}

.pbg-item {
	background: #ffffff;
}

.pbg-article {
	display: flex;
	flex-direction: column;
}

.pbg-thumb {
	display: block;
	line-height: 0;
	background: #eeeeee;
}
.pbg-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.pbg-body {
	padding: 1.5rem;
}

.pbg-meta {
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #333333;
	margin-bottom: 0.6rem;
}
.pbg-meta a {
	color: inherit;
	text-decoration: none;
}
.pbg-meta a:hover {
	color: #c7363a;
}

.pbg-post-title {
	margin: 0 0 0.85rem;
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
	line-height: 1.35;
	font-weight: 700;
}
.pbg-post-title a {
	color: #222222;
	text-decoration: none;
}
.pbg-post-title a:hover {
	color: #c7363a;
}

.pbg-excerpt {
	color: #555555;
	font-size: 1rem;
	line-height: 1.6;
}

.pbg-no-results {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem);
	color: #555555;
}

/* ---------- Pagination ---------- */

.pbg-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	max-width: 87.5rem;
	margin: 2.5rem auto 0;
	padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem);
}
.pbg-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: 0.25rem;
	background: #ffffff;
	color: #333333;
	text-decoration: none;
	font-size: 0.9375rem;
}
.pbg-page-link:hover {
	background: #ececec;
}
.pbg-page-current {
	background: #c7363a;
	color: #ffffff;
}

/* ---------- Mobile ---------- */

@media (min-width: 40.0625rem) {
	.pbg-header,
	.pbg-grid,
	.pbg-no-results,
	.pbg-pagination {
		max-width: 80%;
	}
	.pbg-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 40rem) {
	.pbg-header,
	.pbg-grid,
	.pbg-no-results,
	.pbg-pagination {
		max-width: 100%;
	}
	.pbg-grid {
		grid-template-columns: 1fr;
	}
	.pbg-header {
		grid-template-columns: 1fr;
		justify-items: stretch;
	}
	.pbg-title {
		grid-column: 1;
		white-space: normal;
	}
	.pbg-search-form {
		grid-column: 1;
		justify-self: stretch;
		max-width: none;
	}
}