/* ════════════════════════════════════════════════════════════
   H-Scroll Story — 前端样式
   语义化结构：div.hss__stage > section.hss > div.hss__track > article.hss__panel
   section.hss 使用 position:sticky 贴顶 + JS 实时 rect 映射驱动 track 平移
   （替代 ScrollTrigger pin：无 pin-spacer、无 fixed 切换、无滚动锚定干扰，
   天然免疫字体/图片异步加载造成的触发点漂移与"贴顶跳跃"）。
   性能：仅 transform/opacity 动画，零 CLS
   ════════════════════════════════════════════════════════════ */
/* 滚动舞台：高度由 JS 设置为「视口高度 + 横向推进距离」，提供纵向滚动空间。 */
.hss__stage {
	position: relative;
}

.hss {
	position: sticky;
	top: 0;
	/* 高度由 render 内联输出（height:{vh}vh），sticky 需要确定高度才能正确贴顶。 */
	overflow: hidden;
	/* 内容横向滚动时禁止纵向溢出干扰 */
	contain: paint;
}

/* ── 内容显示区域圆角：强制跟随 Elementor 后台的「圆角」设定 ─────────
   Elementor 把控件级圆角（高级 → 边框 → 圆角）输出在 .elementor-widget-container
   上，但那一层不裁剪；而本插件可视区 .hss 的圆角默认为 0、只用 overflow:hidden 做
   方角裁剪 —— 面板宽度常为 100vw（超出控件宽度），于是内容的直角会盖住外层圆角
   box（box 布局下表现为「内容显示区域不跟随圆角」）。
   inherit 逐层向下传递：容器（后台设定值）→ .hss__stage → .hss，
   再由 .hss 的 overflow:hidden 裁成圆角；未设置圆角时继承值即 0，不影响其他页面。 */
.elementor-widget-hss-h-scroll-story .hss__stage,
.elementor-widget-hss-h-scroll-story .hss {
	border-radius: inherit;
}

.hss__track {
	display: flex;
	width: max-content;
	gap: 24px;
	padding-right: 24px;
	will-change: transform;
}

.hss__panel {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}

/* 兜底默认尺寸（Elementor 未设置时） */
.hss__panel[data-hss-index] {
	width: 100vw;
	min-height: 100vh;
}

.hss__content {
	max-width: 56ch;
	line-height: 1.7;
}

/* 嵌套模板内容占满整个 Story 面板。
   面板是 flex column + align-items:center → flex 子项默认宽度收缩到内容宽，
   导致模板（尤其仅含文字/局部宽度的模板）只显示内容宽度。 */
.hss__panel > .elementor,
.hss__panel > [data-elementor-type] {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	flex: none;
}
.hss__panel .elementor-container {
	width: 100%;
	max-width: 100%;
}

.hss__content > *:first-child {
	margin-top: 0;
}
.hss__content > *:last-child {
	margin-bottom: 0;
}

/* 进度条 */
.hss__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
	pointer-events: none;
	z-index: 2;
}
.hss__progress span {
	display: block;
	height: 100%;
	background: #22d3ee;
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

/* 空状态提示 */
.hss__empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: #8b93a7;
	border: 1px dashed #d4d9e2;
	border-radius: 8px;
}

/* ── 移动端降级：纵向堆叠 ── */
@media (max-width: 768px) {
	.hss--mobile-stack .hss__stage {
		height: auto !important;
	}
	.hss--mobile-stack .hss {
		position: static !important;
	}
	.hss--mobile-stack .hss__track {
		flex-direction: column;
		width: auto !important;
		gap: 2rem;
		padding-right: 0;
	}
	.hss--mobile-stack .hss__panel {
		width: 100% !important;
		min-height: auto !important;
	}
	.hss--mobile-stack .hss__progress {
		display: none;
	}
}

/* ── 无障碍：关闭动画时内容完整可见 ── */
@media (prefers-reduced-motion: reduce) {
	.hss__stage {
		height: auto !important;
	}
	.hss {
		position: static !important;
	}
	.hss__track {
		flex-direction: column;
		width: auto !important;
	}
	.hss__panel {
		width: 100% !important;
		min-height: auto !important;
	}
	.hss__progress {
		display: none;
	}
}

/* ── 结构化文字（标题 + 内容） ── */
.hss__story-text { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; padding: 1rem; }
.hss__story-heading { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.hss__story-desc { margin: 0; line-height: 1.6; max-width: 34em; }

/* 背景图应落在各 Story 面板内（render 内联输出）；
   Elementor 4.x 会把 repeater 的 Group_Control_Background 误输出到 widget 容器，
   导致背景固定不横移、且随容器高度上下重复——此处禁用容器级背景。 */
.elementor-widget-hss-h-scroll-story .elementor-widget-container,
.elementor-widget-hss-h-scroll-story.elementor-element {
	background-image: none !important;
}