/**
 * 产品页「营销长页」模板的样式（page-templates/product-marketing.php 专用）
 *
 * 只在这个模板下加载（见 inc/assets.php 的 huisong_print_template_styles()），
 * 所以不会影响其它任何页面 —— 现有 UI 一个像素都不会动。
 *
 * 写这块样式时遵守的主题约定（新模板请照抄，别自创一套）：
 *   · 尺寸一律用 rem：1rem = 5.2083vw，1920 设计稿下 100px（见 index.css 的 html{font-size}）；
 *   · 颜色取 :root 变量：--fm #0376ff（品牌蓝）、--main rgba(0,18,240,1)（主按钮蓝）；
 *   · 曲线统一 var(--ease) = cubic-bezier(.76,0,.24,1)；
 *   · 卡片圆角 .15rem（15px，对齐 /cases/ 的 .list_block）、按钮圆角 2rem（对齐 .layer-btn）；
 *   · 字号/字重沿用工具类：.f-70 / .f-24 / .f-16 + .wordLight / .wordMid / .word；
 *   · 动效只用现成机制：.alanGo（IntersectionObserver 加 .go）+ .alanUpOnly（上移淡入）、
 *     标题 .layer-title > h2[data-text] 走逐字入场；
 *   · 响应式只用主题现成的媒体查询写法：@media screen and (orientation: portrait)。
 */

/* ------------------------------------------------------------------
 * 分区节奏：与主题一致的大留白（1920 下 90px），首尾区块不给
 * ------------------------------------------------------------------ */

.pmSection > .inner {
	padding: 0.9rem 0;
}

.pmSection--pains > .inner {
	background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
}

.pmSection > .inner > .pub_case {
	padding-top: 0;
}

/* 区块标题与内容之间统一留白（.group 自带 .48rem，这里对齐） */
.pmSection .pmTags {
	margin-top: 0.4rem;
}

/* ------------------------------------------------------------------
 * ② 痛点：1 高 + 4 小的 bento 网格
 * ------------------------------------------------------------------ */

.pmSection .pmPains {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.2rem;
	margin-top: 0.48rem;
}

/* 第一张卡占两行，其余 4 张在右侧两列各占一行 —— 与参考版式一致 */
.pmSection .pmPains > :nth-child(1) {
	grid-row: span 2;
}

.pmSection .pmCard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.36rem 0.3rem;
	border: 1px solid rgba(0, 18, 240, 0.08);
	border-radius: 0.15rem;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 18, 240, 0.05);
	transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.pmSection .pmCard:hover {
	border-color: rgba(3, 118, 255, 0.24);
	box-shadow: 0 16px 40px rgba(0, 18, 240, 0.1);
	transform: translate3d(0, -4px, 0);
}

.pmCard__no,
.pmStep__no {
	display: block;
	margin-bottom: 0.12rem;
	color: var(--fm);
	font-size: 0.16rem;
	font-family: MiSans-Medium;
	line-height: 1;
	letter-spacing: 0.02em;
	opacity: 0.55;
}

/* 第一张（高的那张）用蓝色底，做视觉锚点 */
.pmSection .pmPains > :nth-child(1) {
	background: var(--main);
	border-color: transparent;
}

.pmSection .pmPains > :nth-child(1) h4,
.pmSection .pmPains > :nth-child(1) p {
	color: #fff;
}

.pmSection .pmPains > :nth-child(1) .pmCard__no {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

/* ------------------------------------------------------------------
 * ③ 方案：2×2 卡片（左视觉 + 右文案 + 立即体验）
 * ------------------------------------------------------------------ */

.pmSection .pmSolutions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.2rem;
	margin-top: 0.48rem;
}

.pmSection .pmSolution {
	display: flex;
	align-items: stretch;
	padding: 0.3rem;
	border: 1px solid rgba(0, 18, 240, 0.08);
	border-radius: 0.15rem;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 18, 240, 0.05);
	transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.pmSection .pmSolution:hover {
	border-color: rgba(3, 118, 255, 0.24);
	box-shadow: 0 16px 40px rgba(0, 18, 240, 0.1);
	transform: translate3d(0, -4px, 0);
}

/* 没填图片时用主题自己的蓝渐变 + 序号，填了图片就铺满（background-size:cover） */
.pmSolution__visual {
	position: relative;
	flex: 0 0 2.6rem;
	align-self: center;
	height: 1.7rem;
	margin-right: 0.28rem;
	border-radius: 0.12rem;
	overflow: hidden;
	background-image: linear-gradient(135deg, rgba(3, 118, 255, 0.16) 0%, rgba(0, 18, 240, 0.06) 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pmSolution__visual.has-img {
	background-image: none;
}

/* 没配图时的「产品界面」小样子：一个圆角窗口 + 三条数据条 */
.pmSolution__mock {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 1.9rem;
	height: 1.16rem;
	padding: 0 0.16rem;
	border-radius: 0.08rem;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 18, 240, 0.1);
	transform: translate(-50%, -50%);
}

.pmSolution__mock i {
	display: block;
	height: 0.05rem;
	margin: 0.055rem 0;
	border-radius: 2rem;
	background: rgba(3, 118, 255, 0.22);
}

.pmSolution__mock i:nth-child(1) {
	width: 72%;
}

.pmSolution__mock i:nth-child(2) {
	width: 100%;
	background: rgba(3, 118, 255, 0.34);
}

.pmSolution__mock i:nth-child(3) {
	width: 52%;
}

/* 有图就把 mock 收起来 */
.pmSolution__visual.has-img .pmSolution__mock {
	display: none;
}

.pmSolution__no {
	position: absolute;
	right: 0.14rem;
	bottom: 0.08rem;
	color: rgba(3, 118, 255, 0.5);
	font-family: MiSans-Medium;
	font-size: 0.6rem;
	line-height: 1;
}

/* 卡片等高时，按钮统一贴底，避免同一行里两个按钮一高一低 */
.pmSolution__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.pmSolution__body > .fxc {
	margin-top: auto;
	padding-top: 0.2rem;
}

/* ------------------------------------------------------------------
 * ④ 能力标签 + 5 步流程
 * ------------------------------------------------------------------ */

.pmSection .pmTags {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmSection .pmTag {
	margin: 0 0.12rem 0.12rem 0;
	padding: 0.1rem 0.22rem;
	border-radius: 2rem;
	background: rgba(3, 118, 255, 0.08);
	color: var(--fm);
	font-size: 0.16rem;
	font-family: MiSans-Medium;
	line-height: 1.2;
}

.pmSection .pmSteps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.3rem;
	margin-top: 0.4rem;
}

.pmSection .pmStep {
	position: relative;
	padding-top: 0.24rem;
	border-top: 1px solid rgba(0, 18, 240, 0.12);
}

/* 步骤之间的箭头：用边框画一个 45° 的尖，和主题其它地方的箭头语言一致（细线、蓝色） */
.pmSection .pmStep::after {
	position: absolute;
	top: 0.42rem;
	right: -0.2rem;
	width: 0.1rem;
	height: 0.1rem;
	border-top: 1px solid rgba(3, 118, 255, 0.5);
	border-right: 1px solid rgba(3, 118, 255, 0.5);
	content: '';
	transform: rotate(45deg);
}

.pmSection .pmSteps > :last-child::after {
	display: none;
}

/* ------------------------------------------------------------------
 * ⑤ 结尾 CTA：主题自带的深蓝（--blue）底 + 白字，收束整页
 *    （按钮颜色不另外改：主按钮用 .layer-btn.blue 白字、次按钮用默认半透明白底黑字，
 *      两者在这种深底上都读得出来；曾经把底改浅、又强行把按钮涂白，结果白底白字看不见）
 * ------------------------------------------------------------------ */

.pmSection--cta > .inner {
	padding: 1.1rem 0;
	background: var(--blue);
}

.pmSection--cta .layer-title h2,
.pmSection--cta .pub_case > p {
	color: #fff;
}

.pmSection--cta .layer-title h3 {
	color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------
 * ① 首屏背景图：模糊 + 压暗
 *
 * 背景图是后台随便传的，**不保证是深色图**，而首屏文字是白的 ——
 * 所以统一做两层处理，任何亮度的图都读得出来：
 *   1) 图片本身模糊（弱化细节，白字更抓得住）；
 *   2) 盖一层深色渐变（左侧文字区更暗，右侧留给设备图）。
 * 另外给 .bg 垫一层深色底：模糊会让图片边缘向外淡出，
 * 垫色之后淡出的是深色，不会露出页面白底。
 *
 * 注意别给 .pic 加 transform: scale() ——
 * 主题自己有一条 `.pub_banner .banner .bg .pic{transform: scale(1.1) → scale(1)}`
 * 的开场动画（1.8s var(--picEase)），加 scale 会跟它打架；filter 不影响 transform。
 * ------------------------------------------------------------------ */

.pmHeroBanner .bg {
	background-color: #070d1c;
}

.pmHeroBanner .bg .pic {
	filter: blur(0.05rem); /* 1920 下 5px：只做轻微柔化，别糊成一片 */
}

/*
 * 压暗只用"文字背后那一块"，而不是整幅压黑 —— 整幅压黑会显得又暗又小气。
 * 两层：
 *   ① 顶部一条竖向渐变：给压在图上的导航留一点底，往下很快消失；
 *   ② 以左栏文字为中心的一块径向渐变：.pmHero__text 在 100% 位置上，
 *      所以圆心放在 x≈38%、y≈47%，越往右越透明，右侧设备图区域基本保持原图亮度。
 */
.pmHeroBanner .bg::after {
	position: absolute;
	z-index: 2; /* .bg 是 z-index:1、.inner 是 z-index:5 —— 这层只压图片，压不到文字 */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(180deg, rgba(7, 13, 28, 0.42) 0%, rgba(7, 13, 28, 0) 17%),
		radial-gradient(
			118% 96% at 30% 50%,
			rgba(7, 13, 28, 0.72) 0%,
			rgba(7, 13, 28, 0.5) 34%,
			rgba(7, 13, 28, 0.18) 66%,
			rgba(7, 13, 28, 0) 92%
		);
	content: '';
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * ① 首屏：左栏文字 + 右栏「显示器外壳 + 系统截图」
 *
 * `.center` 本身是 space-between 的一行（标题 | 分隔线 | 简介），三样已占满宽度；
 * 这里把它当成两栏容器：第 1 栏 `.pmHero__text`（把标题/分隔线/简介竖排收进来），
 * 第 2 栏 `.pmHero__shot`（设备图）。文字部分仍然吃主题原有的后代选择器样式。
 * ------------------------------------------------------------------ */

.pmHero {
	justify-content: space-between;
	align-items: center;
}

.pmHero__text {
	flex: 1 1 auto;
	max-width: 8.4rem; /* 840px @1920 */
}

/*
 * 简介原本是 `.center` 的直接子项，主题给它定的是
 *   width 46.875vw + min-width 46.875vw（1920 下正好 900px）。
 * 收进左栏后要放开这个死宽度 —— min-width 也要一起覆盖，
 * 否则 max-width 被 min-width 压过去，简介会撑破左栏（实测 900px 挤在 840px 的栏里）。
 *
 * 注意：注释里不要再写 CSS 注释符号，CSS 注释不能嵌套，
 * 里层的结束符号会提前把整段注释关掉，后面那条规则会被当成非法内容整条丢掉（踩过）。
 */
.pub_banner .banner .inner .center .pmHero__text > p {
	width: auto;
	min-width: 0;
	max-width: 7rem;
}

/*
 * 分隔线在主题里是 `.center` 的 flex 子项（会被自动块化，height/transform 才生效）；
 * 套了一层容器后会退回 inline，1px 高和 scaleX 入场都不起作用 —— 这里补 display:block。
 */
.pub_banner .banner .inner .center .pmHero__text > .line {
	display: block;
	width: 2.4rem;
	margin: 0.34rem 0 0.36rem;
}

.pmHero__shot {
	flex: 0 0 auto;
	width: 7.4rem; /* 740px @1920 */
}

/* ---------------- 显示器外壳（纯 CSS，不用图片资源）---------------- */

.pmShot {
	position: relative;
}

/* 机身：上左右窄、下方宽（M 系列显示器的下巴），顶部中间一颗摄像头点 */
.pmShot__screen {
	position: relative;
	padding: 0.22rem 0.2rem 0.4rem;
	border-radius: 0.18rem;
	background: linear-gradient(180deg, #363c45 0%, #1c2127 58%, #12151a 100%);
	box-shadow: 0 0.36rem 0.8rem rgba(0, 18, 240, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.pmShot__screen::before {
	position: absolute;
	top: 0.08rem;
	left: 50%;
	width: 0.06rem;
	height: 0.06rem;
	border-radius: 50%;
	background: #0b0e11;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	content: '';
	transform: translateX(-50%);
}

/* 屏幕高光：一道很淡的斜向反光 + 边缘内阴影，别盖住内容 */
.pmShot__screen::after {
	position: absolute;
	top: 0.22rem;
	right: 0.2rem;
	bottom: 0.4rem;
	left: 0.2rem;
	border-radius: 0.1rem;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 26%, rgba(255, 255, 255, 0) 46%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
	content: '';
	pointer-events: none;
}

.pmShot__screen > img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 0.08rem;
	background: #fff;
	object-fit: cover;
	object-position: top center;
}

/* 占位界面：顶栏 + 侧栏 + 4 张数据卡（纯 CSS，风格与方案卡小界面一致） */
.pmShot__mock {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	grid-template-rows: 0.36rem 1fr;
	aspect-ratio: 16 / 10;
	border-radius: 0.08rem;
	overflow: hidden;
	background: #fff;
}

.pmShot__bar {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 0.07rem;
	padding: 0 0.14rem;
	background: #f4f7ff;
}

.pmShot__bar i {
	width: 0.07rem;
	height: 0.07rem;
	border-radius: 50%;
	background: rgba(3, 118, 255, 0.35);
}

.pmShot__side {
	background: #f8faff;
	border-right: 1px solid rgba(0, 18, 240, 0.06);
}

.pmShot__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.14rem;
	padding: 0.18rem;
}

.pmShot__cards i {
	display: block;
	border: 1px solid rgba(0, 18, 240, 0.06);
	border-radius: 0.07rem;
	background: linear-gradient(180deg, rgba(3, 118, 255, 0.1) 0%, rgba(0, 18, 240, 0.04) 100%);
}

/* 支架与底座（底座别太薄，否则看着"站不住"） */
.pmShot__stand {
	display: block;
	width: 1.25rem;
	height: 0.56rem;
	margin: 0 auto;
	background: linear-gradient(180deg, #2c3238 0%, #171b20 100%);
	clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}

.pmShot__base {
	display: block;
	width: 2.9rem;
	height: 0.14rem;
	margin: 0 auto;
	border-radius: 2rem;
	background: linear-gradient(180deg, #454c56 0%, #262b32 45%, #1a1e24 100%);
	box-shadow: 0 0.18rem 0.34rem rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ------------------------------------------------------------------
 * 首屏动作条（放在底部 .btm 里，与其它内页一致）
 * ------------------------------------------------------------------ */

.pmHeroCta {
	display: flex;
	flex: 0 0 auto; /* 别被 .btm 的 space-between 挤窄 */
	align-items: center;
}

.pmHeroCta .layer-btn {
	flex: 0 0 auto;
}

.pmHeroCta .layer-btn .txt {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * 移动端：主题用 (orientation: portrait) 判定，这里沿用
 * ------------------------------------------------------------------ */

@media screen and (orientation: portrait) {

	/* 首屏竖屏：文字在上、显示器整宽在下；主题给 .inner 定死了 140vw 高，
	   加了设备图会装不下，所以这里放开高度、让它按内容撑开 */
	.pub_banner .banner.pmHeroBanner .inner {
		height: auto;
		padding-top: 26vw;
		padding-bottom: 8vw;
	}

	.pmHero {
		flex-direction: column;
		align-items: flex-start;
		gap: 9vw;
	}

	.pmHero__text {
		max-width: 100%;
	}

	.pub_banner .banner .inner .center .pmHero__text > p {
		max-width: 100%;
	}

	.pub_banner .banner .inner .center .pmHero__text > .line {
		width: 40vw;
		margin: 4vw 0 4.5vw;
	}

	.pmHero__shot {
		width: 100%;
	}

	.pmShot__screen {
		padding: 2.6vw 2.6vw 5vw;
		border-radius: 3.2vw;
	}

	.pmShot__screen::after {
		top: 2.6vw;
		right: 2.6vw;
		bottom: 5vw;
		left: 2.6vw;
		border-radius: 2vw;
	}

	.pmShot__screen > img,
	.pmShot__mock {
		border-radius: 1.6vw;
	}

	.pmShot__mock {
		grid-template-columns: 22vw 1fr;
		grid-template-rows: 7vw 1fr;
	}

	.pmShot__bar {
		gap: 1.4vw;
		padding: 0 2.6vw;
	}

	.pmShot__bar i {
		width: 1.4vw;
		height: 1.4vw;
	}

	.pmShot__cards {
		gap: 2.6vw;
		padding: 3.4vw;
	}

	.pmShot__cards i {
		border-radius: 1.4vw;
	}

	.pmShot__stand {
		width: 20vw;
		height: 8vw;
	}

	.pmShot__base {
		width: 46vw;
		height: 2vw;
	}

	.pmSection > .inner {
		padding: 12vw 0;
	}

	.pmSection .pmCard,
	.pmSection .pmSolution {
		padding: 5vw;
		border-radius: 3vw;
	}

	.pmSection .pmPains,
	.pmSection .pmSolutions,
	.pmSection .pmSteps {
		grid-template-columns: 100%;
		gap: 3vw;
		margin-top: 6vw;
	}

	.pmSection .pmPains > :nth-child(1) {
		grid-row: auto;
	}

	.pmSection .pmCard h4,
	.pmSection .pmSolution h4,
	.pmSection .pmStep h4 {
		font-size: 5vw;
	}

	.pmSection .pmCard p,
	.pmSection .pmSolution p,
	.pmSection .pmStep p {
		font-size: 3.6vw;
	}

	.pmCard__no,
	.pmStep__no {
		margin-bottom: 2vw;
		font-size: 3.4vw;
	}

	.pmSection .pmTag {
		margin: 0 2vw 2vw 0;
		padding: 1.6vw 4vw;
		font-size: 3.4vw;
	}

	/* 竖屏没有横向空间，箭头去掉，靠左边一条竖线表示先后 */
	.pmSection .pmStep::after {
		display: none;
	}

	.pmSection .pmStep {
		padding-top: 0;
		padding-left: 5vw;
		border-top: 0;
		border-left: 2px solid rgba(0, 18, 240, 0.12);
	}

	.pmSolution__visual {
		flex: 0 0 32vw;
		height: 22vw;
		margin-right: 4vw;
		border-radius: 2.4vw;
	}

	.pmSolution__no {
		right: 3vw;
		bottom: 1.4vw;
		font-size: 10vw;
	}

	.pmSolution__mock {
		width: 24vw;
		height: 15vw;
		padding: 0 2.4vw;
		border-radius: 1.4vw;
	}

	.pmSolution__mock i {
		height: 0.9vw;
		margin: 0.8vw 0;
	}

	.pmHeroCta {
		flex-wrap: wrap;
	}

	.pmHeroCta .layer-btn {
		margin-bottom: 2vw;
	}

	.pmSection--cta > .inner {
		padding: 14vw 0;
	}
}