/*** Module: Value Props ***/

.module.value-props {
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
}

.module.value-props .header {
	grid-column: 1 / span 8;
	text-align: left;
}

.module.value-props.align-center .header {
	grid-column: 2 / -2;
	text-align: center;
}

.module.value-props .header > * + * {
	margin-top: var(--text-spacing-small);
}

.module.value-props .header .eyebrow + .heading-2 {
	margin-top: var(--text-spacing-small);
}

/* is-icon: tighter gap between the headline and its intro. */
.module.value-props.is-icon .header > .heading-2 + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

/* is-media: tighter still. */
.module.value-props.is-media .header > .heading-2 + .large-text {
	margin-top: var(--text-spacing-xxsmall);
}

.module.value-props .header + .items,
.module.value-props .header + .rows {
	margin-top: var(--text-spacing-medium);
}

/** Grid / Cards — items grid; column count set by .cols-{n} **/

.module.value-props .items {
	display: grid;
	gap: var(--text-spacing-large);
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.value-props.cols-2 .items {
	grid-template-columns: repeat(2, 1fr);
}
.module.value-props.cols-3 .items {
	grid-template-columns: repeat(3, 1fr);
}
.module.value-props.cols-4 .items {
	grid-template-columns: repeat(4, 1fr);
}

.module.value-props .item .card {
	align-items: flex-start;
	height: 100%;
}

.module.value-props .item .card > * + * {
	margin-top: 0;
}

/* 4-up cards are tighter — halve the inner stack gap. */
.module.value-props.cols-4 .item .card > * + * {
	margin-top: 4px;
}

/* ...but the read-more button keeps a clear 24px gap from the body. */
.module.value-props.cols-4 .item .btn,
.module.value-props.cols-4 .item .cta {
	margin-top: var(--text-spacing-small);
}

/* Tertiary read-more hover: colour shift (global) + the arrow nudges forward. */
.module.value-props .item .btn.tertiary {
	transition: color 0.25s ease;
}

.module.value-props .item .btn.tertiary::after {
	transition: transform 0.2s ease;
}

.module.value-props .item .btn.tertiary:hover::after,
.module.value-props .item .btn.tertiary:focus-visible::after {
	transform: translateX(4px);
}

.module.value-props .item .card > .icon + .heading-6 {
	margin-top: var(--text-spacing-xsmall);
}

.module.value-props .item .card > .media + .heading-6 {
	margin-top: var(--text-spacing-small);
}

.module.value-props .item p {
	margin: 0;
}

/* 4-up cards use the small body cut (14px regular) — 3-up keeps the 16px body. */
.module.value-props.cols-4 .item .content-styles,
.module.value-props.cols-4 .item .content-styles p {
	font-size: calc(14rem / 16);
	font-weight: 400;
	letter-spacing: 0.2px;
	line-height: calc(24 / 14);
}

/* is-icon subhead reads as body-medium semibold, not the display heading cut. */
.module.value-props.is-icon .item .heading-6 {
	font-family: var(--body-font);
	font-size: calc(16rem / 16);
	font-weight: 600;
	letter-spacing: normal;
	line-height: calc(30 / 16);
}

.module.value-props .item .btn,
.module.value-props .item .cta {
	margin-top: var(--text-spacing-small);
}

.module.value-props .item .cta {
	color: var(--digital-blue);
	font-weight: 600;
}

.module.value-props.align-center .item .card {
	align-items: center;
	text-align: center;
}

.module.value-props .card > .icon img {
	height: auto;
	max-height: 32px;
	object-fit: contain;
	object-position: left center;
	width: 100%;
}

.module.value-props .card > .media {
	aspect-ratio: 16 / 9;
}

.module.value-props .card > .media img {
	display: block;
	height: 100%;
	object-fit: cover;
	position: relative;
	width: 100%;
}

/* SVG media are logos/marks — contain them so they aren't cropped by the cover
   fit meant for photos. */
.module.value-props .card > .media img[src$=".svg"] {
	object-fit: contain;
}

.module.value-props.style-cards .item .card {
	background: var(--parchment);
	padding: var(--text-spacing-medium);
	transition: background 0.2s ease;
}

.module.value-props.style-cards a.card:hover {
	background: var(--lavender);
}

/** Stacked List — full-width clickable rows **/

.module.value-props .rows {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Figma 1491:6549 — full-width rows: 88px .heading-1 label + trailing arrow,
   ~24px above/below a hairline (black @ 15%). Divider sits below each row (incl.
   the last) and never above the first, so border-bottom on every row matches. */
.module.value-props .row {
	align-items: center;
	border-bottom: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	color: var(--black);
	display: flex;
	gap: var(--text-spacing-medium);
	padding-block: var(--text-spacing-small);
	text-decoration: none;
}

.module.value-props .row .thumb {
	flex-shrink: 0;
	height: 48px;
	width: 48px;
}

.module.value-props .row .thumb img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.module.value-props .row .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.value-props .row .meta {
	color: var(--gray-dark);
}

.module.value-props .row .arrow {
	color: var(--black);
	flex-shrink: 0;
	height: 40px;
	margin-left: auto;
	transition: transform 0.2s ease;
	width: 40px;
}

.module.value-props a.row:hover .heading-1 {
	color: var(--black-hover);
}

@media (prefers-reduced-motion: no-preference) {

	.module.value-props a.row:hover .arrow {
		transform: translateX(4px);
	}

}

/** Footnote — disclaimer / citation below the props (e.g. stat sources) **/

.module.value-props .footnote {
	grid-column: 1 / -1;
	margin-top: var(--text-spacing-large);
}

.module.value-props.align-center .footnote {
	text-align: center;
}

/** Background — contained band via the global inset .bg-field **/

.module.value-props.bg-parchment .bg-field {
	background: var(--parchment);
}

.module.value-props.bg-white .bg-field {
	background: var(--white);
}

/** Header layout — split sets the heading beside the intro **/

.module.value-props.header-split .header {
	column-gap: var(--gap);
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, 1fr);
	text-align: left;
}

.module.value-props.header-split .header > * {
	grid-column: 1;
}

.module.value-props.header-split .header > .large-text {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
	/* Nudge down so the intro optically aligns with the larger headline cap. */
	padding-top: var(--text-spacing-xsmall);
}

/* Centered wins over split — stack the intro under the heading, centered. */
.module.value-props.header-split.align-center .header {
	display: block;
	grid-column: 2 / -2;
	text-align: center;
}

.module.value-props.header-split.align-center .header > .large-text {
	grid-row: auto;
	margin-top: var(--text-spacing-small);
	padding-top: 0;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.value-props .header,
	.module.value-props.align-center .header,
	.module.value-props.header-split.align-center .header {
		grid-column: 1 / -1;
	}

	.module.value-props.header-split .header {
		grid-template-columns: 1fr;
	}

	.module.value-props.header-split .header > .large-text {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--text-spacing-small);
		padding-top: 0;
	}

	.module.value-props.cols-2 .items,
	.module.value-props.cols-3 .items,
	.module.value-props.cols-4 .items {
		grid-template-columns: repeat(2, 1fr);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.value-props.cols-2 .items,
	.module.value-props.cols-3 .items,
	.module.value-props.cols-4 .items {
		grid-template-columns: 1fr;
	}

	.module.value-props .header + .items {
		margin-top: 0;
	}

}