/**
 * SearchHub Engine: 作品一覧のタグリンク(beta.67。beta.69 から List Enhancer の context ごと。inc/list-enhancer.php)
 *
 * ・`.searchhub-card-tags-list` は TOP の本文の SWELL 投稿リストに、`.searchhub-le-*` は手入れした一覧の作品の <li> にだけ付く
 *   (他の一覧・サイドバーには効かない)。
 * ・リスト型(`.searchhub-card-tags-list` / `.searchhub-le-list`。関連記事のリスト型も同じ)は TOP と同じ grid。
 *   カード型(`.searchhub-le-card`)は SWELL のままで、タグは本文の下。
 * ・PC: サムネイル左 / 右にタイトル、その下にタグ。SP(599px 以下): サムネイル左 / 右にタイトル、タグはその下に全幅。
 * ・作品のリンク(.p-postList__link)は <li> の grid の全面に置き、その中を subgrid にして、サムネイル・本文を
 *   <li> と同じ列・行に並べる。タグはリンクの外の別の grid item で、本文の下の行に重ねて置く(リンクの中にリンクを入れない)。
 *   beta.70: beta.67〜69 はリンクを display: contents にしていたため、リンクに box が無く keyboard で focus できなかった。
 *   subgrid にしても列・行の大きさは <li> の grid が決めるので、見た目(サムネイル幅・高さ・余白)は beta.69 と同じ。
 * ・色は SWELL の変数(--color_main / --color_main_thin)だけ。
 */

.searchhub-card-tags-list .p-postList__item,
.p-postList__item.searchhub-le-list {
	display: grid;
	grid-template-columns: 36% minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 4%;
	align-items: start;
}

.searchhub-card-tags-list .p-postList__link,
.searchhub-le-list .p-postList__link {
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	min-width: 0;
}

.searchhub-card-tags-list .p-postList__thumb,
.searchhub-le-list .p-postList__thumb {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: auto;
}

.searchhub-card-tags-list .p-postList__body,
.searchhub-le-list .p-postList__body {
	grid-column: 2;
	grid-row: 1;
	width: auto;
}

.searchhub-card-tags-list .p-postList__meta {
	display: none;
}

.searchhub-card-tags-list .p-postList__link:focus-visible,
.searchhub-le-list .p-postList__link:focus-visible {
	outline: 2px solid var(--color_main);
	outline-offset: 2px;
}

.searchhub-le-hide-date .c-postTimes,
.searchhub-le-hide-category .c-postThumb__cat,
.searchhub-le-hide-category .p-postList__cat,
.searchhub-le-hide-excerpt .p-postList__excerpt {
	display: none;
}

.searchhub-card-tags {
	grid-column: 2;
	grid-row: 2;
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	min-width: 0;
}

.searchhub-card-tag {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 2px 10px;
	border: 1px solid var(--color_main_thin);
	border-radius: 3px;
	background: var(--color_main_thin);
	color: var(--color_main);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s, background-color .2s, border-color .2s;
}

.searchhub-card-tag:hover,
.searchhub-card-tag:focus-visible {
	border-color: var(--color_main);
	background: var(--color_main);
	color: #fff;
}

/* カード型(searchhub-le-card): SWELL はリンクを <li> の高さいっぱいにする(.-type-card .p-postList__link{height:100%})ので、タグを本文の下に置く */
.p-postList__item.searchhub-le-card {
	display: flex;
	flex-direction: column;
}

.p-postList__item.searchhub-le-card .p-postList__link {
	height: auto;
}

/* 関連記事の小さいチップ(リスト型・カード型とも) */
.searchhub-card-tags--compact {
	gap: 4px;
	margin-top: 6px;
}

.searchhub-card-tags--compact .searchhub-card-tag {
	min-height: 24px;
	padding: 1px 8px;
	font-size: 11px;
}

@media (max-width: 599px) {
	.searchhub-card-tags-list .p-postList__item,
	.p-postList__item.searchhub-le-list {
		column-gap: 12px;
	}

	.searchhub-card-tags-list .p-postList__thumb,
	.searchhub-le-list .p-postList__thumb {
		grid-row: 1;
	}

	.searchhub-card-tags {
		grid-column: 1 / -1;
		margin-top: 8px;
	}

	.searchhub-card-tag {
		min-height: 32px;
		padding: 4px 12px;
	}

	.searchhub-card-tags--compact .searchhub-card-tag {
		min-height: 28px;
		padding: 2px 8px;
	}
}