/* ==========================================================================
   対応エリア 地域別 /paint/area/{市町村}/（taxonomy-area.php・template-parts/paint/area-*.php）
   Figma 04 PC 81:2759・04 SP 249:7559
   - セクションの上下（112／SP 56）と見出しから中身（56／SP 28）は tokens.css の --space-paint-*。ほかの余白・角丸は Figma の値を px で書く
   ========================================================================== */

/* ---------- 導入文と施工事例の件数の箱（白） ---------- */
.p-area__intro {
	padding-block: var(--space-paint-section);
	background: var(--color-bg-canvas);
}

.p-area__intro-inner {
	display: flex;
	gap: var(--space-5xl);
	align-items: flex-start;
}

.p-area__body {
	flex: 1 1 0;
	min-width: 0;
}

.p-area__text {
	max-width: 720px;
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-area__text > * + * {
	margin-top: 1em; /* 管理画面の「説明」を段落で書いたとき */
}

.p-area__info {
	display: flex;
	flex: 0 0 420px;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-area__info-label {
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-area__info-count {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.p-area__info-number {
	font: var(--text-paint-number-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
}

.p-area__info-unit {
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

/* 施工事例が0件のとき（件数の代わりに「準備中」） */
.p-area__info-count--empty {
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
}

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

/* ---------- その地域の施工事例（淡い青。カードは白） ---------- */
.p-area__works {
	padding-block: var(--space-paint-section);
	background: var(--color-bg-muted);
}

.p-area__works-inner,
.p-area__nearby-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-heading);
	align-items: center;
}

.p-area__works-inner > *,
.p-area__nearby-inner > * {
	width: 100%;
}

.p-area__works-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	align-items: stretch;
}

.p-area__works-item {
	display: flex;
}

.p-area__works-item > * {
	flex: 1 1 auto;
	width: 100%;
}

.p-area__works-inner > .p-area__works-more {
	display: flex;
	justify-content: center;
	margin-top: -16px; /* カードとの間を 40px に */
}

/* 0件のとき（準備中） */
.p-area__works-empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-2xl) var(--space-xl);
	text-align: center;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-paint-card);
}

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

/* ---------- 近くのエリア（白） ---------- */
.p-area__nearby {
	padding-block: var(--space-paint-section);
	background: var(--color-bg-canvas);
}

.p-area__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
}

.p-area__chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--space-sm) var(--space-lg);
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
	background: var(--blue-100); /* Figma blue/100（色の札） */
	border-radius: var(--radius-full);
	transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
	.p-area__chip:hover {
		color: var(--color-text-on-brand);
		background: var(--color-bg-brand);
	}
}

/* ==========================================================================
   SP（Figma 249:7559：導入文の下に箱・カードは1列・札は折り返す）
   ========================================================================== */
@media (max-width: 767px) {
	.p-area__intro {
		padding-block: var(--space-4xl) var(--space-paint-section);
	}

	.p-area__intro-inner {
		flex-direction: column;
		gap: var(--space-paint-card);
		align-items: stretch;
	}

	.p-area__info {
		flex: none;
		gap: var(--space-sm);
		padding: var(--space-xl) var(--space-lg);
	}

	.p-area__works,
	.p-area__nearby {
		padding-block: var(--space-paint-section);
	}

	.p-area__works-inner,
	.p-area__nearby-inner {
		gap: var(--space-paint-heading);
	}

	.p-area__works-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-area__works-inner > .p-area__works-more {
		display: block;
		margin-top: -4px;
	}

	.p-area__works-empty {
		padding: var(--space-xl) var(--space-lg);
	}

	.p-area__options {
		gap: var(--space-xs);
	}
}