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

   Ported from the mock.

   The icon in each card's corner is the card's own ::after. In a flex column
   with space-between it behaves as the last item, which is exactly where the
   reference put its empty icon div — so five elements come out of the markup
   and the layout is unchanged.
   ========================================================================== */

.flow {
	--icon-call: 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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--icon-survey: 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%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M7 8v3.5M12 8v4.5M17 8v3.5'/%3E%3C/svg%3E");
	--icon-quote: 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='M6 2.5h12v19l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9.5 8h5M9.5 12h5'/%3E%3C/svg%3E");
	--icon-work: 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-done: 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='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");

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

@media (width >= 768px) {

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

.flow > .flow__item {
	margin-block-start: 0;
	margin-block-end: 0;
}

.flow__item {
	position: relative;
	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;
}

@media (width < 782px) {

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

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

.flow__step {
	display: block;
	color: var(--secondary);
	font-family: var(--font-number);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

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

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

/* The icon. Muted for the four steps that are just steps, and the shop's own
   colour for the handover, which is the one the customer is waiting for. */
.flow__item::after {
	content: "";
	align-self: flex-end;
	margin-top: var(--space-lg);
	width: 2rem;
	height: 2rem;
	background-color: rgba(86, 94, 116, 0.3);
	mask-image: var(--flow-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.flow__item--call   { --flow-icon: var(--icon-call); }
.flow__item--survey { --flow-icon: var(--icon-survey); }
.flow__item--quote  { --flow-icon: var(--icon-quote); }
.flow__item--work   { --flow-icon: var(--icon-work); }
.flow__item--done   { --flow-icon: var(--icon-done); }

.flow__item--done::after {
	background-color: var(--secondary);
}