/* ==========================================================================
   工事の流れ /paint/flow/（page-paint-flow.php・template-parts/paint/flow-steps.php）
   Figma 04 PC 80:2750・04 SP 248:7728
   - セクションの上下（112／SP 56）は tokens.css の --space-paint-section。ほかの余白・角丸は Figma の値を px で書く
   ========================================================================== */

.p-paint-flow {
	padding-block: var(--space-paint-section);
	background: var(--color-bg-canvas);
}

.p-paint-flow__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
}

/* 工程のカード（幅 880） */
.p-paint-flow__item {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	width: 100%;
	max-width: 880px;
	padding: var(--space-xl) var(--space-paint-panel) var(--space-paint-panel); /* SP は下の @media で上書き */
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-paint-flow__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-paint-inner);
	min-width: 0;
}

.p-paint-flow__head {
	display: flex;
	gap: var(--space-md);
	align-items: center;
}

/* 番号の丸（このページだけで使う。Figma c-step-number） */
.p-paint-flow .c-step-number {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font: 800 var(--fs-paint-h4) / 1 var(--font-paint); /* H4 の大きさを ExtraBold・行の高さ 1 で（Figma も同じ。テキストスタイルなし） */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.p-paint-flow__title {
	flex: 1 1 0;
	min-width: 0;
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-paint-flow__text {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-paint-flow__icon {
	flex-shrink: 0;
	line-height: 0;
}

/* ==========================================================================
   SP（Figma 248:7917：上の行に番号とアイコン、その下に工程名と説明）
   ========================================================================== */
@media (max-width: 767px) {
	.p-paint-flow {
		padding-block: var(--space-4xl) var(--space-paint-section);
	}

	.p-paint-flow__list {
		gap: var(--space-sm);
	}

	.p-paint-flow__item {
		display: grid;
		grid-template-areas:
			"num icon"
			"title title"
			"text text";
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 10px;
		align-items: center;
		padding: var(--space-lg) var(--space-lg) var(--space-xl);
	}

	.p-paint-flow__body,
	.p-paint-flow__head {
		display: contents;
	}

	.p-paint-flow .c-step-number {
		grid-area: num;
		justify-self: start;
	}

	.p-paint-flow__icon {
		grid-area: icon;
	}

	.p-paint-flow__title {
		grid-area: title;
	}

	.p-paint-flow__text {
		grid-area: text;
	}
}