/* ==========================================================================
   reason.css — Genva Interior

   Ported from the mock. No icons and no decoration in this one: four numbered
   statements, two to a row.
   ========================================================================== */

.reason {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (width >= 768px) {

	.reason {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.reason > .reason__item {
	margin-block-start: 0;
	margin-block-end: 0;
}

.reason__item {
	background: var(--surface-container-lowest);
	padding: var(--space-xl);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-sm);
}

@media (width < 782px) {

	.reason__item {
		padding: var(--space-md);
	}
}

:root :where(.is-layout-flex).reason__item {
	gap: var(--space-md);
	align-items: flex-start;
}

.reason__item > *,
.reason__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.reason__num {
	width: 3rem;
	height: 3rem;
	border-radius: var(--rounded-full);
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-family: var(--font-number);
	font-weight: 700;
	margin: 0;
}

.reason__title {
	color: var(--on-surface);
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.reason__text {
	color: var(--on-surface-variant);
}