/* ============================================
   UniVideo 前端样式
   设计原则:不写死任何主题颜色 ——
   文字用 currentColor / inherit 继承主题,
   背景用半透明灰阶,亮色暗色主题都自然融合。
   ============================================ */

.univideo {
	margin: 1.75em auto;
	max-width: var(--uv-max-w, 900px);
	width: 100%;
	font: inherit;
	color: inherit;
}

/* 播放器容器:统一比例控制 */
.univideo-frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--uv-ratio, 16 / 9);
	background: rgba(120, 120, 128, 0.08);
	overflow: hidden;
}

/* 老浏览器降级:padding 撑高 */
@supports not (aspect-ratio: 16 / 9) {
	.univideo-frame { height: 0; padding-top: 56.25%; }
}

.univideo-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
	background: #000;
}

.univideo-meta { margin: 0; padding: 0; }

.univideo-title {
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.45;
}

.univideo-desc {
	opacity: 0.65;
	font-size: 0.9em;
	line-height: 1.6;
	margin-top: 0.3em;
}

/* ---------- 风格一:default 默认 ----------
   干净圆角,无多余装饰 */
.univideo-style-default .univideo-frame {
	border-radius: 10px;
}
.univideo-style-default .univideo-meta {
	padding: 0.7em 0.15em 0;
}

/* ---------- 风格二:card 卡片 ----------
   半透明底 + 细边框 + 柔和阴影,像主题自带组件 */
.univideo-style-card {
	background: rgba(120, 120, 128, 0.07);
	border: 1px solid rgba(120, 120, 128, 0.18);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.25);
}
.univideo-style-card .univideo-frame {
	border-radius: 0;
}
.univideo-style-card .univideo-meta {
	padding: 0.9em 1.1em 1em;
}

/* ---------- 风格三:cinema 影院 ----------
   深色氛围底座,聚焦观影 */
.univideo-style-cinema {
	background: #14161a;
	color: #f2f3f5;
	border-radius: 12px;
	padding: clamp(10px, 2.5vw, 22px);
	box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.55);
}
.univideo-style-cinema .univideo-frame {
	border-radius: 8px;
	background: #000;
}
.univideo-style-cinema .univideo-meta {
	padding: 0.85em 0.2em 0.1em;
}
.univideo-style-cinema .univideo-desc { opacity: 0.55; }

/* ---------- 风格四:minimal 极简 ----------
   完全无框,与正文融为一体 */
.univideo-style-minimal .univideo-frame {
	border-radius: 0;
	background: transparent;
}
.univideo-style-minimal .univideo-meta {
	padding: 0.55em 0 0;
}
.univideo-style-minimal .univideo-title {
	font-weight: 500;
	font-size: 0.95em;
	opacity: 0.8;
}

/* 竖屏视频(9:16,抖音等)自动收窄,避免占满整行 */
.univideo[style*="9 / 16"] { max-width: min(420px, 100%); }

/* 错误提示 */
.univideo-error {
	margin: 1em 0;
	padding: 0.75em 1em;
	border-left: 3px solid #d63638;
	background: rgba(214, 54, 56, 0.08);
	border-radius: 4px;
	font-size: 0.9em;
}

/* 移动端 */
@media (max-width: 600px) {
	.univideo { margin: 1.25em auto; }
	.univideo-style-card .univideo-meta { padding: 0.75em 0.9em 0.85em; }
}