/**
 * 前台正文样式 —— 只在「导入自公众号」的单篇文章页加载。
 *
 * 为什么需要它：
 *   导入时保留了微信的内联排版（字号、行距、色块、居中），这些是好看的部分，
 *   不该动；跟不上的只有「固定像素」这一类——微信图片按设计稿宽度（常 1080px）
 *   写死，卡片段落也带 px 宽度，窄屏必撑破容器。
 *   另外主题往往把正文里所有媒体统一设成 max-width:100%; height:auto，
 *   img 合适，iframe 却会因此塌成浏览器默认的 150px 高，视频几乎看不见。
 *
 * 作用域：全部规则限定在 .wxai-content 内部（正文容器由 class-wxai-frontend.php 包裹），
 * 因此不会影响侧边栏、相关阅读、评论等任何其它模块。
 * 颜色一律用 currentColor + 透明度，跟随在役主题的明/暗配色，不写死色值。
 */

/* 容器本身：不撑破、长词可断 */
.wxai-content {
	max-width: 100%;
	overflow-wrap: break-word;
}
/* 主题按「正文最后一个元素去掉下边距」收尾；多了一层容器后这条要接得上，
   否则导入文章末尾会多出约一个段距的空白。 */
.wxai-content > :last-child {
	margin-bottom: 0;
}
.wxai-content section,
.wxai-content div,
.wxai-content span,
.wxai-content figure,
.wxai-content p {
	max-width: 100%;
	box-sizing: border-box;
}

/* 图片：必须带 !important —— 微信写死的 px 宽高在内联 style 里，
   内联样式优先级高于任何外部样式表，主题只靠普通选择器压不住。 */
.wxai-content img {
	max-width: 100% !important;
	height: auto !important;
}
.wxai-content svg {
	max-width: 100%;
	height: auto;
}
.wxai-content video {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* iframe 默认只保证不溢出，不猜它的高度 */
.wxai-content iframe {
	max-width: 100%;
	border: 0;
}

/* 视频播放器：按 16:9 跟随正文宽度自适应，PC 与手机同一比例。
   只点名视频域名，音乐/播客那种矮卡片不受影响。 */
.wxai-content iframe[src*="v.qq.com"],
.wxai-content iframe[src*="player.bilibili.com"],
.wxai-content iframe[src*="www.bilibili.com"],
.wxai-content iframe[src*="player.youku.com"],
.wxai-content iframe[src*="open.163.com"],
.wxai-content iframe[src*="youtube.com"],
.wxai-content iframe[src*="youtube-nocookie.com"],
.wxai-content iframe[src*="player.vimeo.com"] {
	width: 100%;
	height: 400px; /* 兜底：老浏览器不支持 aspect-ratio 时用固定高 */
}
@media (max-width: 768px) {
	.wxai-content iframe[src*="v.qq.com"],
	.wxai-content iframe[src*="player.bilibili.com"],
	.wxai-content iframe[src*="www.bilibili.com"],
	.wxai-content iframe[src*="player.youku.com"],
	.wxai-content iframe[src*="open.163.com"],
	.wxai-content iframe[src*="youtube.com"],
	.wxai-content iframe[src*="youtube-nocookie.com"],
	.wxai-content iframe[src*="player.vimeo.com"] {
		height: 220px;
	}
	.wxai-content .wxai-credit-hr {
		margin: 26px 0 14px;
	}
}
/* 支持的浏览器一律回到 16:9：这段必须放在上面固定高度之后，否则窄屏会被压成 220px 的扁框。 */
@supports (aspect-ratio: 16 / 9) {
	.wxai-content iframe[src*="v.qq.com"],
	.wxai-content iframe[src*="player.bilibili.com"],
	.wxai-content iframe[src*="www.bilibili.com"],
	.wxai-content iframe[src*="player.youku.com"],
	.wxai-content iframe[src*="open.163.com"],
	.wxai-content iframe[src*="youtube.com"],
	.wxai-content iframe[src*="youtube-nocookie.com"],
	.wxai-content iframe[src*="player.vimeo.com"] {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* 超宽表格：先保证它不超出正文宽度（窄屏下的横向滚动由主题负责） */
.wxai-content table {
	max-width: 100%;
}

/* 文末出处署名 */
.wxai-content .wxai-credit-hr {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.18;
	margin: 34px 0 16px;
}
.wxai-content .wxai-credit {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.72;
	line-height: 1.7;
}
.wxai-content .wxai-credit a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}