/* Heroes must fit this reservation before and after upgrade, including their controls. */
.post-header:has(.post-hero-inner:not(:empty)) {
	max-width: none;
	padding-block-start: 0;
	padding-inline: 0;
}

.post-header:has(.post-hero-inner:not(:empty)) > .post-heading {
	width: 100%;
	max-width: var(--layout-content-max-width);
	margin-inline: auto;
	padding-inline: max(var(--space-4), var(--safe-area-left)) max(var(--space-4), var(--safe-area-right));
}

.post-hero-band {
	--post-hero-height: 400px;
	width: 100%;
	height: var(--post-hero-height);
	box-sizing: border-box;
	background: var(--color-surface-band);
	color: var(--color-text-primary);
	border-bottom: var(--border-width-thick) solid var(--color-border-chart);
}

.post-hero-band:has(> .post-hero-inner:empty) {
	display: none;
}

.post-hero-inner {
	container-type: inline-size;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	width: 100%;
	height: 100%;
	max-width: var(--layout-content-max-width);
	margin-inline: auto;
	padding-inline: max(var(--space-4), var(--safe-area-left)) max(var(--space-4), var(--safe-area-right));
}

@media (max-width: 600px) {
	.post-hero-band {
		--post-hero-height: 320px;
	}
}

.post-hero-inner--full-width {
	max-width: none;
	padding-inline: 0;
}