/**
 * Section heading.
 *
 * Centred by default: chip, heading, text stacked. With jump pills the heading sits at
 * the inline start and the pills at the inline end from 640px; below that the heading
 * comes first and the pills wrap beneath it.
 */

.acini-sh {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-lg);
	inline-size: 100%;
}

.acini-sh__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	text-align: center;
}

.acini-sh--start .acini-sh__title,
.acini-sh--has-pills .acini-sh__title {
	align-items: flex-start;
	text-align: start;
}

.acini-sh__heading {
	inline-size: 100%;
	max-inline-size: 127.1rem;
	margin-inline: auto;
	font-size: var(--acini-text-2xl);
	font-weight: var(--acini-weight-bold);
	line-height: 1.29;
	color: var(--acini-text);
}

.acini-sh--start .acini-sh__heading,
.acini-sh--has-pills .acini-sh__heading {
	margin-inline: 0;
}

/* A heading followed by text sits closer than a chip above a heading. */
.acini-sh__heading + .acini-sh__text {
	margin-block-start: calc(-1 * var(--acini-space-xs));
}

.acini-sh__text {
	max-inline-size: 38.7rem; /* the design wraps this line at 387px */
	font-size: var(--acini-text-sm);
	line-height: 1.43;
	color: var(--acini-text-muted);
}

.acini-sh__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acini-space-sm);
}

@media (min-width: 40em) {
	.acini-sh--has-pills {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}