/**
 * 生態情報の表（記事内）
 *
 * 見た目は WordPress 標準の表の「ストライプ」（is-style-stripes）。縞の色などは wp-block-table の CSS に任せ、
 * ここでは項目名の列と、特徴・生態の段落の余白だけを整える。
 */

/*
 * サイトの追加 CSS（カスタマイザー）に、キャプションの位置を直すための `figure { inline-size: fit-content; }` がある。
 * そのままだと表も中身の幅に縮み、項目が少ない記事では表が細くなるので、この表だけ本文の幅に広げる。
 */
.szk-seitai__table {
	inline-size: auto;
}

.szk-seitai__table table {
	width: 100%;
}

/*
 * 項目名のセルは th（読み上げで項目名と分かるように）だが、見た目は見本（表ブロックの td）に合わせる。
 * yStandard は th すべてに薄い灰色の背景を付けるので、それを外して行の縞が左の列にも通るようにする。
 */
.szk-seitai__table th {
	width: 9em;
	background-color: transparent;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.szk-seitai__table td {
	vertical-align: middle;
	word-break: break-word;
}

/* 特徴・生態の段落 */
.szk-seitai__table td p {
	margin: 0;
}

.szk-seitai__table td p + p {
	margin-top: 0.75em;
}

/*
 * スマートフォンでは、項目名と値を縦に並べる（項目名の上、値の下）。
 * 横に並べると、項目名の列が表の半分ほどを取り、学名や分類が語の途中で切れたり何行にもなったりする。
 * 縞は行（tr）に付いているので、縦に並べても1項目ずつ縞になる。
 */
@media (max-width: 599px) {
	.szk-seitai__table th,
	.szk-seitai__table td {
		display: block;
		width: auto;
	}

	.szk-seitai__table th {
		padding-bottom: 0;
		color: #666;
		font-size: 0.85em;
		white-space: normal;
	}

	.szk-seitai__table td {
		padding-top: 0.25em;
	}
}

/* エディタの中だけに出す案内（公開側には出ない） */
.szk-seitai-note {
	padding: 1em 1.25em;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	background-color: #f6f7f7;
	color: #50575e;
	font-size: 0.9em;
}