/* ==========================================================================
   次元小窝 · 热门排行（top.css）

   只放**本页独有**的样式 —— 侧栏、顶栏、头图卡全在 index.css 里，别在这儿重复写。
   改侧栏请去 index.css，三个页面会一起变。

   目录：§1 榜单网格  §2 排名数字  §3 缩略图  §4 信息区  §5 响应式
   ========================================================================== */


/* ========================== §1 榜单网格 .rank ==========================
   来自 top.html 的「热门排行」—— Top 50，两栏网格。

   ⚠️ 为什么是"两栏网格"而不是首页那种瀑布流：
      榜单要的是"一眼看出高低"，网格的行列对齐比错落排布更好比较；
      而且这里每张卡片的信息量是固定的（排名 + 图 + 标题 + 三个数字），
      高度天然一致，本来就适合网格。

   ⚠️ 卡片（.rank-card）不写死在 HTML 里，由 js/top.js 渲染进来 ——
      50 张手写太长，而且接后端时要全部删掉重来。
      这里只负责"一张卡片长什么样"，不管有几张。 */
.rank{
	display: grid;
	/* ⚠️ minmax(0, 1fr) 而不是 1fr：
	     1fr 的最小值是 auto，卡片里的长标题会把格子顶宽、把网格挤爆；
	     写成 minmax(0, 1fr) 才是"老老实实平分，内容再长也别撑" */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

/* 一张卡片：横向三段 —— 排名 / 缩略图 / 信息 */
.rank-card{
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--r-md);
	background-color: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sh-1);
	/* ⚠️⚠️ 悬停反馈**只改颜色，不做位移**。
	   原因是踩过的坑：给卡片加 transform: translateY(-2px) 会让它整体上移，
	   底边从鼠标底下溜走 → 悬停失效 → 落回来 → 又悬停 …… 来回抖。
	   （首页瀑布流那次的实测数据：1.5 秒内状态翻转 473 次）
	   改边框和阴影就不会动到命中区域，安全。 */
	transition: border-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
}
.rank-card:hover{
	border-color: var(--blue-300);
	box-shadow: var(--sh-2);
}


/* ========================= §2 排名数字 .rank-no =========================
   ⚠️ 前三名**不用金银铜三色**。
      本项目的设计令牌（index.css §0）里只有"蓝 + 墨灰 + 一个语义红"，
      再引入金/银/铜三种新色相会把这套系统打散。
      这里改用**主色的三档深浅**表示高低：越靠前，蓝越深、越实。
      既守住了色彩约定，名次也一眼可辨。 */
.rank-no{
	flex-shrink: 0;
	width: 34px;
	text-align: center;
	font-family: var(--font-display);   /* Jost 的数字比中文黑体好看 */
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: 1;
	color: var(--ink-400);
	letter-spacing: 0.02em;
}

/* 第 1 名：最深、最实 */
.rank-no--1{
	font-size: var(--fs-2xl);
	font-weight: 600;
	color: #fff;
	background-color: var(--blue-600);
	border-radius: var(--r-sm);
	padding: var(--sp-2) 0;
}
/* 第 2 名：中间档 */
.rank-no--2{
	font-size: var(--fs-2xl);
	font-weight: 600;
	color: var(--ink-900);
	background-color: var(--blue-400);
	border-radius: var(--r-sm);
	padding: var(--sp-2) 0;
}
/* 第 3 名：最浅的一档实心 */
.rank-no--3{
	font-size: var(--fs-2xl);
	font-weight: 600;
	color: var(--ink-900);
	background-color: var(--blue-200);
	border-radius: var(--r-sm);
	padding: var(--sp-2) 0;
}


/* ========================= §3 缩略图 .rank-thumb =========================
   固定 4:3。⚠️ 用 aspect-ratio 而不是写死 height ——
      响应式下卡片变窄时高度会自己跟着变，图片不会被压扁。 */
.rank-thumb{
	flex-shrink: 0;
	display: block;
	width: 92px;
	aspect-ratio: 4 / 3;
	overflow: hidden;                   /* 靠它把 <img> 的直角裁掉，圆角才不会被顶破 */
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	background-color: var(--blue-50);   /* 图没加载出来时垫一层浅色，不闪白 */
	/* 缩略图阴影：⚠️ 加在 .rank-thumb 而不是 <img> 上 ——
	   <img> 是 overflow:hidden 裁的，阴影得画在"框"这一层才不会被裁掉。
	   ⚠️ 刻意不加 transition、也不在 hover 换档：榜单有 50 条，
	      阴影每帧重绘的开销比它带来的观感强太多了。抬升感交给下面 img 的 scale。 */
	box-shadow: var(--sh-1);
}
.rank-thumb img{
	width: 100%;
	height: 100%;
	display: block;                     /* ⚠️ <img> 默认 inline，底下会多出几像素基线空隙 */
	object-fit: cover;                  /* 裁掉多余部分填满框，不拉伸变形 */
	transition: transform var(--dur) var(--ease-q);
}
/* 悬停：图片轻微放大。
   ⚠️ scale 加在 <img> 上而不是卡片上 ——
   动的是图片自己，卡片的命中区域纹丝不动，不会引发抖动。
   ⚠️ 也不再给 .rank-thumb 加 hover 阴影档位（换了就是一次重绘，50 条不划算） */
.rank-card:hover .rank-thumb img{
	transform: scale(1.06);
}

/* 图片加载失败时的兜底（js/top.js 会给挂掉的 <img> 加这个类）。
   ⚠️ 与其留一个碎图图标，不如直接退成一块安静的浅蓝底色 ——
      榜单里混着几个碎图非常难看，而"某一行图没出来"用户其实不太会注意 */
.rank-thumb img.is-dead{
	opacity: 0;
}


/* ========================= §4 信息区 .rank-info ========================= */
.rank-info{
	flex: 1;                            /* 吃掉剩余宽度 */
	min-width: 0;                       /* ⚠️ 不能省：配合下面的省略号，长标题才能真的截断 */
}

/* 标题 + 热度徽章一行 */
.rank-head{
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
}

.rank-title{
	margin: 0;
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ink-900);
	/* 单行省略：超出部分变 …，而不是把卡片撑宽或换成两行把高度搞乱 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* 热度徽章：右上角那个小数字，说明"这一条凭什么上榜" */
.rank-heat{
	flex-shrink: 0;
	margin-left: auto;                  /* 推到行末 */
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 9px;
	/* ⚠️ 热度值是一枚数值贴片，和全站其它标签一样收成胶囊（原 --r-xs 6px） */
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
	color: var(--blue-700);
	background-color: var(--blue-100);
	border: 1px solid var(--blue-200);
}

/* 作者名 */
.rank-author{
	margin: 3px 0 0;
	font-size: var(--fs-xs);
	color: var(--ink-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 三个互动数字：点赞 / 收藏 / 浏览 */
.rank-stats{
	margin: 7px 0 0;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}
.rank-stat{
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.rank-stat svg{
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--ink-400);
}
.rank-stat b{
	font-family: var(--font-display);   /* 数字用展示字体，等宽感更好看 */
	font-weight: 500;
	color: var(--ink-700);
}


/* ========================== §5 空状态 / 加载 ========================== */
/* 渲染完成前（或 JS 没跑起来）显示的那行提示 */
.rank-loading{
	margin: 0;
	padding: var(--sp-6) 0;
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--ink-400);
	/* 铺满两栏，别只占左边一格 */
	grid-column: 1 / -1;
}


/* ============================ §6 响应式 ============================
   ⚠️ 断点直接沿用 index.css §9 的那三档（1280 / 1024 / 760），**别自己发明新数值**——
      否则侧栏缩窄的时机和榜单换栏的时机对不上，
      会出现"侧栏已经收窄了、榜单还硬挤两栏"这种中间态。
      去 index.css 搜 `§9 响应式` 能看到完整的那三档。 */
@media (max-width: 1024px){
	/* 中等宽度：侧栏占掉一部分，两栏里每张卡片会挤得标题只剩几个字 → 收成一栏 */
	.rank{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px){
	.rank{
		gap: var(--sp-2);
		margin-top: var(--sp-4);
	}
	.rank-card{
		gap: var(--sp-2);
		padding: var(--sp-2);
	}
	/* 手机上缩略图缩一档，把省下的宽度让给标题 */
	.rank-thumb{
		width: 76px;
	}
	.rank-no{
		width: 28px;
		font-size: var(--fs-lg);
	}
	.rank-no--1,
	.rank-no--2,
	.rank-no--3{
		font-size: var(--fs-xl);
	}
	/* 手机上三个数字挤不下就换行，别撑破卡片 */
	.rank-stats{
		flex-wrap: wrap;
		gap: var(--sp-2);
	}
}