/*
 * front-page.css — トップページ専用のレイアウト。
 *
 * 責任範囲: front-page.php とその template-parts（featured / latest /
 * categories、および人気記事の card-grid）だけで使うスタイル。
 * カード・ボタン・バッジ・トークンはSTEP7〜8で確定したものをそのまま
 * 再利用し、ここで新しいデザイン言語は作らない。front-page.php でのみ
 * 読み込む（inc/enqueue.php参照）。
 */

.front-page > section {
	margin-bottom: var(--space-16);
}

.front-page > section:last-child {
	margin-bottom: 0;
}

/* ---------- 特集セクション ---------- */
/* 通常カードとの主従関係を、サイズ・余白・情報量・配置の4点で作る。
   モバイルは常に縦積み。900px以上でメイン:サブ = 2:1のグリッドにする。 */

.featured-posts__grid {
	display: block;
}

.featured-posts__subs {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

@media (min-width: 900px) {
	.featured-posts__grid--with-subs {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--space-8);
		align-items: start;
	}

	.featured-posts__subs {
		margin-top: 0;
	}
}

/* 特集メインカード本体 */

.featured-main__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.featured-main__media {
	aspect-ratio: 16 / 9;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-4);
}

.featured-main__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-main__category {
	margin-bottom: var(--space-2);
}

.featured-main__title {
	font-size: var(--font-size-h1);
	margin: var(--space-2) 0 var(--space-3);
}

.featured-main__excerpt {
	font-size: var(--font-size-lead);
	line-height: var(--line-height-lead);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.featured-main__date {
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}

/* ---------- カテゴリ導線（カード型） ---------- */
/* カテゴリ数が増えてもflex-wrapで自然に折り返すため崩れない。 */

.category-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.category-nav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 220px;
	max-width: 100%;
	padding: var(--space-4) var(--space-5);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-nav__item:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-card);
}

.category-nav__name {
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
}

.category-nav__count {
	flex: none;
	min-width: 2em;
	text-align: center;
	font-size: var(--font-size-caption);
	color: var(--color-accent);
	background: var(--color-accent-tint);
	border-radius: 999px;
	padding: 0.2em 0.5em;
}