/**
 * Value Props style: Statement + Cards
 *
 * The statement on five columns with the panel cards two-up on the seven opposite. The card
 * itself — panel, icon circle, the overhang — is shared with style-grid and lives in
 * value-props.css.
 */

.module.value-props.style-split .intro {
	gap: var(--text-spacing-small);
	grid-column: 1 / span 5;
}

/* No hyphens in a display line — the comps never break a word with one. A word too long for
   the column still breaks, on `overflow-wrap`, which does it without leaving the mark. */
.module.value-props.style-split .intro :is(h1, h2, h3, h4) {
	hyphens: manual;
}

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

.module.value-props.style-split .text > * {
	margin-block: 0;
}

.module.value-props.style-split .props {
	column-gap: var(--text-spacing-small);
	grid-column: 6 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: var(--text-spacing-xsmall);
}

.module.value-props.style-split .container {
	row-gap: var(--text-spacing-medium);
}

.module.value-props.style-split .fine-print {
	grid-column: 6 / -1;
	padding-left: var(--text-spacing-small);
}

.module.value-props.style-split .fine-print > * {
	margin-block: 0;
}

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

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

	.module.value-props.style-split .container {
		row-gap: var(--module-spacing-small);
	}

	.module.value-props.style-split .intro,
	.module.value-props.style-split .props {
		grid-column: 1 / -1;
	}

	.module.value-props.style-split .fine-print {
		grid-column: 1 / -1;
		padding-left: 0;
	}

	.module.value-props.style-split .props > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: calc((100% - var(--text-spacing-small)) / 2);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	/* Stacked, the band-sized step the two columns take beside each other reads as a gap between
	   two modules rather than between a statement and the cards answering it. */
	.module.value-props.style-split .container {
		row-gap: var(--text-spacing-medium);
	}

}

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

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

	.module.value-props.style-split .container {
		row-gap: var(--text-spacing-xsmall);
	}

	/* The copy already carries its own padding, so the stack adds nothing between its parts. */
	.module.value-props.style-split .text {
		gap: 0;
	}

	.module.value-props.style-split .props {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.value-props.style-split .props > li:last-child:nth-child(odd) {
		margin-inline: 0;
		max-width: none;
	}

}