/**
 * Qing 文章翻页（上一篇 / 下一篇）小部件样式。
 *
 * 结构：
 *  .qing-pnav（横向 flex 容器，左右两端）
 *    > .qing-pnav__side.qing-pnav__side--prev（左侧，Previous + 标题）
 *    > .qing-pnav__side.qing-pnav__side--next（右侧，标题 + Next）
 *      内含 .qing-pnav__label（前缀，粗体黑字）+ .qing-pnav__title（标题，灰字、超出截断）
 *
 * 间距（gap）、标题最大宽度、颜色等由小部件控件通过内联 selectors 注入，
 * 这里只定义基础布局与截断行为。
 */

.qing-pnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	box-sizing: border-box;
}

/* 左右两侧块：各占一半（等宽），中间只留固定 gap 间距 */
.qing-pnav__side {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0; /* 左右等分容器宽度 */
	min-width: 0; /* 允许内部标题正常截断 */
	text-decoration: none;
}

.qing-pnav__side--prev {
	/* 上一篇整体靠左 */
	justify-content: flex-start;
	text-align: left;
}

.qing-pnav__side--next {
	/* 下一篇整体靠右，前缀文字在标题之后 */
	justify-content: flex-end;
	text-align: right;
}

/* 只有一侧存在时（无上一篇或无下一篇），该侧不再撑满右侧留出空白，
   改为靠各自的自然边缘、按内容宽度显示，避免出现莫名的左侧大间距。 */
.qing-pnav__side:only-child {
	flex: 0 1 auto;
}

.qing-pnav__side--next:only-child {
	justify-content: flex-start;
	text-align: left;
}

/* 无相邻文章时的占位块：占位但不可见，维持两端对齐 */
.qing-pnav__side--empty {
	visibility: hidden;
}

/* 前缀文字：Previous / Next，粗体、深色 */
.qing-pnav__label {
	flex: none;
	color: #111111;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* 文章标题：灰色，单行截断隐藏（省略号） */
.qing-pnav__title {
	display: block;
	max-width: 320px;
	color: #9ca3af;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* 链接悬停：标题变色由控件注入；这里保证前缀不产生下划线 */
.qing-pnav__link {
	cursor: pointer;
}

.qing-pnav__link:hover .qing-pnav__title {
	color: #111111;
}

/* 编辑器空状态提示 */
.qing-pnav--empty {
	margin: 0;
	color: #9ca3af;
	font-size: 14px;
}

/* -------- 移动端适配 -------- */
@media (max-width: 767px) {
	.qing-pnav {
		gap: 20px;
	}

	.qing-pnav__title {
		max-width: 140px;
	}
}