/*
 * ブログ一覧（template-blog.php）— /knowledge-centre/blog/
 *
 * Claude Design v3 のブログ画面（prototype 5677-5810）より。
 * 部品は base.css、購読フォームは news.css。ここにあるのは
 * 「インラインに置けないもの」と「プロトタイプに無いブレークポイント」だけ。
 *
 * ⚠️ assets/overrides/blog.css は別に存在し、**aria-label 文字列をセレクタに
 * している**（[aria-label="All blog posts"] / "Featured post" /
 * "Subscribe to the Tektome blog"）。テンプレート側の aria-label を変えると
 * あちらが黙って外れる。
 */

/* ============================================================
   ページ送り
   ============================================================
   v3 は 1 2 3 4 … 8 のボタン列。実体は tk_render_news_pagination() が出す
   .news-pagination / .news-page-list / .news-page-num で、news.css にも定義が
   あるが v0.1 の見た目。v3 の寸法で上書きする。
   ============================================================ */

.news-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 44px;
}
.news-page-list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid #C6C7E6;
	border-radius: 6px;
	background: #fff;
	color: #101010;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background 120ms, border-color 120ms, color 120ms;
}
.news-page-num:hover {
	background: #F3F3FC;
	border-color: #5156BE;
	color: #5156BE;
}
/* 現在ページ。tk_render_news_pagination() は <button> で出す。 */
.news-page-num.is-active {
	background: #5156BE;
	border-color: #5156BE;
	color: #fff;
}
.news-page-ellipsis {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	color: #7A7A85;
	font-family: 'Noto Sans Mono', monospace;
	font-size: 12px;
}

/* 著者ビューで記事が0件のとき。 */
.news-empty {
	margin: 0 0 32px;
	font-size: 14.5px;
	line-height: 1.75;
	color: #3A3A45;
}

/* ============================================================
   狭い画面
   ============================================================
   プロトタイプにブレークポイントは1つも無い。
   グリッドはインライン指定なので !important でないと勝てない。
   ============================================================ */

@media (max-width: 1000px) {
	[aria-label="All blog posts"] .sec-w > div[style*="repeat(3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 860px) {
	/* 注目記事の 440px + 1fr。画像と本文が横に並べなくなる幅で縦積みにする。 */
	[aria-label="Featured post"] .tk-card {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	[aria-label="Featured post"] .tk-card > div:last-child {
		padding: 28px 24px !important;
	}
}

@media (max-width: 620px) {
	[aria-label="All blog posts"] .sec-w > div[style*="repeat(3"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}