/*
 * Post-Header variant: two-tone-split-bar (Business family, catalogue V16).
 *
 * Only what makes this design this design: the navy band, the lifted title card and the pale
 * ground. Palette, kicker, title face and meta row come from `variant-business-base.css`.
 *
 * **The pale ground is on the article, not on a section below the card**, and that is the one
 * place this design needed thinking about rather than copying. The catalogue tints a block that
 * begins under the card, so beside the card — left and right of the 820px column — the page
 * shows through. In the demo that is invisible: its frame is cream too. On a real page it is a
 * white gutter flanking a cream card, with a tinted band starting below it, and the header looks
 * assembled from spare parts.
 *
 * Putting the tint on the article fixes it without a wrapper, and without the trap the obvious
 * fix walks into: a tinted wrapper around the card would have the card's negative top margin
 * collapse through it and drag the tint up over the navy band. The band is the article's first
 * child, so nothing collapses here.
 */

.mfph-two-tone-split-bar {
	padding-bottom: 30px;
	background: var(--mfph-biz-cream-2);
}

.mfph-two-tone-split-bar__band {
	height: 80px;
	background: var(--mfph-biz-navy);
}

.mfph-two-tone-split-bar__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Half-way into the band: the overlap IS the design. */
.mfph-two-tone-split-bar__inner--lift {
	margin-top: -40px;
}

.mfph-two-tone-split-bar__card {
	padding: clamp(22px, 3vw, 34px);
	background: var(--mfph-biz-cream);
	border: 1px solid var(--mfph-biz-line);
	border-radius: 8px;
	box-shadow: 0 20px 40px -24px rgb(0 0 0 / 30%);
}

.mfph-two-tone-split-bar__title {
	font-size: clamp(24px, 3.4vw, 38px);
}

.mfph-two-tone-split-bar__fig {
	margin: 20px 0 0;
}

.mfph-two-tone-split-bar__fig img {
	display: block;
	width: 100%;
	height: auto;
}