/* Careers — Values card grid (patterns/careers-values.php).
 *
 * The alternating card/photo order per column is the whole visual idea and it
 * lives in the PATTERN (DOM order), not here, so an editor reordering two
 * blocks in a column gets what they see.
 *
 * The accent under "The values" is the shared growing underline — nothing in
 * this file paints it; assets/css/underline-grow.css owns it, and the <mark>
 * carries `.infinitus-underline-grow` to opt in. Only the baseline offset is
 * set here, as every other consumer also does. */

.infinitus-section--careers-values {
	--careers-values-intro-measure: 711px;
	--careers-values-gap: 30px;
	--careers-values-card-padding-inline: var(--wp--preset--spacing--sp-8);
	--careers-values-card-padding-block: var(--wp--preset--spacing--sp-12);
	--careers-values-card-border-width: 2px;
}

/* core/group with no `layout` attribute is flow, and core's blockGap rule
   (.is-layout-flow > * + *) never applies to it — so the gap is an owl here.
   Same reason the grid's own gap is set in CSS below. */
.infinitus-section--careers-values .careers-values__intro > * + * {
	margin-block-start: var(--careers-values-gap);
}

.infinitus-section--careers-values .careers-values__heading {
	max-width: var(--careers-values-intro-measure);
	/* !important because the block's theme.json font-size preset emits its own
	   size; the theme ladder is authoritative over the preset. */
	font-size: var(--fs-h2) !important;
	line-height: var(--lh-h2);
	font-weight: 300;
	margin-block: 0;
}

/* Identical value to the entries in underline-grow.css — set here rather than
   added there because this section opts in with the utility class, which that
   file deliberately leaves un-offset for generic use. */
.infinitus-section--careers-values .careers-values__heading .infinitus-underline-grow {
	--underline-grow-baseline: 0.771em;
}

.infinitus-section--careers-values .careers-values__lede {
	max-width: var(--careers-values-intro-measure);
	font-size: var(--fs-body-xl) !important;
	line-height: var(--lh-body-xl);
	/* margin-block-END only. `margin-block: 0` here cancels the owl above and
	   closes the heading-to-lede gap to zero. It is not a specificity accident
	   to fix by reordering: the owl's `> * + *` scores 0,2,0 because universal
	   selectors contribute nothing, so it TIES with this rule and loses on
	   source order. Zero the end margin, never the start, on anything but the
	   first child. */
	margin-block-end: 0;
}

.infinitus-section--careers-values .careers-values__grid {
	margin-block-start: var(--careers-values-gap);
	gap: var(--careers-values-gap);
	/* NOT align-items. core ships `.wp-block-columns { align-items: normal
	   !important }` and there is no outranking that from a stylesheet, so the
	   columns are always stretched to the tallest; the stretch is relied on
	   deliberately — see the last-child rule below. */
}

.infinitus-section--careers-values .careers-values__column {
	display: flex;
	flex-direction: column;
	gap: var(--careers-values-gap);
	/* core sets a flex-basis of 0 on columns; min-width:0 stops a long
	   unbroken word in a card from forcing a column wider than its share. */
	min-width: 0;
}

/* A column is `is-layout-flow`, and core's flow layout puts
   `margin-block-start: var(--wp--style--block-gap)` — 24px — on every child
   after the first. This column is a FLEX container with its own gap, so that
   margin is pure surplus; left in, the two photo-first columns run taller than
   the rest and every column stretches to match (core forces `align-items:
   normal !important`). Zeroed on the column's children rather than on __card,
   so a third block dropped into a column by an editor cannot reintroduce it. */
.infinitus-section--careers-values .careers-values__column > * {
	margin-block: 0;
}

/* The columns are stretched to equal height by core's `align-items: normal
 * !important`, so letting the LAST block in each column absorb whatever is
 * left pins every bottom edge to the same line however the copy rewraps.
 * Insurance for the widths between the breakpoints.
 *
 * `flex-grow` only, not the `flex` shorthand: __photo's `flex: 0 0 auto` and
 * its fixed `height` are its basis, and the shorthand would reset both. The
 * photo's own img is already `height: 100%; object-fit: cover`, so it fills
 * the taller box instead of leaving a gap under it. */
.infinitus-section--careers-values .careers-values__column > *:last-child {
	flex-grow: 1;
}

/* Copy cards: background and text colour are palette presets on the block, not
   rules here, so a client can recolour a card in the editor. Only geometry and
   the border live in CSS. */
.infinitus-section--careers-values .careers-values__card {
	padding: var(--careers-values-card-padding-block) var(--careers-values-card-padding-inline);
	border-radius: var(--wp--custom--radius--md);
	border-style: solid;
	border-width: var(--careers-values-card-border-width);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sp-6);
}

.infinitus-section--careers-values .careers-values__card--light {
	border-color: var(--wp--preset--color--gray-200);
}

.infinitus-section--careers-values .careers-values__card--dark {
	border-color: var(--wp--preset--color--gray-600);
}

.infinitus-section--careers-values .careers-values__card-title {
	font-size: var(--fs-h4) !important;
	line-height: var(--lh-h4);
	font-weight: 300;
	letter-spacing: 0.012em;
	margin-block: 0;
}

.infinitus-section--careers-values .careers-values__card-body {
	font-size: var(--fs-body-xl) !important;
	line-height: var(--lh-body-xl);
	/* BOTH margins zeroed. The card is a flex column with its own 24px gap;
	   zeroing only the end margin — which is right for __lede, whose parent
	   uses an owl — lets the gap and a 24px top margin BOTH apply. This rule
	   and __lede look alike and are not: check which mechanism the parent uses
	   before touching either. */
	margin-block: 0;
}

/* Photo cards: the five heights are deliberately unequal — that inequality
 * plus the alternating order is what makes the grid read as staggered. Held as
 * modifier classes rather than inline styles so the stagger survives an editor
 * who never opens the image settings.
 *
 * The figure is pinned rather than left to size itself: a core/image figure
 * inside a flex column otherwise absorbs the column's leftover height, which
 * on the shortest column opened a gap under the photograph. */

.infinitus-section--careers-values .careers-values__photo {
	flex: 0 0 auto;
	margin-block: 0;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	/* Drops the descender space a figure's inline image otherwise leaves. */
	line-height: 0;
}

.infinitus-section--careers-values .careers-values__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

.infinitus-section--careers-values .careers-values__photo--h305 {
	height: 305px;
}

.infinitus-section--careers-values .careers-values__photo--h335 {
	height: 335px;
}

.infinitus-section--careers-values .careers-values__photo--h399 {
	height: 399px;
}

/* Tablet: the grid drops to two-up and the photo heights become proportional
 * rather than fixed. 1024.98 / 768 are the theme's breakpoints, not core's own
 * 782px column stacking — core's is overridden below so the two do not fight. */

@media (max-width: 1024.98px) {
	.infinitus-section--careers-values .careers-values__grid {
		/* !important against core's `@media (min-width: 782px)
		   .wp-block-columns { flex-wrap: nowrap !important }`. Without it the
		   two-up below never happens at 782-1024.98: the columns keep their 50%
		   basis, cannot wrap, and simply shrink. Same form the-problem.css
		   already uses against this rule. */
		flex-wrap: wrap !important;
	}

	.infinitus-section--careers-values .careers-values__column {
		/* !important because core's stacking rule is
		   `@media (max-width: 781px) .wp-block-columns:not(.is-not-stacked-on-mobile)
		   > .wp-block-column { flex-basis: 100% !important }` — a plain
		   declaration cannot outrank an !important one at any specificity, so
		   768-781.98 silently goes one-up without it. Same !important form the
		   media-copy-row and studio-capabilities sections already use against
		   this exact core rule. */
		flex-basis: calc(50% - (var(--careers-values-gap) / 2)) !important;
		/* !important for a different reason: core's own
		   `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`
		   is 0,3,0 (`:not()` carries its argument's specificity) against this
		   rule's 0,2,0, so its `flex-grow: 1` beats a plain 0 here — invisible
		   on two-up rows, but the fifth column is alone on the last row and
		   grows to the grid's full width. */
		flex-grow: 0 !important;
	}

	.infinitus-section--careers-values .careers-values__photo {
		/* Ratios are each comp height over the comp's own 214px column width,
		   so the photographs keep their relative sizes to one another. */
		height: auto;
		aspect-ratio: 214 / var(--careers-values-photo-ratio, 335);
	}

	.infinitus-section--careers-values .careers-values__photo--h305 {
		--careers-values-photo-ratio: 305;
	}

	.infinitus-section--careers-values .careers-values__photo--h335 {
		--careers-values-photo-ratio: 335;
	}

	.infinitus-section--careers-values .careers-values__photo--h399 {
		--careers-values-photo-ratio: 399;
	}
}

/* Mobile: one column. The alternating order stops meaning anything at one-up,
 * but it is left alone rather than normalised: reordering here would put a
 * copy card and its own photograph out of sequence for a screen-reader user. */

@media (max-width: 767.98px) {
	.infinitus-section--careers-values .careers-values__column {
		/* Agrees with core's own stacking rule; !important only to beat this
		   file's own tablet declaration above, which is !important and whose
		   media query still covers this range. */
		flex-basis: 100% !important;
	}

	/* The tablet block's proportional ratios do not survive a full-width
	   column — capped at the comp's own 1440 heights so a photo on a phone is
	   never larger than the comp draws it. The ratio still governs on narrow
	   phones where it resolves under the cap; `object-fit: cover` crops rather
	   than squashes wherever the cap bites. If design wants a specific mobile
	   treatment, this is the one rule to replace. */
	.infinitus-section--careers-values .careers-values__photo--h305 {
		max-height: 305px;
	}

	.infinitus-section--careers-values .careers-values__photo--h335 {
		max-height: 335px;
	}

	.infinitus-section--careers-values .careers-values__photo--h399 {
		max-height: 399px;
	}

	.infinitus-section--careers-values .careers-values__card {
		--careers-values-card-padding-block: var(--wp--preset--spacing--sp-10);
	}
}