/*
 * columns ブロックのレイアウト（TLH-BUILD-001 / TLH-ARCH-001）
 *
 * 問い合わせページの2カラム（左=入力フォーム / 右=確認エリア）は
 * .wp-block-columns に display:flex が当たっていることを前提にしている。
 * この指定は WordPress コアの block-library スタイルにあり、
 * 当サイトの SCSS はそれを前提に flex-basis や column-gap だけを書いていた。
 *
 * ところが当サイトは全ページが PHP テンプレートで、ブロックを描画しない。
 * WordPress がブロック単位で CSS を読み込む設定になっていると、
 * columns の CSS が一度も読み込まれず、2カラムが縦に落ちる。
 *
 * 外部の設定に左右されないよう、必要な指定をここに持つ。
 *
 * 読み込み順が重要。必ずテーマ側の CSS より前に読み込むこと。
 * 後に置くと .sm_price_grp-pc{display:none}（スマホで非表示）を
 * .wp-block-columns{display:flex} が上書きし、スマホで料金表が二重に出る。
 * functions.php で child_style / tlh-style / tlh-contact の依存に入れている。
 *
 * 指定は WordPress コアの block-library と同じ。
 * display は !important を付けない。付けるとテーマ側の display:none を
 * 打ち消してしまう。
 */
.wp-block-columns {
	align-items: normal !important;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap !important;
}

@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: nowrap !important;
	}
}

.wp-block-columns.is-not-stacked-on-mobile {
	flex-wrap: nowrap !important;
}

@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 782px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0;
		flex-grow: 1;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
		flex-grow: 0;
	}
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*="flex-basis"] {
	flex-grow: 0;
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}