/* ==========================================================================
   夜色服饰 B2B 独立站 · S1.4 图片占位容器体系
   --------------------------------------------------------------------------
   规则：占位框 = 中性浅灰底 + 细边 + 居中不可点击提示文案。
   宽高比稳定（aspect-ratio 为主 + padding-top 兜底），图片位不塌陷，CLS ≈ 0。
   容器宽度自适应父级，任何宽度（含 320px）都不溢出。
   无渐变、无高饱和色、无装饰图形。所有色值走 var(--nc-*)。
   依赖令牌（来自 assets/css/tokens.css）：
     --nc-ph-bg --nc-line --nc-radius --nc-text-3 --nc-fs-13
     --nc-lh-body --nc-sp-2
   ========================================================================== */

.nc-ph {
	display: block;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	aspect-ratio: var(--nc-ph-ratio, 16 / 9);
	background-color: var(--nc-ph-bg);
	border: 1px solid var(--nc-line);
	border-radius: var(--nc-radius);
	overflow: hidden;
}

/* 唯一允许的填充：居中、不可点击、次级灰的英文提示文案 */
.nc-ph__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nc-sp-2);
	text-align: center;
	color: var(--nc-text-3);
	font-size: var(--nc-fs-13);
	line-height: var(--nc-lh-body);
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	word-break: break-word;
	pointer-events: none;
	user-select: none;
}

/* 仅在显式传入 attachment_id 时才会出现，用于真实图片的填充方式 */
.nc-ph__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 低调变体：真实图片改为 contain 填充（不裁切） */
.nc-ph--contain .nc-ph__img {
	object-fit: contain;
}

/* 兜底：不支持 aspect-ratio 的旧内核用 padding-top 百分比维持比例。
   --nc-ph-h / --nc-ph-w 为规格表输出的无单位数值，除法得到比例后 *100%。 */
@supports not (aspect-ratio: 1 / 1) {
	.nc-ph {
		height: 0;
	}

	.nc-ph::after {
		content: "";
		display: block;
		padding-top: calc(var(--nc-ph-h) / var(--nc-ph-w) * 100%);
	}
}