/**
 * No.02 定義リスト（type=definition）。
 * Figma: 577:62304 / PC 679:29478 / SP 751:12355。
 * 見出し列は PC で日本語 10 文字＋左右パディングが収まる幅。
 * 本文は text-sm / line-height regular。
 * SP/PC 切替は theme.json tablet-small.min（768px）。
 * @media は CSS 変数を使えないため、値を直書きしている。
 */

.definition-list {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--jp-sans);
	color: var(--wp--preset--color--base-black);
}

.definition-list__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding-block: var(--wp--custom--atom--xxl);
	border: 0;
	box-sizing: border-box;
}

.definition-list__term,
.definition-list__desc {
	margin: 0;
	padding: var(--wp--custom--atom--rg) var(--wp--custom--atom--xxl);
	font-size: var(--wp--preset--font-size--text-sm);
	line-height: var(--wp--custom--line-height--regular);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	box-sizing: border-box;
}

.definition-list__term {
	flex: none;
	width: 100%;
	font-weight: var(--wp--custom--font-weight--medium);
	border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
}

.definition-list__desc {
	flex: none;
	width: 100%;
	font-weight: var(--wp--custom--font-weight--regular);
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.definition-list__term,
	.definition-list__desc {
		padding-inline: var(--wp--custom--molecule--rg);
	}

	/*
	 * カスタムブロックだけ、行の枠線を画面端まで出す。
	 * 直下のブロックはコアが左右 margin を auto !important にするため、行側ではみ出させる。
	 * 文字の左右は上の molecule/rg のまま。編集画面には .content が無いので対象外。
	 */
	.content .wp-block-sumida-cc-definition-list .definition-list__item {
		width: 100vw;
		margin-inline-start: calc(50% - 50vw);
	}
}

@media (min-width: 768px) {
	.definition-list {
		border-top: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	}

	.definition-list__item {
		flex-direction: row;
		align-items: flex-start;
		padding-block: var(--wp--custom--molecule--xxs);
		padding-inline: 0;
		border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	}

	.definition-list__term,
	.definition-list__desc {
		padding: var(--wp--custom--atom--rg);
	}

	.definition-list__term {
		flex: 0 0 calc(10em + (var(--wp--custom--atom--rg) * 2) + 1px);
		width: calc(10em + (var(--wp--custom--atom--rg) * 2) + 1px);
		border-bottom: 0;
	}

	.definition-list__desc {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
}

.editor-styles-wrapper .definition-list .block-list-appender {
	margin: 8px 0 0;
}