/* About us — Join us: an insertion of the reusable Insights callout
 * (patterns/solutions-insights.php, node 2646:5382). Everything this section
 * looks like lives in assets/css/sections/solutions-insights.css; this file
 * holds only what the About comp changes. Scoped to BOTH classes the
 * inserted markup carries, for the same reason about-hero.css is: this file
 * loads before the base one and the compound selector outweighs it. */

.infinitus-section--about-join-us.infinitus-section--solutions-insights {
	/* The committed photograph is the node's composite trimmed to the right
	   of x 514 (see bin/about-page/content/join-us.php): 926 x 513 at 1x. */
	--solutions-insights-media-aspect: 926 / 513;
	/* Node 2646:5399: the two paragraphs are one text layer with an empty
	   line between them, 30px at 20/1.5. No 30 rung; sp-8 (32). The
	   pattern's lede rule gives the second paragraph the title→lede gap. */
	--about-join-us-paragraph-gap: var(--wp--preset--spacing--sp-8);
	/* Below 768 the photograph becomes a band under the CTA. No comp; sp-8. */
	--about-join-us-band-gap: var(--wp--preset--spacing--sp-8);
}

.infinitus-section--about-join-us .solutions-insights__lede + .solutions-insights__lede {
	margin-block-start: var(--about-join-us-paragraph-gap);
}

/* The node's left-to-right N900 gradient (Rectangle 136) is baked into the
   photograph, so at the split the pattern's own scrim is switched off:
   painted on top of the baked one it darkens the subject twice. Below 1280
   the pattern's flat wash stays — there the picture is a backdrop behind
   the copy and the wash is what keeps the lede legible over it. */
@media (min-width: 1280px) {
	.infinitus-section--about-join-us.infinitus-section--solutions-insights::after {
		background-image: none;
	}
}

/* Mobile: photo below the copy, gradient kept (#917's recorded assumption).
   The media layer leaves the backdrop and flows after the container as a
   full-width band; the flat wash goes with it — the copy sits on solid
   N900 there, and 80% over the band would hide the picture. */
@media (max-width: 767.98px) {
	.infinitus-section--about-join-us.infinitus-section--solutions-insights::after {
		display: none;
	}

	.infinitus-section--about-join-us.infinitus-section--solutions-insights .solutions-insights__media {
		position: static;
		width: 100%;
		max-width: none;
		height: auto;
		margin-block-start: var(--about-join-us-band-gap);
	}
}