/**
 * sigma/card-pair (c-twocard) -- exactly two cards. Loaded only where the
 * block renders (block.json "style" field).
 *
 * Rebuilt 2026-09-08 to follow the comp's 2x2 card (docs/COMPOSITION.md
 * "Card grid", SPEC-home.md S05): two 593x223 boxes 46px apart, 1.5px
 * navy border, zero radius, no shadow, 30px Cormorant Bold heading at a
 * 46px inset with a 191px 0.75px gold rule under it, 20px Cormorant
 * Light body on a 27px pitch, and the comp's uppercase arrow-link at the
 * foot. Duplicated from blocks/grid/style.css rather than shared --
 * CONVENTIONS.md: each block owns its own style.css.
 *
 * One column at mobile, two from tablet (768) up -- with only ever two
 * cards there's no intermediate step to reserve for desktop the way
 * blocks/grid and blocks/value-prop hold their fuller column count back
 * to 1024. Same breakpoint blocks/two-door/style.css uses for its own
 * fixed two-card row.
 */

.card-pair {
	/* 20px on 27px, the 2x2 card's body pitch -- see grid/style.css. */
	--card-pair-card-leading: 1.35;
	/* 593 + 46 + 593: the 2x2's outer width in the comp. */
	--card-pair-row-width: 1232px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	box-sizing: border-box;
}

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

@media (min-width: 1024px) {
	/*
	 * Same escape from the 1184px section column as grid's 2x2: own
	 * width, capped at the viewport minus the section's padding,
	 * centred by negative margin; minmax(0, 593px) tracks shrink below
	 * ~1328 so nothing overflows.
	 */
	.card-pair {
		grid-template-columns: repeat(2, minmax(0, 593px));
		column-gap: 46px;
		row-gap: 45px;
		width: min(var(--card-pair-row-width), 100vw - 2 * var(--space-xl));
		margin-inline: calc((100% - min(var(--card-pair-row-width), 100vw - 2 * var(--space-xl))) / 2);
	}
}

@media (min-width: 1440px) {
	/*
	 * The comp's 2x2 sits with its left edge on x=111, 7px right of
	 * centre; the pair follows it so both card families line up on a
	 * page that carries both. See grid/style.css for the mechanism.
	 */
	.card-pair {
		margin-left: calc(50% - 609px);
		margin-right: auto;
	}
}

.card-pair__card {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	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) {
	.card-pair__card {
		padding: var(--space-md);
	}
}

@media (min-width: 1024px) {
	/* Comp insets less the 1.5px border, as grid/style.css derives them. */
	.card-pair__card {
		min-height: 223px;
		padding: 20.5px var(--space-lg) var(--space-md) 45px;
	}
}

/*
 * Heading with the gold rule as its ::after (191 x 0.75px at card y+81,
 * 6px right of the heading's edge) -- see grid/style.css for the
 * derivation of every number.
 */
.card-pair__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(--leading-heading);
	color: var(--color-navy);
}

.card-pair__card-heading::after {
	content: '';
	display: block;
	width: 191px;
	max-width: 100%;
	height: 0;
	margin: 26.5px 0 0;
	border-top: 0.75px solid var(--color-gold);
}

@media (min-width: 1024px) {
	.card-pair__card-heading::after {
		margin-left: 6px;
	}
}

.card-pair__card-body {
	margin: 20.5px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-light);
	line-height: var(--card-pair-card-leading);
	color: var(--color-navy);
}

.card-pair__card-body:first-child {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.card-pair__card-body,
	.card-pair__card-link,
	.card-pair__card-button {
		margin-left: 6px;
	}
}

/*
 * The comp's card ending: 18px uppercase Montserrat Regular in navy,
 * 24px gap, the gold arrow. 44px minimum height is the tap target;
 * margin-top:auto pins it to the foot of a min-height card.
 */
.card-pair__card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	min-height: 44px;
	margin-top: var(--space-md);
	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-decoration: none;
	color: var(--color-navy);
}

@media (min-width: 1024px) {
	.card-pair__card-link,
	.card-pair__card-button {
		margin-top: auto;
		padding-top: var(--space-md);
	}
}

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

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

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

.card-pair__card-link--unlinked {
	cursor: default;
	opacity: 0.55;
}

/*
 * The boxed alternative (button_style "box"): DESIGN.md's outline button
 * 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 doubled class here still outranks it
 * regardless of stylesheet load order (blocks/hero/style.css documents
 * that 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.
 */
.card-pair__card-button.sigma-button {
	min-width: 227px;
}

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

.card-pair__card-button.sigma-button:not(.sigma-button--unlinked):hover,
.card-pair__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 (transparent fill,
 * white border, white rule, white copy); the gold arrow stays gold.
 */
.sigma-section--bg-navy .card-pair__card {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

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

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

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