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

   Ported from the mock.

   Each card ends with a one line summary and its own icon. Rather than four
   icon elements in the markup, each card sets --promise-icon and the foot row
   draws it from a mask, so the pattern stays four plain groups the shop owner
   can edit without stepping on anything.
   ========================================================================== */

.promise {
	--icon-price: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 8 4 4.5L16 8M8.5 13h7M8.5 16h7M12 12.5V17'/%3E%3C/svg%3E");
	--icon-visit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3C/svg%3E");
	--icon-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--icon-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (width >= 768px) {

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

@media (width >= 1024px) {

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

.promise > .promise__item {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Card

   space-between pins the foot row to the bottom, so the four summaries line up
   across the row even though the descriptions run to different lengths.
   -------------------------------------------------------------------------- */
.promise__item {
	background: var(--surface-container-lowest);
	padding: var(--space-lg);
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: box-shadow 150ms ease;
}

.promise__item:hover {
	box-shadow: var(--shadow-md);
}

@media (width < 782px) {

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

.promise__item > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.promise__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.promise__num {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--rounded);
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-number);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

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

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

.promise__foot {
	margin-top: var(--space-lg);
	padding-top: var(--space-sm);
	color: var(--secondary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

@media (width < 782px) {

	.promise__foot {
		margin-top: var(--space-md);
	}
}

.promise__foot::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	mask-image: var(--promise-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.promise__item--price { --promise-icon: var(--icon-price); }
.promise__item--visit { --promise-icon: var(--icon-visit); }
.promise__item--base  { --promise-icon: var(--icon-base); }
.promise__item--small { --promise-icon: var(--icon-small); }