/* ========================== §7 作品区 .show ========================== */
#show{
	/* ⚠️ 这里绝对不能写 flex: 1 —— 它等于 flex-basis: 0%，
	   会把 waterFlow.js 里设的 height 整个压掉，卡片一多就溢出、侧栏也粘不住 */
	min-height: 240px;
	border-radius: var(--r-lg);
	position: relative;                       /* 卡片是 absolute，得有个定位祖先 */
	border: 1px dashed var(--line-blue);      /* 空状态：一圈虚线 */
	background-color: rgba(255, 255, 255, 0.55);
}

/* 一塞进卡片，空状态的虚线和底色就自动消失（:has 会跟着 DOM 实时变）*/
#show:has(.item-show){
	border-color: transparent;                /* 故意留 1px，避免有无卡片时容器宽度跳一下 */
	background-color: transparent;
}

/* 一条作品都没有时显示的提示。
   ⚠️ 那圈虚线和浅底是 #show 自带的 —— 只要里面没有 .item-show 就会露出来，
      所以这里只负责把字摆好看，不用再画框
   （由 js/gallery.js 在筛完是空的时候塞进来） */
.wf-empty{
	margin: 0;
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--ink-400);
}


/* ---------- 7.1 卡片本体 ---------- */
.item-show{
	position: absolute;                       /* top / left / width 全部由 waterFlow.js 给，别在这儿写 */
	cursor: pointer;
	/* ⚠️ 卡片现在是 <a>（点进详情页），而 <a> 自带蓝色 + 下划线。
	   不覆盖的话，卡片里那两行标题会变成蓝色带下划线的链接样式。
	   color: inherit 让它继承外面写的颜色，text-decoration: none 去掉下划线。 */
	color: inherit;
	text-decoration: none;
	/* 入场：错峰弹跳。-index 由 waterFlow.js 写成 --wf-i（0,1,2…），这里换算成延迟。
	   ⚠️ backwards 不能省：少了它，延迟期间元素是"正常态"（不透明），
	      会先整张闪出来、再跳回透明重新淡入，看着像闪屏。
	   ⚠️ min() 给延迟封顶：30 张卡若按 26ms 一路排下去，最后一张要等 0.8s 才出现，太拖。 */
	animation: card-in var(--dur-slow) var(--ease-q) backwards;
	animation-delay: min(calc(var(--wf-i, 0) * 26ms), 300ms);
}

/* ⚠️ 不加这两行，双击（或按下拖动）图片时**整张图会被刷成蓝色**。
   那层蓝不是咱们的 CSS 画的，是浏览器原生的「选中高亮」：
   选中区域会用系统高亮色（Windows 默认蓝）填充，而图片里没有文字，
   被选中的就是图片元素本身，那个 range 的矩形正好等于整张图 → 于是整张图变蓝。
   （实测：真窗口里 Range.selectNode(img) 量出来的矩形是 261×479，与图片完全一致）
   ⚠️ 它只拦得住用户的鼠标动作，**拦不住 JS 用 Range 造出来的选中** ——
      所以验收时别拿"能不能选中"当标准，要看截图颜色。
   ⚠️ 覆盖子元素所以要写 .item-show * （user-select 不会自动传给后代） */
.item-show,
.item-show *{
	user-select: none;
	-webkit-user-select: none;
}

/* ⚠️ 上浮的位移千万别加在 .item-show 自己身上！
   hover 让它自己抬 4px，它的底边就从鼠标底下溜走 →
   悬停取消 → 卡片落回 → 又悬停 → ……每秒来回几十次，卡片抖成筛子
   （实测 1.5 秒内状态翻转 473 次）。
   所以位移一律加在子元素上，.item-show 的命中区域保持不动。 */
.item-show:hover .img-show,
.item-show:hover .tag-show{
	transform: translateY(-4px);
}

/* 入场：淡入 + 轻微上浮 */
@keyframes card-in{
	from{ opacity: 0; transform: translateY(14px); }
	to  { opacity: 1; transform: translateY(0); }
}


/* ---------- 7.2 图片框：圆角 + 图片阴影 + 悬停上浮 ---------- */
.img-show{
	display: block;                           /* ⚠️ <picture> 默认 inline，不转块吃不住圆角和 overflow */
	overflow: hidden;                         /* 靠它把 <img> 的直角裁掉，圆角才不会被顶破 */
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	min-height: 120px;                        /* 图片挂了也不会塌成一条线，瀑布流还能看 */
	background-color: var(--blue-50);         /* 图片没加载出来时垫一层浅色，不闪白 */

	/* ⚠️ 图片阴影。原来是「用线不用阴影」，现在照片要"浮"起来才有分量：
	   发丝线留着定边界，阴影负责层次 —— 两者不冲突。
	   overflow:hidden 裁不掉它（box-shadow 画在 border box 外面），放心。
	   ★ 第一层 0 1px 2px 是「接触影」：只画在紧贴边缘的 1~2px 上。
	     光靠下面那层 12px 偏移的柔影，白底图和白页面之间还是看不出边界。 */
	box-shadow: 0 1px 2px rgba(43, 58, 69, 0.08),
		var(--sh-2);

	/* ⚠️ 过渡里**只留 transform**。transform 由合成器处理，不触发重绘；
	   而 box-shadow 每改一次都要把阴影整个重画（还是两层），悬停时最费 ——
	   30 张卡片全挂着它，一个 hover 就可能拖累整帧。
	   所以：阴影是静态的（层次全靠它），动感全靠 --ease-q 的位移。 */
	transition: transform var(--dur) var(--ease-q);
	
}

/* ⚠️ 这里刻意**不**在 hover 时换阴影档位（原来是 --sh-2 → --sh-3）。
   换档 = 重绘，收益只是"稍微厚一点"，不划算。抬升感交给上面的 translateY。 */
.item-show:hover .img-show{
	border-color: var(--blue-300);
}

.item-show img{
	width: 100%;
	height: auto;
	display: block;                           /* ⚠️ <img> 默认 inline，底下会多出几像素基线空隙 */
}

/* 图挂了：把碎图图标透明掉，露出上面那层浅蓝垫底色。
   （跟热门排行 css/top.css 里的 .is-dead 一个套路，类名由 js/gallery.js 打上） */
.img-show img.is-dead{
	opacity: 0;
}


/* ---------- 7.3 浮在图片左下角的标签 ----------
   ⚠️ 这一版专门重做过。原来是「15px 高 / 8px 字 / 6px 圆角」——
      8px 在 Windows 上（尤其 100% 缩放的普通屏，还没上 HiDPI）
      已经糊成一团认不出字了，等于白挂一排小方块。
      现在改成：20px 高 / 10px 字 / 全胶囊，白底再垫一层落影。 */
.tag-show{
	position: absolute;
	left: 12px;                               /* 和卡片 .img-show 的 1px 描边留出呼吸，别贴死 */
	bottom: 12px;
	display: none;                            /* 默认藏起来，下面有字才放出来 */
	flex-wrap: wrap;
	gap: 5px;
	pointer-events: none;                     /* 别把卡片本身的点击抢走 */
	transition: transform var(--dur) var(--ease-q);
}

/* span 里有字才显示整块标签；空的时候连占位都没有 */
.tag-show:has(.tagOnShow:not(:empty)){
	display: flex;
}

.tagOnShow{
	display: inline-flex;
	align-items: center;
	/* 20 → 22：12px 的字在 20px 里上下只剩 4px，压在花哨的图上会糊成一团 */
	height: 22px;
	padding: 0 10px;
	/* ⚠️ 用 --r-full（胶囊）而不是 --r-xs：同样是"圆"，6px 落在 20px 高的块上
	   读起来是「带圆角的小方块」，999px 才读得出「标签」——
	   一排标签全是方正小方块，整页会显得硬、像表格。 */
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1;
	/* ⚠️ 字距从 0.04em 收到 0.02em：10px 本来就小，
	   再拉开字距字与字之间就散架了，反而更难一眼读完 */
	letter-spacing: 0.02em;
	color: var(--ink-900);
	/* 底色从 0.9 提到 0.94 —— 标签是"压在图上的"，先要读得清，再谈透不透 */
	background-color: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(43, 58, 69, 0.10);
	/* ⚠️ 这条落影是**静态**的（不参与任何 transition）：
	   浅色照片上白标签会糊进背景，靠它兜住边界。
	   静态阴影只在首次绘制时算一次，之后跟着 transform 走合成器，不产生逐帧重绘 ——
	   所以它和"悬停时只动 transform"的性能原则不冲突，别因为看到阴影就删掉。 */
	box-shadow: 0 1px 3px rgba(43, 58, 69, 0.20);
}