/*
 * おすすめの一覧（/osusume/）とおすすめ1本（/osusume/<slug>/）。担当H。
 * 色・文字・余白は base.css の変数だけを使う。
 */

.fn-osusume-title {
	margin: 0 0 var(--fn-sp-3);
	font-size: var(--fn-fs-xl);
	line-height: var(--fn-lh-tight);
	word-break: break-word;
}

.fn-osusume-lead {
	margin: 0 0 var(--fn-sp-5);
	color: var(--fn-text-sub);
	font-size: var(--fn-fs-base);
}

/* ---------- 一覧 ---------- */
.fn-osusume-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fn-gap);
}

.fn-osusume-index-link {
	display: flex;
	flex-direction: column;
	gap: var(--fn-sp-1);
	padding: var(--fn-sp-4);
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
}

a.fn-osusume-index-link:hover {
	background: var(--fn-surface-2);
	color: var(--fn-text);
}

.fn-osusume-index-title {
	font-size: var(--fn-fs-md);
	font-weight: var(--fn-fw-bold);
	line-height: var(--fn-lh-tight);
}

.fn-osusume-index-lead {
	color: var(--fn-text-sub);
	font-size: var(--fn-fs-sm);
}

.fn-osusume-index-count {
	color: var(--fn-accent);
	font-size: var(--fn-fs-xs);
	font-weight: var(--fn-fw-bold);
}

/* ---------- 1本: 各クリエイター ---------- */
.fn-osusume-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fn-sp-5);
}

/* スマホ: カード（左上に順位の札）→ 理由 → 動画 を縦に */
.fn-osusume-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fn-sp-3);
	padding-top: var(--fn-sp-4);
	border-top: 1px solid var(--fn-border);
}

.fn-osusume-main {
	display: grid;
	gap: var(--fn-sp-3);
	align-content: start;
	min-width: 0;
}

.fn-osusume-card {
	max-width: 220px;
}

.fn-osusume-reason {
	margin: 0;
	font-size: var(--fn-fs-base);
	line-height: var(--fn-lh);
}

.fn-osusume-clip {
	max-width: 220px;
}

/* PC: 左にカードと理由、右に動画の2列。横に広がりすぎないよう幅を抑える */
@media (min-width: 720px) {
	.fn-osusume-item {
		grid-template-columns: minmax(0, 1fr);
		max-width: 880px;
		align-items: start;
		column-gap: var(--fn-sp-5);
	}
	.fn-osusume-item--clip {
		grid-template-columns: minmax(0, 1fr) 240px;
	}
	.fn-osusume-card { max-width: none; }
	.fn-osusume-clip { max-width: none; }

	/* カードは横向き: 左にアイコン、右に名前と数字 */
	.fn-osusume-card .fn-ccard {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-auto-flow: row;
		justify-items: start;
		align-content: center;
		column-gap: var(--fn-sp-3);
		padding: var(--fn-sp-3) var(--fn-sp-4);
		text-align: left;
	}
	.fn-osusume-card .fn-ccard > * { grid-column: 2; }
	.fn-osusume-card .fn-ccard > .fn-ccard-icon {
		grid-column: 1;
		grid-row: 1 / span 6;
		align-self: center;
		margin-bottom: 0;
	}
	.fn-osusume-card .fn-ccard > .fn-ccard-rank { grid-column: auto; }
}

/* ---------- トップの「おすすめ特集」 ---------- */
.fn-osusume-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fn-gap);
}
@media (min-width: 600px) {
	.fn-osusume-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.fn-osusume-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fn-osusume-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--fn-sp-2);
	height: 100%;
	padding: var(--fn-sp-4);
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
	color: var(--fn-text);
}
a.fn-osusume-tile:hover {
	background: var(--fn-surface-2);
	color: var(--fn-text);
}
.fn-osusume-tile-title {
	font-size: var(--fn-fs-base);
	font-weight: var(--fn-fw-bold);
	line-height: var(--fn-lh-tight);
	word-break: break-word;
}
.fn-osusume-tile-count {
	color: var(--fn-accent);
	font-size: var(--fn-fs-xs);
	font-weight: var(--fn-fw-bold);
}