/**
 * sigma/value-prop (C10) -- fixed 3-card row, each card a heading, body
 * text and one approved button. Loaded only where the block renders
 * (block.json "style" field).
 *
 * Rebuilt 2026-09-08 to the client's comp (docs/COMPOSITION.md, SPEC-
 * sell-your-business.md S01, the same row on every industry hub's S01):
 * three 368x568 boxes at x=122/536/950 -- 1.5px navy border, zero
 * radius, no shadow -- each with a 30px Cormorant Bold heading centred
 * on a 42px pitch, a 119px 0.75px gold rule centred under it, 20px
 * Cormorant Light body on a 28px pitch, and an uppercase Montserrat
 * arrow-link centred near the foot ("LEARN MORE ->"). Not shared with
 * grid/style.css -- CONVENTIONS.md: each block owns its own style.css.
 *
 * One column at mobile, 2 at tablet (768), the full 3 only from desktop
 * (1024) up -- same reflow rule blocks/grid/style.css uses, so a 3-up
 * row doesn't squeeze unreadable at tablet width.
 */

.value-prop {
	/*
	 * Body pitch: 20px on 28px (SPEC-sell-your-business S01 body lines
	 * at y=1182, 1210, 1238), and the two-line heading on 42px (1037,
	 * 1079) -- both 1.4, looser than the 2x2 card's 1.35 and the
	 * paragraph tokens' 1.1. No token carries 1.4 and design/tokens.json
	 * has another writer this turn, so block-local; a --leading-card
	 * token is the right long-term home.
	 */
	--value-prop-card-leading: 1.4;
	/* 3 x 368 + 2 x 46: the row's outer width, x=122..1318, centred. */
	--value-prop-row-width: 1196px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	box-sizing: border-box;
}

/*
 * 2026-09-08 fix (tasks 785/787/790, the value-prop half of the same
 * "cards glued to the prose above them" complaint fixed for grid in
 * blocks/grid/style.css -- see that file's identical rule for the full
 * root-cause writeup. Same bug, same fix, different block: every
 * industry hub's box 2 stacks sigma/heading-text directly over this
 * block inside one shared box, and heading-text's own last body
 * paragraph has its margin-bottom zeroed by design -- confirmed live at
 * 0px on business-services, manufacturing-industrial,
 * distribution-logistics, skilled-trades-construction and
 * healthcare-consumer-services (all five share this exact box shape).
 * :has(> .heading-text__body:last-child) scopes this to a heading-text
 * that actually ends in body copy, so a heading-only heading-text
 * elsewhere on the site (already spaced by its own --space-md heading
 * margin) is never double-spaced by this rule.
 */
.heading-text:has(> .heading-text__body:last-child) + .value-prop {
	margin-top: var(--space-xl);
}

@media (min-width: 768px) {
	.value-prop {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/*
	 * The row is 1196 wide in the comp, 12px more than the theme's
	 * 1184px section column, so it steps outside its column the way the
	 * 2x2 grid does: its own width, capped at the viewport minus the
	 * section's padding, centred with a negative margin. minmax(0,
	 * 368px) tracks shrink together below ~1292 so nothing overflows.
	 * Percent margins resolve against the (margin-inline:auto) column,
	 * so this is anchored to the viewport's centre -- and the comp does
	 * centre this row exactly: (1440 - 1196) / 2 = 122.
	 */
	.value-prop {
		grid-template-columns: repeat(3, minmax(0, 368px));
		column-gap: 46px;
		row-gap: 45px;
		width: min(var(--value-prop-row-width), 100vw - 2 * var(--space-xl));
		margin-inline: calc((100% - min(var(--value-prop-row-width), 100vw - 2 * var(--space-xl))) / 2);
	}

	/*
	 * Three tracks is the comp's row, and the comp's row has three cards.
	 * Exit Readiness Score supplies two, and the block reserved the third
	 * track anyway: the cards ended at x=879 inside a container reaching
	 * 1318, so a navy band sat with 439px of empty space on its right and
	 * read as off-centre rather than as a two-card row.
	 *
	 * :has() counts the cards in CSS, which is the only place that knows
	 * -- render.php emits no count class. Two cards get two tracks and
	 * the existing centring maths then centres the pair. A browser
	 * without :has() keeps today's three tracks, which is the current
	 * behaviour and not a regression.
	 */
	.value-prop:has(> .value-prop__card:last-child:nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 368px));
		width: min(calc(368px * 2 + 46px), 100vw - 2 * var(--space-xl));
		margin-inline: calc((100% - min(calc(368px * 2 + 46px), 100vw - 2 * var(--space-xl))) / 2);
	}
}

/*
 * The card. Flex column so the arrow-link pins to the foot with
 * margin-top:auto. It held the comp's 568px as a min-height until QA
 * measured what that does to our copy: the comp's card carries eight or
 * nine body lines, ours carries four to six, so margin-top:auto opened
 * a 163-185px hole between the last sentence and the arrow-link in all
 * three cards on Sell Your Business and on every industry hub (QA 802).
 * The grid row already equalises the three cards, so the min-height was
 * only ever holding the SHORTEST possible row up to a number derived
 * from text we do not have. Dropped: the row now takes the tallest
 * card's own height and the remaining spread between cards is the 22px
 * their copy actually differs by. Every measured inset below stays.
 * 20px padding at mobile per the brief; the comp's 26px inset (body
 * x=148 in a card at x=122) from desktop up.
 */
.value-prop__card {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-white);
	color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	padding: 20px;
}

@media (min-width: 768px) {
	.value-prop__card {
		padding: var(--space-md);
	}
}

@media (min-width: 1024px) {
	/*
	 * Heading em-top at card y+23 on a 42px line box (half-leading 6)
	 * inside a 1.5px border, so the padding is 15.5 (the half pixel:
	 * Chrome floors a 1.5px border to 1px at 1x, keeps it at 2x); body at x=148 in a
	 * box at 122 is 26 in, i.e. --space-md past the border. The
	 * arrow-link's centre sits 46 above the foot (text y=1525 in a box
	 * ending at 1582): with its 44px tap-target box that is a 24px
	 * bottom pad.
	 */
	.value-prop__card {
		padding: 15.5px var(--space-md) var(--space-md);
	}
}

/*
 * Heading centred, and it carries the gold rule as its ::after so a
 * body-only card gets no rule. Rule geometry from the comp: 118.8 x
 * 0.75px, centred, at card y+136 -- the two-line heading's box ends at
 * +100.5 (1.5 border + 15.5 + 84), so 35.5px of margin lands it there. A one-line heading
 * puts the rule 42px higher; the comp has no such card, and pinning the
 * rule to a fixed y would leave a hole under a short heading instead.
 */
.value-prop__card-heading {
	display: block;
	width: 100%;
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: var(--weight-serif-bold);
	line-height: var(--value-prop-card-leading);
	text-align: center;
	color: var(--color-navy);
}

.value-prop__card-heading::after {
	content: '';
	display: block;
	width: 119px;
	max-width: 100%;
	height: 0;
	margin: 35.5px auto 0;
	border-top: 0.75px solid var(--color-gold);
}

/*
 * Body: left-aligned, ragged right, as the comp draws it (every line in
 * all three cards starts at x=148/562/976 -- the spec's CENTER tag
 * belongs to the merged three-card span, not the copy). Em-top at
 * +168: rule bottom 136.75 + 27 + half-leading 4 of the 28px pitch.
 */
.value-prop__card-body {
	width: 100%;
	margin: 27.5px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-light);
	line-height: var(--value-prop-card-leading);
	text-align: left;
	color: var(--color-navy);
}

.value-prop__card-body:first-child {
	margin-top: 0;
}

/*
 * The comp's card ending: 18px uppercase Montserrat Regular in navy,
 * 24px gap, the gold arrow; the whole thing centred, a two-line label
 * ("THE DEAL / MAP PROCESS") wrapping centred with the arrow beside it.
 * 44px minimum height is the tap target. margin-top:auto pins it to the
 * foot; the top margin is the least it may approach the body.
 */
.value-prop__card-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	min-height: 44px;
	margin-top: var(--space-lg);
	font-family: var(--font-sans);
	font-size: var(--text-button-label);
	font-weight: var(--weight-sans-regular);
	line-height: 1.2;
	letter-spacing: var(--tracking-button-label);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--color-navy);
}

@media (min-width: 1024px) {
	.value-prop__card-link,
	.value-prop__card-button {
		margin-top: auto;
		padding-top: var(--space-lg);
	}
}

.value-prop__card-link-arrow {
	flex: 0 0 auto;
	overflow: visible;
	color: var(--color-gold);
}

.value-prop__card-link:not(.value-prop__card-link--unlinked):hover .value-prop__card-link-label,
.value-prop__card-link:not(.value-prop__card-link--unlinked):focus-visible .value-prop__card-link-label {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.value-prop__card-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/*
 * phase2_unlinked labels render as an <a> with no href at all (see
 * render.php) -- already non-focusable and inert; this only signals the
 * same thing visually.
 */
.value-prop__card-link--unlinked {
	cursor: default;
	opacity: 0.55;
}

/*
 * The boxed alternative (button_style "box"): DESIGN.md's outline button
 * as the comps draw it on a light background, the theme's 227
 * secondary/in-card size -- the box (padding, border, type) is
 * assets/css/base.css's shared .sigma-button rule now; the compound
 * selector here still outranks it regardless of stylesheet load order
 * (blocks/hero/style.css documents that ordering trap), which matters
 * for the hover text colour below, deliberately navy rather than
 * base's default white. Full width at mobile so the tap target is the
 * whole row.
 */
.value-prop__card-button.sigma-button {
	min-width: 227px;
}

@media (max-width: 767px) {
	.value-prop__card-button.sigma-button {
		width: 100%;
		min-width: 0;
		min-height: 44px;
		white-space: normal;
	}
}

.value-prop__card-button.sigma-button:not(.sigma-button--unlinked):hover,
.value-prop__card-button.sigma-button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-gold-bright);
	color: var(--color-navy);
}

/*
 * Inside a navy band the comp's box language inverts (the stat boxes:
 * transparent fill, 1.5px white border, white rule, white copy). Gold
 * arrow stays gold -- 6.54:1 on navy.
 */
.sigma-section--bg-navy .value-prop__card {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.sigma-section--bg-navy .value-prop__card-heading,
.sigma-section--bg-navy .value-prop__card-body,
.sigma-section--bg-navy .value-prop__card-link,
.sigma-section--bg-navy .value-prop__card-button.sigma-button {
	color: var(--color-white);
}

.sigma-section--bg-navy .value-prop__card-heading::after {
	border-top-color: var(--color-white);
}

.sigma-section--bg-navy .value-prop__card-button.sigma-button {
	border-color: var(--color-white);
}