/**
 * 全站前台轻量补充层：main.min.css 语义变量 → Design Tokens（--yg-*）；以及「页面模块画布」#wrap 壳层（与预览 iframe 共用 DOM）。
 * 编辑器 iframe 专用叠加层见 yueling-visual-landing.css（仅 yg_visual_editor_preview_overlay_css_needed() 时加载）。
 *
 * @see yueling-design-tokens.css
 * @see yueling-visual-landing.css
 */

/* ========== Legacy `--color-*` → Design Tokens ========== */

:root {
	/* ----- main.min.css 语义变量 → --yg-* ----- */
	--color-bg: var(--yg-color-bg-page);
	--color-surface: var(--yg-color-surface);
	--color-primary: var(--yg-color-primary);
	/* 暖点缀：蜜桃珊瑚（转化/热门）；强警示保留语义危险色 */
	--color-accent-warm: var(--yg-color-secondary);
	--color-accent-strong: var(--yg-color-danger);

	--color-neutral-900: var(--yg-color-text-primary);
	--color-neutral-700: var(--yg-color-text-secondary);
	--color-neutral-500: var(--yg-color-text-muted);
	--color-neutral-300: var(--yg-color-border);

	--color-border-subtle: var(--yg-color-border-soft);
	--color-border: var(--yg-color-border);

	--color-text-main: var(--yg-color-text-primary);
	--color-text-muted: var(--yg-color-text-muted);
	--color-text-inverse: #ffffff;

	/* blog / sidebar 等 fallback */
	--color-bg-muted: var(--yg-color-bg-soft);

	/* 与 Token 卡片阴影气质接近（原 rgba(15,35,95) 偏冷蓝） */
	--shadow-soft: 0 0.5rem 1.5rem rgba(var(--yg-color-primary-rgb), 0.09);
	--shadow-soft-hover: 0 0.75rem 2rem rgba(var(--yg-color-primary-rgb), 0.15);

	/* Bootstrap 5：默认 btn-primary / link 跟品牌薄荷对齐 */
	--bs-primary: var(--yg-color-primary);
	--bs-primary-rgb: var(--yg-color-primary-rgb);
	--bs-link-color: var(--yg-color-primary);
	--bs-link-hover-color: var(--yg-color-primary-hover);

	/* 与 Bootstrap / 对标主题中 `width: var(--theme-container-width)` 写法兼容，单列宽与 --yg-container-max 一致 */
	--theme-container-width: var(--yg-container-max);

	/* 组件图片槽默认占位：浅黄底 + 白色图片图标。 */
	--yg-image-placeholder-bg: #fffccc;
	--yg-image-placeholder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='14' width='44' height='36' rx='5'/%3E%3Ccircle cx='24' cy='27' r='5'/%3E%3Cpath d='M14 46l14-14 9 9 7-7 6 12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ========== 模块化落地页：html ↔ body ↔ #wrap ========== */
/*
 * JS 在 wp_body_open 给 html 加 .yg-page-modules-layout-root（与 body.yg-page-modules-layout 同步）。
 * html 纵向 flex + border-box：与 WP 后台工具栏留白在同一盒模型内对齐，
 * body flex:1 填满 html 的内容区，避免单靠 height:100% 链或 :has() 在部分环境下失效。
 * :has(...) 仅作无 JS 时的降级。
 */
html.yg-page-modules-layout-root,
html:has(body.yg-page-modules-layout),
html:has(body.visual-editor) {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	height: auto;
}

body.yg-page-modules-layout {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	/* main.min 全局 body padding-top（固定导航占位）与本壳层 #wrap padding-top 重复；模块化页只由 #wrap 统一留白 */
	padding-top: 0;
}

/* --yg-adminbar-h：见 enqueue wp_footer 脚本；main.min body.admin-bar 兜底 */

body.yg-page-modules-layout > header.site-header {
	flex-shrink: 0;
}

/* 兼容壳层：导航可在 body 下（landing-header）或在 #wrap 内（其它落地骨架） */
body.yg-page-modules-layout > #wrap > header.site-header {
	flex-shrink: 0;
}

body.yg-page-modules-layout > #wrap {
	flex: 1 1 0%;
	width: 100%;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

body.yg-page-modules-layout > #wrap > main.site-main,
body.yg-page-modules-layout > #wrap > main#main {
	flex: 1 1 0%;
	min-height: 0;
	min-width: 0;
}

body.yg-page-modules-layout > #wrap ~ * {
	flex-shrink: 0;
}

/* ========== 页面模块画布（#wrap，前台与预览文档结构一致） ========== */

#wrap.page-modules-shell {
	--yg-modules-stack-pad-block: var(--yg-space-card-gap, 1.5rem);
	box-sizing: border-box;
	width: 100%;
	align-items: stretch;
	/* 原内层 .container 的上下内边距并入画布；模块为直子 section，通栏不再受 Bootstrap .container max-width 限制 */
	padding-inline: 0;
	background: var(--yg-color-bg-soft);
	color: var(--yg-color-text-primary);
	position: relative;
}

#wrap.page-modules-shell .yg-module-has-icon-color :where(.bi, .feature-tabs__icon, .service-card__icon, .why-card__icon, .material-icons) {
	color: var(--yg-module-icon-color) !important;
}

#wrap.page-modules-shell .yg-module-has-text-color,
#wrap.page-modules-shell .yg-module-has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, a, span, small, strong, em, .section-title, .section-subtitle, .section-eyebrow, .text-muted) {
	color: var(--yg-module-text-color) !important;
}

/*
 * 前台发布页：fixed-top 导航脱离文档流，main#wrap 须以导航实测高度顶距（--yg-navbar-h 由 enqueue 脚本写入）。
 * 预览 iframe（body.visual-editor）顶距见 yueling-visual-landing.css，此处排除以免双计。
 */
body.yg-page-modules-layout:not(.visual-editor) > #wrap.page-modules-shell {
	margin-top: var(--yg-navbar-h, 72px);
}

/*
 * 存在通栏轮播且为首屏内容：不重复叠一层「导航占位」顶距（由 landing-canvas 打 page-modules-shell--hero-lead）。
 */
#wrap.page-modules-shell.page-modules-shell--hero-lead {
	margin-top: 0;
	padding-top: 0;
}

#wrap.page-modules-shell.is-density-compact {
	--yg-modules-stack-pad-block: clamp(0.75rem, 2vw, 1rem);
}

#wrap.page-modules-shell.is-density-relaxed,
#wrap.page-modules-shell.is-density-airy {
	--yg-modules-stack-pad-block: clamp(1.25rem, 3vw, var(--yg-space-module-inner));
}

#wrap.page-modules-shell.yg-landing-body-modules--empty {
	--yg-modules-stack-pad-block: 0px;
}

#wrap.page-modules-shell section[data-yg-module-id] {
	position: relative;
	min-width: 0;
}

/*
 * 组件库 section 默认背景归零：背景由页面画布或内容元素承载。
 * 仅作用于页面模块直子 section，避免误伤卡片、弹层、手风琴项等内部结构。
 */
#wrap.page-modules-shell > section[data-yg-module-id],
#wrap.page-modules-shell > section[class*="section-"] {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
}

/* 通用图片槽占位：空槽位显示浅黄底与白色图片 icon，真实图片出现后自动消失。 */
#wrap.page-modules-shell .feature-tabs__image:empty,
#wrap.page-modules-shell .feature-tabs-card__image:empty,
#wrap.page-modules-shell .feature-block__image:empty,
#wrap.page-modules-shell .scenario-card__image:empty,
#wrap.page-modules-shell .news-card__image:empty,
#wrap.page-modules-shell .image-list-thumb:empty,
#wrap.page-modules-shell .step-tabs__card-image:empty,
#wrap.page-modules-shell .section-simple__image:empty,
#wrap.page-modules-shell > section[data-yg-module-type="yg_section_big_image"]:empty {
	background-color: var(--yg-image-placeholder-bg) !important;
	background-image: var(--yg-image-placeholder-icon) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: clamp(3rem, 18%, 5.5rem) auto !important;
}

/* 目标尺寸槽位：只在无真实图时补齐视觉比例。 */
#wrap.page-modules-shell .feature-block__image:empty,
#wrap.page-modules-shell .feature-tabs__image:empty,
#wrap.page-modules-shell .feature-tabs-card__image:empty,
#wrap.page-modules-shell .scenario-card__image:empty {
	aspect-ratio: 16 / 10;
	min-height: 12rem;
}

#wrap.page-modules-shell .step-tabs__card-image:empty {
	height: 12rem;
	min-height: 12rem;
}

#wrap.page-modules-shell .section-simple__image:empty,
#wrap.page-modules-shell > section[data-yg-module-type="yg_section_big_image"]:empty {
	aspect-ratio: 16 / 9;
	min-height: 12rem;
}

@supports selector(:has(*)) {
	/* 历史默认图/Pexels 演示图视为「未上传图片」，显示同一占位。 */
	#wrap.page-modules-shell .feature-tabs__image:has(> img[src*="images.pexels.com"]),
	#wrap.page-modules-shell .feature-tabs-card__image:has(> img[src*="images.pexels.com"]),
	#wrap.page-modules-shell .feature-block__image:has(> img[src*="images.pexels.com"]),
	#wrap.page-modules-shell .scenario-card__image:has(> img[src*="images.pexels.com"]),
	#wrap.page-modules-shell .step-tabs__card-image:has(> img[src*="images.pexels.com"]),
	#wrap.page-modules-shell .section-simple__image:has(> img[src*="images.pexels.com"]) {
		background-color: var(--yg-image-placeholder-bg) !important;
		background-image: var(--yg-image-placeholder-icon) !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		background-size: clamp(3rem, 18%, 5.5rem) auto !important;
	}

	#wrap.page-modules-shell .feature-tabs__image > img[src*="images.pexels.com"],
	#wrap.page-modules-shell .feature-tabs-card__image > img[src*="images.pexels.com"],
	#wrap.page-modules-shell .feature-block__image > img[src*="images.pexels.com"],
	#wrap.page-modules-shell .scenario-card__image > img[src*="images.pexels.com"],
	#wrap.page-modules-shell .step-tabs__card-image > img[src*="images.pexels.com"],
	#wrap.page-modules-shell .section-simple__image > img[src*="images.pexels.com"] {
		display: none !important;
	}
}

/* 通栏轮播：无用户上传背景时显示同款占位；用户上传背景通过 inline style 输出后不受影响。 */
#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]),
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]),
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) {
	background-color: var(--yg-image-placeholder-bg);
	background-image: var(--yg-image-placeholder-icon);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: clamp(4rem, 8vw, 7rem) auto;
}

#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .heading-1,
#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .heading-2,
#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .heading-3,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .heading-1,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .heading-2,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .heading-3,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .heading-1,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .heading-2,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .heading-3 {
	color: var(--yg-color-text-primary) !important;
}

#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .text-body,
#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .text-caption,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .text-body,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .text-caption,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .text-body,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .text-caption {
	color: var(--yg-color-text-secondary) !important;
}

#wrap.page-modules-shell .swiper-hero__slide--blue:not([style*="background"]) .btn-outline-brand,
#wrap.page-modules-shell .swiper-hero__slide--orange:not([style*="background"]) .btn-outline-brand,
#wrap.page-modules-shell .swiper-hero__slide--red:not([style*="background"]) .btn-outline-brand {
	border-color: var(--yg-color-border-soft);
	color: var(--yg-color-text-primary);
}

/* 数据展示组件：清掉内部容器写死的默认背景图与深色遮罩。 */
#wrap.page-modules-shell .data-show {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
}

#wrap.page-modules-shell .data-show::before {
	background: transparent !important;
}

#wrap.page-modules-shell .data-show__num {
	color: var(--yg-color-text-primary) !important;
}

#wrap.page-modules-shell .data-show__text {
	color: var(--yg-color-text-secondary) !important;
}

#wrap.page-modules-shell.is-density-compact {
	padding-bottom: calc(var(--yg-space-section-compact) + var(--yg-modules-stack-pad-block));
}

#wrap.page-modules-shell.is-density-relaxed {
	padding-bottom: calc(var(--yg-space-section-relaxed) + var(--yg-modules-stack-pad-block));
}

#wrap.page-modules-shell.is-density-airy {
	padding-bottom: calc(var(--yg-space-section-airy) + var(--yg-modules-stack-pad-block));
}

/*
 * 无 body 模块：landing-canvas 打 yg-landing-body-modules--empty；:has 兜底无 section 时的占位收拢。
 */
body.yg-page-modules-layout > #wrap.page-modules-shell.yg-landing-body-modules--empty {
	flex: 1 1 auto;
	min-height: calc(
		100vh - var(--yg-navbar-h, 72px) - var(--yg-footer-h, 0px) - var(--yg-adminbar-h, 0px)
	);
	min-height: calc(
		100dvh - var(--yg-navbar-h, 72px) - var(--yg-footer-h, 0px) - var(--yg-adminbar-h, 0px)
	);
	min-width: 0;
}

@supports selector(:has(*)) {
	body.yg-page-modules-layout > #wrap.page-modules-shell:not(:has(> section[data-yg-module-id])) {
		flex: 1 1 auto;
		min-height: calc(
			100vh - var(--yg-navbar-h, 72px) - var(--yg-footer-h, 0px) - var(--yg-adminbar-h, 0px)
		);
		min-height: calc(
			100dvh - var(--yg-navbar-h, 72px) - var(--yg-footer-h, 0px) - var(--yg-adminbar-h, 0px)
		);
		min-width: 0;
	}
}

/* 大图展示 yg_section_big_image：关闭进场动画时保持终态，且不绑定滚动 reveal（见 main.js bindFlushReveal） */
.section-simple--flush.section-simple--flush--static .section-simple__image {
	opacity: 1;
	transform: scale(1);
	transition: none;
}

/* 大图展示：视频占位与图片同宽，`src` 由视口触发后注入（main.js bindBigImageLazyVideos） */
.section-simple__image--video video.yg-big-image-video {
	width: 100%;
	height: auto;
	display: block;
}

.ve-downloads-section,
.ve-commerce-floor,
.ve-commerce-row,
.ve-service-compare-section {
	padding: clamp(32px, 5vw, 64px) 0;
}

.ve-downloads-section__head,
.ve-commerce-floor__head,
.ve-commerce-row__head,
.ve-service-compare-section > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.ve-downloads-section h2,
.ve-commerce-floor h2,
.ve-commerce-row h2,
.ve-service-compare-section h2 {
	margin: 0 0 8px;
	color: var(--yg-color-text-primary, #17211f);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 900;
}

.ve-downloads-section p,
.ve-commerce-floor p,
.ve-commerce-row p,
.ve-service-compare-section p {
	margin: 0;
	color: var(--yg-color-text-secondary, #65726f);
	line-height: 1.75;
}

.ve-downloads-section__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.ve-download-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--yg-color-border, #e4ece8);
	border-radius: 10px;
	background: #fff;
	color: var(--yg-color-text-primary, #17211f);
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.ve-download-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #f0fbf8;
	color: var(--yg-color-primary, #18c7d4);
	font-size: 20px;
}

.ve-download-card__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.ve-download-card strong,
.ve-commerce-product h3 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ve-download-card small {
	color: var(--yg-color-text-muted, #7a8793);
}

.ve-downloads-section__empty {
	grid-column: 1 / -1;
	border: 1px dashed rgba(31, 47, 61, .18);
	border-radius: 10px;
	background: #f6f8fa;
	padding: 18px 20px;
	color: var(--yg-color-text-secondary, #65726f);
}

.ve-commerce-floor {
	border: 1px solid var(--yg-color-border, #e4ece8);
	border-radius: 14px;
	background: #fff;
	padding: clamp(22px, 3vw, 32px);
}

.ve-commerce-floor__body {
	display: grid;
	grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
	border: 1px solid var(--yg-color-border, #e4ece8);
	border-radius: 12px;
	overflow: hidden;
}

.ve-commerce-banner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 360px;
	padding: 30px;
	background: linear-gradient(140deg, #10201d 0%, #0b766f 100%);
	color: #fff;
}

.ve-commerce-banner h3 {
	margin: 0 0 10px;
	color: inherit;
	font-size: 28px;
	font-weight: 900;
}

.ve-commerce-banner a {
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.ve-commerce-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ve-commerce-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 1fr);
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.ve-commerce-product {
	position: relative;
	min-width: 0;
	padding: 18px;
	border-right: 1px solid var(--yg-color-border, #e4ece8);
	border-bottom: 1px solid var(--yg-color-border, #e4ece8);
	background: #fff;
}

.ve-commerce-product__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	border-radius: 999px;
	background: #7ac943;
	color: #fff;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 900;
}

.ve-commerce-product__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 14px;
	border-radius: 8px;
	background-color: #eee;
	background-image: var(--yg-image-placeholder-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: clamp(3rem, 18%, 5.5rem) auto;
	overflow: hidden;
}

.ve-commerce-product__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ve-commerce-product h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 900;
}

.ve-commerce-product h3 a {
	color: inherit;
	text-decoration: none;
}

.ve-commerce-price {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #e5484d;
	font-size: 18px;
	font-weight: 950;
}

.ve-service-compare-wrap {
	overflow-x: auto;
	border: 1px solid var(--yg-color-border, #e4ece8);
	border-radius: 12px;
	background: #fff;
}

.ve-service-compare {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
}

.ve-service-compare th,
.ve-service-compare td {
	border-right: 1px solid var(--yg-color-border, #e4ece8);
	border-bottom: 1px solid var(--yg-color-border, #e4ece8);
	padding: 16px;
	text-align: left;
	vertical-align: top;
}

.ve-service-compare th {
	background: #f4fbf9;
	color: var(--yg-color-text-primary, #17211f);
	font-weight: 900;
}

@media (max-width: 991.98px) {
	.ve-downloads-section__grid,
	.ve-commerce-floor__body {
		grid-template-columns: 1fr;
	}
	.ve-commerce-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ve-commerce-banner {
		min-height: 220px;
	}
}

@media (max-width: 575.98px) {
	.ve-commerce-grid {
		grid-template-columns: 1fr;
	}
}