/**
 * 図鑑アーカイブ
 *
 * 独自クラス（szk-zukan__*）だけで構成し、yStandard の ys-posts 系には依存しない。
 * 現行 /flower-shurui の見た目（SP2列 / タブレット3列 / PC4列、サムネ4:3）を再現する。
 *
 * 見出しの線は全レベル共通で、文字サイズだけ小さくなる（ご指定による）。
 * yStandard Toolbox は h3 以降に線が付かないため、ここで統一している。
 */

/*
 * カスタムプロパティはページ全体（.szk-zukan-page）と一覧本体（.szk-zukan）の
 * 両方に定義する。一覧単体でも成立するので、ショートコードで埋め込んでも壊れない。
 */
.szk-zukan-page,
.szk-zukan {
	/* 見出し・アクセント色。サイトの見出し色を変えた場合はここを1箇所直す。 */
	--szk-zukan-accent: #23a86c;
	--szk-zukan-border-width: 2px;
	/* ブロック（見出し・説明・目次）どうしの間隔 */
	--szk-zukan-gap: 1.5rem;
	/* カードどうしの間隔。1つの変数で兼ねると見出しまわりまで詰まるため分けている */
	--szk-zukan-card-gap: 10px;
	/* 見出しの下線から直下のカードまでに足す余白 */
	--szk-zukan-heading-space: 15px;
	--szk-zukan-inner-gap: 0.5em;
	--szk-zukan-columns: 2;
	--szk-zukan-noimage-bg: #f2f2f2;
}

/* ---------------------------------------------------------------- 見出し */

.szk-zukan__header {
	margin: 0 0 var(--szk-zukan-gap);
}

.szk-zukan__page-title,
.szk-zukan__heading {
	margin: 3em 0 calc(0.25em + var(--szk-zukan-heading-space));
	padding: 0 0 var(--szk-zukan-inner-gap);
	border-bottom: var(--szk-zukan-border-width) solid var(--szk-zukan-accent);
	color: var(--szk-zukan-accent);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.szk-zukan__page-title {
	margin: 0;
	font-size: 1.6em;
}

/* 下線は共通、文字サイズだけ階層で小さくする */
.szk-zukan__heading[data-level="2"] {
	font-size: 1.4em;
}

.szk-zukan__heading[data-level="3"] {
	font-size: 1.15em;
}

.szk-zukan__heading[data-level="4"] {
	font-size: 1em;
}

.szk-zukan__heading[data-level="5"] {
	font-size: 0.95em;
}

.szk-zukan__heading[data-level="6"] {
	font-size: 0.9em;
}

.szk-zukan__heading-link,
.szk-zukan__heading-link:hover,
.szk-zukan__heading-link:focus {
	color: inherit;
	text-decoration: none;
}

.szk-zukan__heading-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------ 説明・目次 */

.szk-zukan__dscr {
	margin-bottom: var(--szk-zukan-gap);
}

.szk-zukan__toc {
	margin: 0 0 var(--szk-zukan-gap);
	padding: 1em 1.25em;
	border: 1px solid #eee;
	border-radius: 4px;
	background-color: #fafafa;
}

.szk-zukan__toc-title {
	margin: 0 0 0.5em;
	color: var(--szk-zukan-accent);
	font-weight: 700;
	font-size: 0.95em;
}

.szk-zukan__toc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.szk-zukan__toc-item {
	font-size: 0.9em;
	line-height: 1.5;
}

/* 目次の第2階層（h3相当）。「スズキ目（アジ科/イシダイ科）」のように括弧で束ねる */
.szk-zukan__toc-sub {
	margin-left: 0.15em;
}

.szk-zukan__toc-separator {
	display: inline-block;
	margin: 0 0.15em;
}

/* -------------------------------------------------------------- カード */

.szk-zukan__list {
	display: grid;
	grid-template-columns: repeat(var(--szk-zukan-columns), minmax(0, 1fr));
	gap: var(--szk-zukan-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.szk-zukan__item {
	margin: 0;
	padding: 0;
}

.szk-zukan__link {
	display: block;
	height: 100%;
	color: currentColor;
	text-decoration: none;
}

.szk-zukan__link:hover,
.szk-zukan__link:focus {
	color: currentColor;
}

.szk-zukan__thumb {
	display: block;
	position: relative;
	margin-bottom: var(--szk-zukan-inner-gap);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--szk-zukan-noimage-bg);
}

.szk-zukan__image,
.szk-zukan__noimage {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.szk-zukan__link:hover .szk-zukan__image {
	transform: scale(1.1);
}

.szk-zukan__title {
	display: block;
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1.4;
	word-break: break-word;
}

/* aspect-ratio 未対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 4 / 3) {
	.szk-zukan__thumb {
		height: 0;
		padding-top: 75%;
	}

	.szk-zukan__image,
	.szk-zukan__noimage {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ------------------------------------------ 説明欄のブログカード */

/*
 * カテゴリーの説明欄に置かれた [ys_blog_card] のドメイン表示を消す。
 * 同じサイト内へのリンクなので「smallzoo.net」の表示は不要（ご指定による）。
 * 図鑑ページのCSSなので、記事本文中のブログカードには影響しない。
 */
.szk-zukan-page .ystdb-card__domain {
	display: none;
}

/* ------------------------------------------------------------ 空の状態 */

.szk-zukan__empty {
	margin: 0;
	padding: 2em 0;
	color: #666;
	text-align: center;
}

/* -------------------------------------------------------- すべて見る */

.szk-zukan__more {
	margin: var(--szk-zukan-inner-gap) 0 0;
	font-size: 0.9em;
	text-align: right;
}

.szk-zukan__more-link {
	color: var(--szk-zukan-accent);
	text-decoration: none;
}

.szk-zukan__more-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------ ブレークポイント */

/* タブレット：yStandard の col-tablet--3 と同じ 600px */
@media (min-width: 600px) {
	.szk-zukan {
		--szk-zukan-columns: 3;
	}
}

/* PC：yStandard の col-pc--4 と同じ 1025px */
@media (min-width: 1025px) {
	.szk-zukan {
		--szk-zukan-columns: 4;
	}
}