/* ==========================================================================
   Post header (templates/single.html): maroon band with the category, title
   and date, and the featured image beside them.
   Featured images come in every shape (wide graphics, square photos, tall
   posters, small logos), so the image keeps its own proportions and is
   never cropped or enlarged. Posts without one get the band on its own.
   Loaded on single posts only (functions.php).
   ========================================================================== */

.mv-post-hero {
	margin-block: 0;
	background: var(--mv-maroon);
	color: var(--mv-surface);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Spacing in here is set explicitly, not by WordPress's block gap. */
.mv-post-hero :where(p, h1, figure, .wp-block-group, .wp-block-post-terms, .wp-block-post-date) {
	margin-block: 0;
}
.mv-post-hero .is-layout-flow > * {
	margin-block-start: 0;
}

.mv-post-hero-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px 56px;
	width: min(1040px, calc(100% - 2 * var(--mv-gutter)));
	margin-inline: auto;
	padding-block: 48px 56px;
}
.mv-post-hero-copy {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mv-post-hero .wp-block-post-title {
	text-wrap: balance;
}

/* Two classes, so these win over the core featured image styles (width: 100%). */
.mv-post-hero .mv-post-hero-media {
	flex: 0 1 460px;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.mv-post-hero .mv-post-hero-media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 340px;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--card);
}

@media (max-width: 782px) {
	.mv-post-hero-inner {
		gap: 20px;
		padding-block: 28px 32px;
	}
	.mv-post-hero .mv-post-hero-media {
		flex-basis: 100%;
	}
	.mv-post-hero .mv-post-hero-media img {
		max-height: 420px;
	}
}