/* ==========================================================================
   Meiblog Child — 一覧系ページ（category.php ほか）
   デザイン: Claude Design「HPデザイン提案書」/ MEI Category.dc.html
   投稿カード・サイドバー・パンくず・ページャーは css/style.css の共通部品。
   ここは 2 カラムの骨格と並べ方だけ。
   ========================================================================== */

.meiblog-archive {
	display: flex;
	justify-content: center;
	gap: 60px;
	padding: 60px var(--meiblog-section-px) 120px;
	background: var(--meiblog-white);
}

.meiblog-archive__main {
	width: 620px;
}

.meiblog-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 290px);
	gap: 40px;
	--meiblog-card-width: 290px;
	--meiblog-card-height: 163px;
}

/* 日付アーカイブは横並びカードを縦に積む */
.meiblog-archive__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	--meiblog-card-width: 250px;
	--meiblog-card-height: 141px;
}

/* 投稿が無いときのメッセージ。セクション見出しが無いので上余白は不要 */
.meiblog-archive__main .meiblog-empty {
	margin-top: 0;
	text-align: left;
}

/* --------------------------------------------------------------------------
   検索結果が 0 件のときの空状態（search.php）
   -------------------------------------------------------------------------- */
.meiblog-search-empty {
	padding: 100px var(--meiblog-section-px) 120px;
	background: var(--meiblog-white);
	text-align: center;
}

.meiblog-search-empty__icon {
	display: block;
	margin: 0 auto;
}

.meiblog-search-empty__title {
	margin-top: 28px;
	font-family: var(--meiblog-font-jp-serif);
	font-size: 16px;
	line-height: 2.3;
	letter-spacing: 2px;
}

.meiblog-search-empty__text {
	margin-top: 14px;
	font-size: 12px;
	line-height: 2;
	color: var(--meiblog-text-sub);
}

.meiblog-search-empty__form {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.meiblog-search-empty__categories {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

/* ==========================================================================
   モバイル（〜900px） — MEI Mobile.dc.html / CATEGORY・ARCHIVE・SEARCH
   ========================================================================== */
@media (max-width: 900px) {

	/* 2 カラムをやめ、サイドバーは本文の下へ回す */
	.meiblog-archive {
		display: block;
		padding: 36px var(--meiblog-section-px) 60px;
	}

	.meiblog-archive__main {
		width: auto;
	}

	/* カテゴリー一覧は 1 列（デザイン準拠） */
	.meiblog-archive__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* 日付アーカイブの横並びリスト */
	.meiblog-archive__list {
		gap: 26px;
	}

	.meiblog-archive .meiblog-sidebar {
		margin-top: 60px;
	}

	/* 検索結果 0 件 */
	.meiblog-search-empty {
		padding: 70px var(--meiblog-section-px) 60px;
	}

	.meiblog-search-empty__title {
		font-size: 14px;
	}

	.meiblog-search-empty__text {
		font-size: 11px;
	}

	/* 横並びだと入らないのでカテゴリーは縦積み */
	.meiblog-search-empty__categories {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}