/* Careers hero — an insertion of the reusable Solutions hero
 * (patterns/solutions-hero.php), opted into the contained chamfered-square
 * variant. Nearly everything this section looks like lives in
 * assets/css/sections/solutions-hero.css and
 * solutions-hero-contained-square.css; this file holds only the section's own
 * vertical rhythm. Read the variant file first — its opt-in list is where
 * `.infinitus-section--careers-hero` is named.
 *
 * Selectors are scoped to BOTH classes the inserted markup carries —
 * .infinitus-section--careers-hero.infinitus-section--solutions-hero — because
 * bin/careers-page/insert-pattern.php adds the careers class on top of the
 * pattern's hardcoded one, and the compound form outweighs the base pattern's
 * single-class rules regardless of which file the alphabetical glob in
 * infinitus_section_stylesheets() happens to enqueue first.
 *
 * The comp's 180px top padding IS INCLUSIVE of the fixed header, so the value
 * below is a CONTENT-TOP OFFSET measured from the top of the page — split into
 * the header's own height plus the clearance left over, so it still tracks
 * --navbar-height (which steps to 80 below desktop) instead of freezing 99. */

.infinitus-section--careers-hero.infinitus-section--solutions-hero {
	--careers-hero-clearance: 81px;
	/* Section MD written as a literal until 2026-08-31, which left this hero out
	   of the rhythm scale. The 81px clearance above stays a literal on purpose:
	   it anchors the decorative square, not the page rhythm. */
	--careers-hero-padding-bottom: var(--wp--preset--spacing--section-md);

	/* One expression, used twice: here as the section's padding and again as
	   the square's anchor below. They MUST stay equal — the comp puts the
	   square's top edge exactly on the content top. */
	--careers-hero-content-top: calc(var(--navbar-height) + var(--careers-hero-clearance));

	padding-top: var(--careers-hero-content-top) !important;
	padding-bottom: var(--careers-hero-padding-bottom) !important;
}

/* Tablet and mobile: the header is 80px here, and keeping the desktop's 81px
   of leftover clearance on top of it read as a hole (Design QA). */
@media (max-width: 1024.98px) {
	.infinitus-section--careers-hero.infinitus-section--solutions-hero {
		--careers-hero-clearance: var(--wp--preset--spacing--sp-10);
	}
}

/* The square's vertical anchor. Clinical Evidence centres its square on the
 * section box with a nudge; Careers cannot inherit that because
 * --careers-hero-content-top is a page-top offset (the section's box starts
 * under a header the comp's frame does not draw, and the clearance changes
 * below desktop) — centring on either box pulls the square off the copy. So
 * Careers anchors the square to the content top directly, which stays correct
 * however the header height or the clearance changes.
 *
 * `.wp-block-group` is on the selector to WIN, not to describe. The variant's
 * own rule is exactly this file's natural specificity, so source order decides
 * — and infinitus_section_stylesheets() glob()s ALPHABETICALLY, which puts
 * "careers-hero.css" BEFORE "solutions-hero-contained-square.css". A
 * same-specificity override in the earlier file loses silently. core/group
 * always emits that class on this wrapper, so the extra token costs nothing
 * and buys the one point needed. */
@media (min-width: 768px) {
	.infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__media.wp-block-group {
		top: var(--careers-hero-content-top);
		transform: none;
	}
}

/* The variant file re-asserts section-lg on padding-bottom across this whole
   range with !important, because the base pattern zeroes it for Pharma's
   bottom-pinned photograph. section-lg is Clinical Evidence's value, not this
   page's, so Careers restates its own here. Same !important, one class more
   specific, so this wins. */
@media (max-width: 1024.98px) {
	.infinitus-section--careers-hero.infinitus-section--solutions-hero {
		padding-bottom: var(--careers-hero-padding-bottom) !important;
	}
}

/* Copy column. The base pattern already puts padding-top: var(--navbar-height)
   on this element, for heroes whose section does NOT carry it — this one does,
   so left alone the header's clearance is counted twice. The removal is
   UNSCOPED because both paddings apply at every width; the rest stays
   desktop-only — the square is in flow under the copy below 768, so there is
   nothing to centre against. */
.infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__inner.wp-block-group {
	padding-top: 0;
}

@media (min-width: 768px) {
	.infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__inner.wp-block-group {
		/* --sh-square-WIDTH, not --sh-square-SIZE. The square is 1:1, so its
		   width is its height; -size is the fixed 529 the comp draws at 1440,
		   while -width is `min(529px, 37vw)`, i.e. what the square is ACTUALLY
		   drawn at between the breakpoints — floored at 529 the copy column
		   overshoots the square at 768 and justify-content pushes the headline
		   far below the content top. .solutions-hero__media is absolutely
		   positioned and contributes no height, so this floor is also what
		   keeps the section tall enough to clear the square. */
		min-height: var(--sh-square-width);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}