/* =========================================================================
 * Make it — ブログ一覧／記事（/blog/・/blog/{slug}/）固有スタイル（フェーズ3）
 *
 * 見た目の正：一覧＝Figma PC 143:2 / SP 143:131。記事＝Figma PC 144:2 / SP 144:114。
 * 見出し・リード・最終CTA等の汎用パーツは front.css を共有再利用。
 * home.php（投稿ページ）・archive.php（カテゴリ／タグ）・single.php で共通利用。
 * ====================================================================== */

.mk-section--blog-hero    { background: var(--bg-alt); }
.mk-section--blog-list    { background: var(--bg-base); }
.mk-section--blog-content { background: var(--bg-base); }

/* -------------------------------------------------------------------------
 * 一覧：カード
 * ---------------------------------------------------------------------- */
.mk-blog-list {
	display: flex;
	flex-direction: column;
}

.mk-blog-card {
	border-bottom: 1px solid var(--c-border);
}

.mk-blog-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.125rem 0;
	color: inherit;
	text-decoration: none;
}

.mk-blog-card__thumb {
	width: 100%;
	aspect-ratio: 328 / 182;
	border-radius: var(--radius);
	background: var(--bg-placeholder-thumb);
	overflow: hidden;
}

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

/* -------------------------------------------------------------------------
 * アイキャッチ未設定時のフォールバック図案（Issue #46）
 *
 * 写真は使わず、画像ファイルも足さない。藍墨の地にサイトのシグネチャーである
 * 「通り道」（縦ライン＋節点）を置いた図案を CSS だけで描く。66記事すべてに
 * 同じ写真が出る状態を避けつつ、「まだ画像が無い記事」だと見て分かるようにする。
 *
 * 色は必ずトークン変数を参照する（生の16進値を書かない）。TOPリデザインで
 * 配色が変わっても図案が自動追随するため（2026-08-17 登内様指示）。
 * コーラルは役割別トークンを使う（tokens.css 冒頭）。旧テラコッタ（「灯」）は温度設計
 * ごと廃止済みで、「最終CTA専用」という旧ルールはもう存在しない。
 *
 * 記事側でアイキャッチが設定されれば has_post_thumbnail() 側に切り替わるため、
 * 後片付けは不要（DBには一切触れていない）。
 * ---------------------------------------------------------------------- */
.mk-blog-card__thumb--empty {
	position: relative;
	background: var(--c-primary);
}

/* 縦ライン：カードの高さいっぱいに通す。地に対して控えめなトーンに落とす。 */
.mk-blog-card__thumb--empty::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mk-thumb-rail-x);
	width: var(--rail-width);
	background: var(--rail-line);
	opacity: 0.45;
}

/* 節点：線上に重ねる。縦位置は記事IDで5通りに振り分ける（--empty-0〜4）。
   layout.css の rail と同じく、線の中心と円の中心を揃える。 */
.mk-blog-card__thumb--empty::after {
	content: "";
	position: absolute;
	top: var(--mk-thumb-node-y);
	left: calc(var(--mk-thumb-rail-x) - (var(--rail-node) - var(--rail-width)) / 2);
	width: var(--rail-node);
	height: var(--rail-node);
	margin-top: calc(var(--rail-node) / -2);
	border-radius: 50%;
	background: var(--rail-dot);
}

/* 既定値。PC 248x156・SP 328x182 のどちらでも成立する内側位置。 */
.mk-blog-card__thumb--empty {
	--mk-thumb-rail-x: 24px;
	--mk-thumb-node-y: 50%;
}

/* 節点の高さのばらつき（一覧に並んだときの単調さを減らすため）。
   端に寄せすぎると角丸で欠けるので 28〜72% の範囲に収める。 */
.mk-blog-card__thumb--empty-0 { --mk-thumb-node-y: 28%; }
.mk-blog-card__thumb--empty-1 { --mk-thumb-node-y: 39%; }
.mk-blog-card__thumb--empty-2 { --mk-thumb-node-y: 50%; }
.mk-blog-card__thumb--empty-3 { --mk-thumb-node-y: 61%; }
.mk-blog-card__thumb--empty-4 { --mk-thumb-node-y: 72%; }

/* カードのメタ（「婚活がうまくいかない理由 ・ 2026.06.08」）＝カテゴリ名が日本語
   なので Mono ではなく本文フォント（Issue #60）。日付だけなら Mono でよかったが、
   カテゴリ名と同じ行に並ぶため全体を本文フォントに揃える。サイズは12pxで据え置き。 */
.mk-blog-card__meta {
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--c-text-caption);
}

.mk-blog-card__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: var(--lh-heading);
	color: var(--c-text);
}

.mk-blog-card__excerpt {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--c-text-sub);
}

@media (min-width: 1024px) {
	.mk-blog-card__link {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
		padding: 1.5rem 0;
	}

	.mk-blog-card__thumb {
		flex: none;
		width: 248px;
		aspect-ratio: 248 / 156;
	}

	.mk-blog-card__body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 0.625rem;
		min-width: 0;
	}

	.mk-blog-card__title {
		font-size: 1.25rem;
	}

	.mk-blog-card__excerpt {
		font-size: 0.875rem;
		line-height: 1.85;
	}
}

/* -------------------------------------------------------------------------
 * 一覧：ページネーション（the_posts_pagination）
 * ---------------------------------------------------------------------- */
.mk-blog-list + .pagination,
.mk-section--blog-list .pagination {
	margin-top: 2.5rem;
}

.mk-section--blog-list .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* ページャは数字だけでなく「次へ」「前へ」の日本語が入るので、Mono ではなく
	   本文フォント（Issue #60）。サイズ13pxは据え置き。 */
	font-family: var(--font-body);
	font-size: 0.8125rem;
}

.mk-section--blog-list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	color: var(--c-text-sub);
	text-decoration: none;
}

.mk-section--blog-list .page-numbers.current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-on-dark);
}

.mk-section--blog-list .page-numbers.dots {
	border: 0;
}

/* -------------------------------------------------------------------------
 * 記事：本文カラム（カバー画像＋本文＋著者ボックス）
 * ---------------------------------------------------------------------- */
.mk-blog-article > * + * {
	margin-top: 1.375rem;
}

.mk-blog-cover {
	aspect-ratio: 328 / 182;
	border-radius: var(--radius);
	background: var(--bg-placeholder);
	overflow: hidden;
}

.mk-blog-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.mk-blog-cover {
		aspect-ratio: 968 / 430;
	}
}

/* 本文（the_content の出力そのものを装飾。ブロックエディタの見出し・段落・
   引用・リスト・画像に対応） */
.mk-blog-prose {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.95;
	color: var(--c-text-sub);
}

.mk-blog-prose > * + * {
	margin-top: 1.375rem;
}

.mk-blog-prose h2 + p,
.mk-blog-prose h3 + p {
	margin-top: 0.625rem;
}

.mk-blog-prose h2,
.mk-blog-prose h3 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-heading);
	color: var(--c-text);
	font-size: 1.0625rem;
}

.mk-blog-prose blockquote {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--c-accent);
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.65;
	color: var(--c-text);
	font-size: 1rem;
}

.mk-blog-prose ul,
.mk-blog-prose ol {
	padding-left: 1.25rem;
}

.mk-blog-prose a {
	color: var(--c-primary);
}

.mk-blog-prose img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

@media (min-width: 1024px) {
	.mk-blog-prose {
		font-size: 1rem;
	}

	.mk-blog-prose h2,
	.mk-blog-prose h3 {
		font-size: 1.375rem;
	}

	.mk-blog-prose blockquote {
		font-size: 1.25rem;
	}
}

/* -------------------------------------------------------------------------
 * 記事：著者ボックス（野中大蔵固定）
 * ---------------------------------------------------------------------- */
.mk-blog-author {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: 6px;
	border: 1px solid var(--c-border);
	background: var(--bg-card-warm);
}

.mk-blog-author__photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--bg-placeholder);
}

.mk-blog-author__name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--c-text);
}

.mk-blog-author__desc {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--c-text-sub);
}

@media (min-width: 1024px) {
	.mk-blog-author__name {
		font-size: 1.125rem;
	}

	.mk-blog-author__desc {
		font-size: 0.9375rem;
	}
}