/**
 * ブログの CSS（記事一覧・記事ページ）
 *
 * 記事の「本文」の見た目は prose.css。ここは本文の外側（カード・記事の見出し・ページ送りなど）。
 */

/* ── 記事一覧（カードを並べる）──────────────── */

.c-post-list {
	display: grid;
	gap: var(--locus-space-lg);
}

@media (min-width: 768px) {
	.c-post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.c-post-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── 記事カード ───────────────────────────── */

.c-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background-color: var(--locus-color-bg);
	border: 1px solid var(--locus-color-border);
	border-radius: var(--locus-radius-lg);
	transition: box-shadow var(--locus-transition), transform var(--locus-transition);
}

.c-post-card__link:hover {
	color: inherit;
	box-shadow: var(--locus-shadow-lg);
	transform: translateY(-2px);
}

/*
 * サムネイルの枠。画像の縦横比がバラバラでも、枠を 16:9 に固定して中央を切り抜いて表示する。
 * アイキャッチ画像がない記事は、枠だけ薄い色で表示される。
 */
.c-post-card__thumb {
	aspect-ratio: 16 / 9;
	background-color: var(--locus-color-primary-light);
}

.c-post-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 既定の絵（背景が透明なイラスト）は、切り取らずに枠の中へ収め、まわりに余白を取る */
.c-post-card__thumb .c-post-card__default {
	padding: var(--locus-space-sm);
	object-fit: contain;
}

.c-post-card__body {
	padding: var(--locus-space-md);
}

.c-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--locus-space-xs);
	font-size: 0.8125rem;
	color: var(--locus-color-text-muted);
}

.c-post-card__category {
	padding: 0 0.6em;
	font-weight: 700;
	color: var(--locus-color-primary);
	background-color: var(--locus-color-primary-light);
	border-radius: var(--locus-radius-pill);
}

.c-post-card__title {
	margin-top: var(--locus-space-xs);
	font-size: var(--locus-font-size-lg);
	line-height: 1.6;
}

/* ── 記事ページ ───────────────────────────── */

.c-article {
	padding-block: var(--locus-space-lg) var(--locus-space-xl);
}

.c-article__header {
	margin-top: var(--locus-space-lg);
}

.c-article__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--locus-space-xs);
	margin: 0 0 var(--locus-space-sm);
	padding: 0;
	list-style: none;
}

.c-article__title {
	font-size: var(--locus-font-size-h1);
}

.c-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--locus-space-md);
	margin-top: var(--locus-space-sm);
	font-size: var(--locus-font-size-sm);
	color: var(--locus-color-text-muted);
}

.c-article__thumbnail {
	margin-top: var(--locus-space-lg);
}

.c-article__thumbnail img {
	display: block;
	width: 100%;
	border-radius: var(--locus-radius-lg);
}

.c-article__body {
	margin-top: var(--locus-space-xl);
}

.c-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--locus-space-xs) var(--locus-space-sm);
	margin-top: var(--locus-space-xl);
	padding: 0;
	font-size: var(--locus-font-size-sm);
	list-style: none;
}

.c-article__tags a {
	color: var(--locus-color-text-muted);
}

/* 記事下の CTA（子テーマの template-parts/post-cta.php）との間隔 */
.c-article .c-cta {
	margin-top: var(--locus-space-xl);
}

/* ── 関連記事 ───────────────────────────── */

.c-related {
	padding-block: var(--locus-space-xl);
	background-color: var(--locus-color-bg-alt);
}

.c-related__title {
	margin-bottom: var(--locus-space-lg);
	font-size: var(--locus-font-size-h3);
	text-align: center;
}

/* ── 前後の記事 ─────────────────────────────── */
/* the_post_navigation() が出す HTML（.nav-links / .nav-previous / .nav-next は WordPress が付けるクラス） */

.c-post-nav {
	padding-block: var(--locus-space-xl);
}

.c-post-nav .nav-links {
	display: grid;
	gap: var(--locus-space-sm);
}

@media (min-width: 768px) {
	.c-post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.c-post-nav .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.c-post-nav a {
	display: block;
	height: 100%;
	padding: var(--locus-space-sm) var(--locus-space-md);
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--locus-color-border);
	border-radius: var(--locus-radius);
}

.c-post-nav a:hover {
	color: var(--locus-color-primary);
	border-color: currentColor;
}

.c-post-nav__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--locus-color-text-muted);
}

.c-post-nav__title {
	display: block;
	font-weight: 700;
}

/* ── ページ送り ─────────────────────────────── */
/* the_posts_pagination() が出す HTML（.page-numbers / .current は WordPress が付けるクラス） */

.c-pagination {
	margin-top: var(--locus-space-xl);
}

.c-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--locus-space-xs);
}

.c-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75em;
	color: var(--locus-color-text);
	text-decoration: none;
	border: 1px solid var(--locus-color-border);
	border-radius: var(--locus-radius);
}

.c-pagination a.page-numbers:hover {
	color: var(--locus-color-primary);
	border-color: currentColor;
}

.c-pagination .page-numbers.current {
	color: var(--locus-color-on-primary);
	background-color: var(--locus-color-primary);
	border-color: var(--locus-color-primary);
}

.c-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ── 検索フォーム・結果なし ───────────────────── */

.c-search-form {
	display: flex;
	gap: var(--locus-space-xs);
	max-width: 32rem;
}

.c-search-form__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 1em;
	background-color: var(--locus-color-bg);
	border: 1px solid var(--locus-color-border);
	border-radius: var(--locus-radius-pill);
}

.c-empty {
	display: grid;
	gap: var(--locus-space-md);
	justify-items: start;
}