/**
 * Blog listing + single post. Reuses the services archive's page shell and
 * the service-card grid pattern so the blog feels consistent with the rest
 * of the site rather than a bare generic list.
 */

/* Banner — same shell as .about-hero. ---------------------------------- */

.blog-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.blog-hero__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-display);
	line-height: var(--text-display-lh);
	color: var(--color-black);
}

.blog-hero__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-text-muted);
	max-width: 760px;
}

.blog-hero__image {
	height: 520px;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.blog-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.blog-archive {
	padding-bottom: var(--space-13);
}

/* Category archives have no banner above them (that's Blog-page-only ACF
   content), so they need their own top spacing under the fixed header. */
.blog-archive--no-hero {
	padding-top: var(--space-12);
}

.blog-archive__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.blog-archive__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-gray-600);
	margin-bottom: var(--space-4);
}

.blog-archive__empty {
	font-family: var(--font-body);
	color: var(--color-text-muted);
}

.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-9);
}

.blog-filters__link {
	display: inline-flex;
	align-items: center;
	background: var(--color-gray-100);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-heading);
	font-size: var(--text-caption);
	color: var(--color-gray-900);
}

.blog-filters__link.is-current {
	background: var(--color-gray-900);
	border-color: var(--color-gray-900);
	color: var(--color-white);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--color-gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.blog-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__text {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.blog-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-caption);
}

.blog-card__category {
	font-weight: var(--weight-medium);
	color: var(--color-primary-text);
	text-transform: uppercase;
	letter-spacing: var(--text-tag-ls);
}

.blog-card__date {
	color: var(--color-gray-500);
}

.blog-card__title {
	font-size: var(--text-subtitle);
	line-height: var(--text-subtitle-lh);
	font-weight: var(--weight-medium);
	color: var(--color-gray-900);
}

.blog-card__excerpt {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	color: var(--color-gray-500);
}

.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-caption);
	color: var(--color-gray-900);
}

.blog-card__link svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Single post ----------------------------------------------------------- */

.generic-page__back {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--text-caption);
	color: var(--color-gray-600);
	margin-bottom: var(--space-6);
}

.generic-page__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-caption);
	margin-bottom: var(--space-4);
}

.generic-page__meta-category {
	font-weight: var(--weight-medium);
	color: var(--color-primary-text);
	text-transform: uppercase;
	letter-spacing: var(--text-tag-ls);
}

.generic-page__meta-date {
	color: var(--color-gray-500);
}

.related-posts {
	padding: var(--space-13) 0;
}

.related-posts__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.related-posts__heading {
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	font-weight: var(--weight-light);
	margin-bottom: var(--space-8);
}