/* ==========================================================================
   かなさホーム — ご依頼の流れのカード（template-parts/kanasa/flow.php。Figma p-kanasa-flow__list 55:1321）
   - PC: 3列×2段（行の中で高さをそろえる）。白い角丸 28px・内側 32px。STEP の丸（52px・濃い緑）と題（H4 20px）→ 文（Body-S 15px）
   - SP: 1列。内側 24px・20px。丸 56px
   ========================================================================== */

.p-kanasa-flow__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-flow__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-flow__head {
	display: flex;
	gap: 14px; /* Figma の値（トークンにない） */
	align-items: center;
}

.p-kanasa-flow__num {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-radius: 50%;
}

.p-kanasa-flow__step {
	font: 500 12px/1.2 var(--font-kanasa); /* Figma の値（テキストスタイルなし） */
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-flow__step-num {
	font: var(--text-kanasa-h4);
	line-height: 1.1;
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-flow__title {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-flow__text {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

@media (max-width: 1023px) {
	.p-kanasa-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-kanasa-flow__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
	}

	.p-kanasa-flow__item {
		padding: var(--space-xl) 20px;
	}

	.p-kanasa-flow__num {
		width: 56px;
		height: 56px;
	}

	.p-kanasa-flow__step {
		font-size: 14px;
	}
}