/**
 * Value Props style: Statement + Checklist
 *
 * The statement on seven columns with a ticked list of points on the five opposite — Statement
 * + Cards' split mirrored, with the card dropped. The tick disc is the module's shared .icon
 * circle at the smaller size; the glyph takes its color from the inherited body color.
 */

.module.value-props.style-checklist {
	padding-block: var(--module-spacing-medium);
}

/* The module already insets itself off the band's edges, so the wash wrapper adds none of its
   own — the two stacked to 200. Only when the run is this module alone, and not when it has
   been pulled up under what precedes it: there the wrapper's padding is the overlap's payback. */
.page-builder > .wash:not(.module, .margin-overlap):has(> .module.value-props.style-checklist:only-child) {
	padding-block: 0;
}

.module.value-props.style-checklist .intro {
	gap: var(--text-spacing-xsmall);
	grid-column: 1 / span 7;
	padding-right: var(--text-spacing-xlarge);
}

.module.value-props.style-checklist .description > * {
	margin-block: 0;
}

.module.value-props.style-checklist .props {
	grid-column: 8 / -1;
	padding-top: var(--text-spacing-medium);
	row-gap: var(--text-spacing-small);
}

.module.value-props.style-checklist .props > li {
	align-items: start;
	column-gap: 12px;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
}

.module.value-props.style-checklist .props > li p {
	padding-top: 3px;
}

.module.value-props.style-checklist .icon {
	height: 32px;
	width: 32px;
}

/** With a photo — the statement and the list share the columns opposite it **/

.module.value-props.style-checklist.has-media .media {
	aspect-ratio: auto;
	border-radius: 10px;
	grid-row: 1 / span 2;
}

.module.value-props.style-checklist.has-media .intro {
	grid-row: 1;
	padding-right: 0;
}

.module.value-props.style-checklist.has-media .props {
	grid-row: 2;
	padding-top: 0;
}

.module.value-props.style-checklist.has-media.image-left .media {
	grid-column: 1 / span 5;
}

.module.value-props.style-checklist.has-media.image-left .intro,
.module.value-props.style-checklist.has-media.image-left .props {
	grid-column: 7 / -1;
}

.module.value-props.style-checklist.has-media.image-right .media {
	grid-column: 8 / -1;
}

.module.value-props.style-checklist.has-media.image-right .intro,
.module.value-props.style-checklist.has-media.image-right .props {
	grid-column: 1 / span 6;
}

.module.value-props.style-checklist .icon svg {
	display: block;
	height: 11px;
	width: 14px;
}

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

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

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

	.module.value-props.style-checklist .intro,
	.module.value-props.style-checklist.has-media.image-left .intro,
	.module.value-props.style-checklist.has-media.image-right .intro {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-right: 0;
	}

	.module.value-props.style-checklist .props,
	.module.value-props.style-checklist.has-media.image-left .props,
	.module.value-props.style-checklist.has-media.image-right .props {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-top: 0;
	}

	.module.value-props.style-checklist.has-media.image-left .media,
	.module.value-props.style-checklist.has-media.image-right .media {
		aspect-ratio: 620 / 680;
		grid-column: 1 / -1;
		grid-row: auto;
		max-width: 475px;
	}

}

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

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

	/* Led by a photograph, the band's own inset lands on top of the spacing the run already carries
	   and the picture starts a step and a half down the screen. */
	.module.value-props.style-checklist.has-media {
		padding-top: 0;
	}

	.module.value-props.style-checklist.has-media .container {
		row-gap: var(--text-spacing-small);
	}

	/* The list reads as the statement's own second half, so it closes up; the photograph above it
	   keeps a step of its own, written as the difference from the gap the rest of the rows take. */
	.module.value-props.style-checklist.has-media .media {
		margin-bottom: calc(var(--text-spacing-xlarge) - var(--text-spacing-small));
	}

	/* The photograph leads the statement rather than following the list: stacked it is the band's
	   opening image, and a portrait column's crop at full width made it taller than the screen. The
	   width is stated, or the ratio carries the height cap across into it. */
	.module.value-props.style-checklist.has-media .intro {
		grid-row: 2;
	}

	.module.value-props.style-checklist.has-media .props {
		grid-row: 3;
	}

	.module.value-props.style-checklist.has-media.image-left .media,
	.module.value-props.style-checklist.has-media.image-right .media {
		aspect-ratio: 3 / 2;
		grid-row: 1;
		max-height: 500px;
		max-width: none;
		width: 100%;
	}

}

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

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

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

}