/*
 * Zibll 专题角标 - 前台样式
 * 角标贴于文章缩略图/卡片角落，兼容手机端与电脑端。
 * 位置、颜色、字号、圆角、偏移由服务端内联样式控制；
 * 此处负责定位基础、形状、阴影、动效与响应式微调。
 */

/* 统一定位基础 */
.ztopics-badge {
	position: absolute;
	z-index: 20;
	display: inline-block;
	line-height: 1.3;
	letter-spacing: 0.5px;
	pointer-events: none;
	user-select: none;
}

/* 文字角标 */
.ztopics-badge.ztb-text {
	max-width: 86%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	padding: 4px 12px;
}

.ztopics-badge.ztb-bold {
	font-weight: 800;
}

/* 阴影 */
.ztopics-badge.ztb-shadow {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}

/* 图片角标 */
.ztopics-badge.ztb-img {
	height: auto;
	object-fit: contain;
	display: block;
}

/* 形状：胶囊 / 丝带（flat 由内联圆角控制） */
.ztopics-badge.ztb-text.ztb-pill {
	border-radius: 999px !important;
}

.ztopics-badge.ztb-text.ztb-ribbon {
	border-radius: 0 !important;
	clip-path: polygon(
		0 0,
		100% 0,
		calc(100% - 0.5em) 50%,
		100% 100%,
		0 100%
	);
}

/* 无缩略图（文字模式）文章：让直接子级角标的定位父级生效 */
.posts-item:has(> .ztopics-badge) {
	position: relative;
}

/* 轻微悬浮反馈 */
.posts-item:hover .ztopics-badge {
	filter: brightness(1.08);
	transition: filter 0.2s;
}

/* 手机端微调：缩小文字字号与图片宽度，避免遮挡标题 */
@media (max-width: 768px) {
	.ztopics-badge.ztb-text {
		font-size: 12px !important;
		padding: 3px 8px !important;
		letter-spacing: 0.2px;
	}
	.ztopics-badge.ztb-img {
		width: 72px !important;
	}
}

/* 超小屏进一步压缩 */
@media (max-width: 480px) {
	.ztopics-badge.ztb-text {
		border-radius: 3px !important;
		padding: 2px 7px !important;
	}
	.ztopics-badge.ztb-img {
		width: 60px !important;
	}
}