/* ==========================================================================
   Meme Theme 页面模块样式
   设计变量与基础层在 global.css，这里只写瀑布流、卡片、折叠描述等模块。
   1. 页面标题与空状态
   2. 瀑布流
   3. 卡片
   4. 折叠描述
   ========================================================================== */

/* 1. 页面标题与空状态 */
.page-title {
	margin: 8px 0 6px;
	font-size: 24px;
	line-height: 1.3;
}

.page-desc {
	margin: 0 0 var(--meme-gap);
	color: var(--meme-muted);
	font-size: 14px;
}

.no-content {
	color: var(--meme-muted);
}

/* 增量：超长不可断词（长英文串、URL、没有空格的描述）不允许撑破版心 */
.page-title,
.page-desc {
	overflow-wrap: break-word;
}


/* 2. 瀑布流
   --------------------------------------------------------------------------
   最终形态：JS 把卡片分装进 N 个 .meme-col 列容器，每列是独立的纵向 flex，
   卡片在列内依次堆叠，列与列之间只在「该列上一张卡片底部」的位置继续往下排，
   上下间距恒定（桌面 20px / 手机 14px），不会出现 Grid 那种行对齐留出的大坑。

   为什么不用 CSS 多列（column-count）：多列的列高由浏览器动态均衡，
   任意一张卡片展开都会让所有卡片重新分列，被点的那张会跳到别的列，
   手机上表现为整页剧烈抖动。
   为什么不用 Grid：Grid 是一行一行排的，同一行按最高那张定行高，
   矮的那张下方必然留白 —— 这就是之前截图里的大缝隙。

   下面第一段是 JS 未执行时的降级：桌面多列、手机两列网格。
   -------------------------------------------------------------------------- */
.meme-grid {
	column-count: 5;
	column-gap: var(--meme-gap);
}

/*
 * 每个卡片必须是块级 + border-box。
 * 用 inline-block 且不重置 box-sizing 时，卡片宽度 = 100% + 内边距，
 * 会溢出到相邻列，看起来就是几列叠在一起。
 */
.meme-grid > * {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.meme-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		align-items: start;
	}

	.meme-grid > .meme-card-wrap {
		margin-bottom: 0;
	}
}

/* 分列后的真实瀑布流：JS 加上 .meme-grid--balanced */
.meme-grid.meme-grid--balanced {
	display: flex;
	align-items: flex-start;
	gap: var(--meme-gap);
	column-count: auto;
}

.meme-grid--balanced > .meme-col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--meme-gap);
	min-width: 0;
}

/* 列内改用 gap 控制间距，卡片自带的下外边距必须清零，否则间距翻倍 */
.meme-grid--balanced > .meme-col > .meme-card-wrap {
	margin-bottom: 0;
	break-inside: auto;
	-webkit-column-break-inside: auto;
}

@media (max-width: 768px) {
	.meme-grid.meme-grid--balanced {
		gap: 14px;
	}

	.meme-grid--balanced > .meme-col {
		gap: 14px;
	}
}

/* 3. 卡片 */
.meme-card-wrap {
	margin: 0 0 var(--meme-gap);
	padding: 0;
	background: var(--meme-surface);
	border-radius: var(--meme-border-radius);
	overflow: hidden;
	box-shadow: var(--meme-shadow);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* 图片铺满卡片左右与顶部，圆角由外层 overflow:hidden 裁出 */
.meme-card-wrap img.meme-card-thumb {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

.meme-card-body {
	padding: 12px 14px 14px;
}

/* 标签在标题上方，前置一枚标签图标让读者一眼认出这是 tag */
.meme-card-tags {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin: 0 0 6px;
	color: var(--meme-muted);
	font-size: 12px;
	line-height: 1.5;
}

.meme-card-tag-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 2px;
	color: inherit;
}

.meme-card-tag-list {
	min-width: 0;
}

.meme-card-tags a {
	display: inline-block;
	padding: 1px 4px;
	/* 负外边距抵掉内边距，悬停底色出现时文字不位移 */
	margin: -1px -4px;
	border-radius: var(--meme-border-radius);
	color: var(--meme-link);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.meme-card-tags a:hover {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
	text-decoration: none;
}

/*
 * 增量：卡片里的标签同时带 .meme-tag（定义在 global.css）。
 * 上面那条 1px 4px 的内边距会把胶囊挤得太紧，这里单独补足左右留白；
 * 负外边距同步加大，文字位置不变，多标签之间的间距也不受影响。
 */
.meme-card-tags a.meme-tag {
	padding: 1px 7px;
	margin: -1px -7px;
}

/*
 * 增量：卡片里的标签去掉灰色胶囊，回归「纯文字 + 悬停/点按下划线」。
 * 只覆盖卡片内的链接，不动 global.css 里 .meme-tag 的组件定义（别处仍可当胶囊用）。
 * 内边距和负外边距一起清零，文字落点与多标签间距与原来一致。
 */
.meme-card-tags a,
.meme-card-tags a.meme-tag {
	padding: 0;
	margin: 0;
	background: transparent;
	border-radius: 0;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.meme-card-tags a:hover,
.meme-card-tags a.meme-tag:hover,
.meme-card-tags a:active,
.meme-card-tags a.meme-tag:active,
.meme-card-tags a:focus-visible,
.meme-card-tags a.meme-tag:focus-visible {
	background: transparent;
	color: var(--meme-link-hover);
	text-decoration: underline;
}


/* 标题行：标题 + 右侧展开箭头 */
.meme-card-head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.meme-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.meme-card-caret {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--meme-muted);
}

/* 4. 折叠描述：标题本身即触发展开 */
.meme-desc {
	margin: 0;
}

.meme-desc summary {
	list-style: none;
	cursor: pointer;
}

.meme-desc summary::-webkit-details-marker {
	display: none;
}

.meme-desc summary::marker {
	content: "";
}

.meme-card-caret::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.meme-desc[open] .meme-card-caret::before {
	transform: rotate(-135deg);
}

.meme-desc summary:hover .meme-card-title {
	color: var(--meme-link-hover);
}

.desc-content {
	margin-top: 8px;
	color: var(--meme-muted);
	font-size: 13px;
	line-height: 1.7;
}

.desc-content p {
	margin: 0 0 0.6em;
}

.desc-content p:last-child {
	margin-bottom: 0;
}

.desc-content img {
	width: 100%;
	height: auto;
	border-radius: var(--meme-border-radius);
}

/* 5. 卡片触发按钮（图片外层）
   --------------------------------------------------------------------------
   灯箱的触发点放在「图片」上，而不是整张卡片：卡片里还有标签链接和可展开的
   描述，<button> 里嵌套交互元素是不合法的结构。
   按钮要完全隐形，视觉上仍是原来那张满铺的图。
   -------------------------------------------------------------------------- */
.meme-card-trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0; /* 去掉图片下方的行内基线空隙 */
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * 焦点环向内收：卡片是 overflow: hidden，向外扩的描边会被裁掉一半。
 * 这条只覆盖 outline-offset，颜色与宽度沿用 global.css 的 button:focus-visible。
 */
.meme-card-trigger:focus-visible {
	outline: 2px solid var(--meme-primary);
	outline-offset: -2px;
}

/* 6. 卡片图片悬停动画
   --------------------------------------------------------------------------
   指针进入图片时做一次很轻的推近（scale 1.045）。
   为什么是 transform 而不是 width/height：transform 走合成层，不参与布局，
   瀑布流的列高不会因此重算，鼠标扫过整屏卡片也不会抖。
   裁切交给 .meme-card-wrap 的 overflow: hidden（已在第 3 节写过），
   放大后多余的部分被卡片圆角吃掉，不会溢出到相邻卡片上。
   -------------------------------------------------------------------------- */
.meme-card-trigger img.meme-card-thumb {
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	transform-origin: center center;
}

.meme-card-trigger:hover img.meme-card-thumb,
.meme-card-trigger:focus-visible img.meme-card-thumb {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	.meme-card-trigger img.meme-card-thumb {
		transition: none;
	}

	.meme-card-trigger:hover img.meme-card-thumb,
	.meme-card-trigger:focus-visible img.meme-card-thumb {
		transform: none;
	}
}