/*
 * Blog index hero — Figma 216:2080.
 *
 * A short band (355px total) with no photo, so the headline sits directly on
 * the inner-page gradient painted on the body.
 */

.blog-hero {
	padding: 40px var(--gutter-mobile) 60px;
}

.blog-hero__container {
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: var(--container);
	margin: 0 auto;
}

.blog-hero__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 785px;
	text-align: center;
}

.blog-hero__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.blog-hero__text {
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

@media (min-width: 1024px) {
	.blog-hero { padding: 40px var(--gutter) 60px; }
	.blog-hero__container { gap: 60px; }
	/* Figma centres the headline block in the container, not against the crumb. */
	.blog-hero__headline { align-self: center; }
	.blog-hero__title { font-size: var(--h2-size); }
}