/* ==========================================================================
   かなさホーム — 相談の案内の帯（フッターの上。template-parts/kanasa/consult.php）
   - PC: Figma p-kanasa-consult 55:1425（濃い緑の面。電話・フォームのカードを2つ並べ、高さをそろえる → ケアマネジャーの方への案内）
   - SP: Figma l-consult-kanasa-sp 234:709（カードを縦に積む。ボタンは高さ 56px・中央）
   ========================================================================== */

.p-kanasa-consult {
	--focus-color: var(--kanasa-text-on-green);

	padding-block: var(--kanasa-section-py);
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-green-strong);
}

.p-kanasa-consult__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	align-items: center;
	width: 100%;
	max-width: calc(1200px + var(--kanasa-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--kanasa-gutter);
}

.p-kanasa-consult__title {
	font: var(--text-kanasa-h1);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-on-green);
	text-align: center;
}

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

.p-kanasa-consult__item {
	--focus-color: var(--kanasa-border-strong);

	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3xl) var(--space-2xl);
	text-align: center;
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-consult__head,
.p-kanasa-consult__action {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
}

.p-kanasa-consult__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--kanasa-text-green);
	background: var(--kanasa-bg-yellow);
	border-radius: 50%;
}

.p-kanasa-consult__icon .c-kanasa-icon {
	width: 32px;
	height: 32px;
}

.p-kanasa-consult__item-title {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

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

.p-kanasa-consult__tel {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px; /* SP で押せる高さ */
	color: var(--kanasa-text-green);
	text-decoration: none;
}

.p-kanasa-consult__tel-icon {
	width: 32px;
	height: 32px;
}

.p-kanasa-consult__number {
	font: var(--text-kanasa-h1);
	letter-spacing: var(--ls-kanasa);
	white-space: nowrap; /* 番号の途中で折り返さない */
}

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

.p-kanasa-consult .p-kanasa-consult__button {
	margin-top: var(--space-sm); /* component-button.css（後から読み込む）の margin: 0 より強く */
}

/* ケアマネジャー・事業所の方へ（白い長丸） */
.p-kanasa-consult__caremanager {
	--focus-color: var(--kanasa-border-strong);

	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	width: fit-content;
	max-width: 100%;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) 36px;
	background: var(--kanasa-bg-surface);
	border-radius: var(--radius-full);
}

.p-kanasa-consult__caremanager-text {
	flex: 1 1 auto;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

@media (hover: hover) {
	.p-kanasa-consult__tel:hover .p-kanasa-consult__number {
		text-decoration: underline;
		text-underline-offset: 6px;
	}
}

/* 768〜1199px: 2列のカードに番号が入るよう、字を幅に合わせて小さく（768px で 26px・1176px 以上で 40px） */
@media (min-width: 768px) and (max-width: 1199px) {
	.p-kanasa-consult__number {
		font-size: clamp(24px, 3.4vw, var(--fs-kanasa-h1));
	}
}

@media (max-width: 1023px) {
	/* 縦に並べたときは文を箱の幅いっぱいに（中身の幅に合わせると「事業所／の方からの」と折れていた。2026-10-05） */
	.p-kanasa-consult__caremanager-text {
		align-self: stretch;
	}

	.p-kanasa-consult__caremanager {
		flex-direction: column;
		width: 100%;
		max-width: 560px;
		padding: var(--space-lg) var(--space-lg) var(--space-lg);
		text-align: center;
		border-radius: var(--radius-xl);
	}
}

@media (max-width: 767px) {
	.p-kanasa-consult__inner {
		gap: 28px; /* Figma の値 */
	}

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

	.p-kanasa-consult__item {
		justify-content: flex-start;
		padding: var(--space-2xl) var(--space-xl);
		border-radius: var(--radius-xl);
	}

	.p-kanasa-consult__icon {
		width: 64px;
		height: 64px;
	}

	.p-kanasa-consult__icon .c-kanasa-icon {
		width: 28px;
		height: 28px;
	}

	.p-kanasa-consult__tel-icon {
		width: 26px;
		height: 26px;
	}

	/* ボタンは高さ 56px・文字と矢印を中央に（Figma c-kanasa-button-sp） */
	.p-kanasa-consult :is(.p-kanasa-consult__button, .p-kanasa-consult__caremanager-button) {
		justify-content: center;
		min-height: 56px;
		margin-top: 0;
		padding: 10px 12px;
		font-size: 15px;
	}

	.p-kanasa-consult .p-kanasa-consult__caremanager-button {
		padding: 8px 10px;
	}

	.p-kanasa-consult :is(.p-kanasa-consult__button, .p-kanasa-consult__caremanager-button) .p-kanasa-button__arrow {
		width: 36px;
		height: 36px;
	}

	.p-kanasa-consult__action {
		width: 100%;
	}

	/* 文は決めた改行と <wbr> の所でだけ折る（「折り返しご／連絡します」「事業所の方か／らの」と言葉の途中で折れないように。2026-10-05 ユーザー指摘） */
	.p-kanasa-consult :is(.p-kanasa-consult__label, .p-kanasa-consult__caremanager-text) {
		align-self: stretch;
		word-break: keep-all;
	}

	.p-kanasa-consult__caremanager {
		max-width: none;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-xl);
	}
}