/* ============================================================
   AK Responsive — 全站移动端 / 平板端适配
   断点与 Elementor 一致：平板 ≤1024px，手机 ≤767px
   ============================================================ */

/* ---------- 全局兜底：横向溢出一律裁掉，杜绝出现左右滚动 ----------
   注意：只 clip html，不动 body（行程页 sticky 导航依赖 body overflow visible） */
html {
	overflow-x: clip;
}

/* ============================================================
   1. All Destinations(11) / All China Tours(1331)
      简介文本 widget：width:100% + margin-left:8% 导致任何视口都超宽
      → 限制最大宽度为 92%，保留桌面端的 8% 左缩进设计
   ============================================================ */
.elementor-element-fcd2812.elementor-element {
	max-width: 92% !important;
}

/* ============================================================
   2. 首页 Why Travel 四列区（HOME, post 7）
      容器 292180f / 9502a1a 自带 20px 左右 margin，与 100% 宽度叠加溢出；
      292180f 桌面端为绝对定位（压在背景图上），小屏会脱离文档流
      压住上方 TRAVEL RESPONSIBLY 区块 → ≤1024px 改回文档流；
      平板端 4 列每张仅 ~172px 过挤 → 改 2×2（容器是 e-flex，
      必须显式 display:grid，仅写 grid-template-columns 无效）。
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-element-292180f.elementor-element,
	.elementor-element-9502a1a.elementor-element {
		margin-left: 0;
		margin-right: 0;
	}

	.elementor-element-292180f.elementor-element {
		position: static !important;
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 32px 24px 0 !important;
	}

	/* 注意：292180f 是 e-con-boxed，四列实际包在 .e-con-inner 里，
	   grid 必须打在这一层（打在外层只有 1 个网格项，等于没生效） */
	.elementor-element-292180f .e-con-inner {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 28px !important;
		max-width: 100% !important;
	}

	.elementor-element-292180f .e-con-inner > .elementor-element {
		width: auto !important;
		max-width: 100% !important;
	}

	/* 区块自身 min-height:450px 是为桌面绝对定位布局设的，小屏自适应；
	   背景图 foot2.jpg 在小屏只画出一条细带（size 非 cover）→
	   强制 cover + 深色兜底底色，白字任何情况下可读 */
	.elementor-element-327aeed.elementor-element {
		min-height: 0 !important;
		height: auto !important;
		padding-top: 48px !important;
		padding-bottom: 56px !important;
		background-color: #17110c !important;
		background-size: cover !important;
		background-position: center center !important;
	}
}

@media (max-width: 767px) {
	.elementor-element-292180f .e-con-inner {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   3. Yangtze River Cruise（post 1350）
      图标盒图标（100px / 180px）在手机端撑破视口 → 缩小并允许换行
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-1438ec7 .elementor-icon,
	.elementor-element-dfaa074 .elementor-icon,
	.elementor-element-975cb5d .elementor-icon,
	.elementor-element-368ff2a .elementor-icon {
		font-size: 56px !important;
		width: 56px !important;
		height: 56px !important;
	}

	.elementor-element-1438ec7 .elementor-icon svg,
	.elementor-element-dfaa074 .elementor-icon svg,
	.elementor-element-975cb5d .elementor-icon svg,
	.elementor-element-368ff2a .elementor-icon svg {
		width: 100% !important;
		height: auto !important;
	}

	.elementor-element-75e5cc2 .elementor-icon-box-wrapper,
	.elementor-element-8f76e43 .elementor-icon-box-wrapper {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	/* 图标行：4 列 → 2×2，避免文字竖排断词 */
	.elementor-element-1438ec7.elementor-element,
	.elementor-element-dfaa074.elementor-element {
		flex-wrap: wrap;
		row-gap: 22px;
	}

	.elementor-element-1438ec7 > .elementor-element,
	.elementor-element-dfaa074 > .elementor-element {
		width: 50% !important;
	}

	/* hero 大标题手机端缩小字号，减少行数 */
	.elementor-element-fa5015b p {
		font-size: 32px !important;
		line-height: 1.15;
	}

	/* hero 副文案锚定到容器底部，避免随动画标题变高而重叠 */
	.elementor-element-a286c40.elementor-element {
		top: auto !important;
		bottom: 18px;
	}
}

/* ============================================================
   4. 通用小屏排版整理（所有页面）
   ============================================================ */
@media (max-width: 767px) {
	/* 长英文词 / URL 不再撑破容器 */
	.entry-content,
	.entry-content p,
	.entry-content li {
		overflow-wrap: break-word;
	}

	/* 嵌入的表格在窄屏内横向滚动，而不是撑破页面 */
	.entry-content table,
	.akj-el-gw table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Elementor 原生视频 / iframe 防溢出 */
	.entry-content iframe,
	.entry-content video {
		max-width: 100%;
	}
}

/* ============================================================
   5. 首页 Hero 区（HOME, post 7, mywut1s）
      标题 / 副标题 / 按钮三个子元素为绝对定位 + 桌面固定偏移，
      小屏容器塌陷（高度只剩 padding）→ 标题副标题重叠、
      按钮漂移到下一区块顶部。≤1024px 改回文档流纵向排列。
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-element-mywut1s.elementor-element {
		min-height: 0 !important;
		height: auto !important;
		flex-direction: column !important;
		align-items: flex-start;
		justify-content: center;
		row-gap: 12px;
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.elementor-element-mywut1s .elementor-element {
		position: static !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* 平板端背景视频可播放，但给深色兜底底色（与页头同色系），
	   视频加载失败或未自动播放时白字仍可读 */
	.elementor-element-mywut1s.elementor-element {
		background-color: #17110c !important;
	}
}

/* 手机端背景视频被 elementor-hidden-mobile 隐藏，而标题/副标题/按钮
   文字均为白色 → 深色背景兜底（继承上方 ≤1024 规则） */
@media (max-width: 767px) {
	.elementor-element-mywut1s .elementor-button.elementor-element,
	.elementor-element-872fb77 .elementor-button {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
	}
}

/* ============================================================
   6. 首页 What kind of trip 卡片横条（46b1def / fb71be6 / c63ea9d）
      手机端 flex-wrap 变 wrap → 卡片竖向堆叠但容器高度固定(~430px)，
      大量留白并压到下方区块；左右两列也被挤成各 ~175px。
      手机改上下堆叠 + 卡片保持横向滚动；卡片加宽保证标题可读。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-fb71be6.elementor-element {
		flex-direction: column !important;
	}

	.elementor-element-797464d.elementor-element,
	.elementor-element-4595981.elementor-element {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-c63ea9d.elementor-element {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.elementor-element-c63ea9d > a.elementor-element {
		flex: 0 0 230px !important;
		width: 230px !important;
		min-width: 230px !important;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-c63ea9d > a.elementor-element {
		flex: 0 0 210px !important;
		width: 210px !important;
		min-width: 210px !important;
	}
}

/* ============================================================
   7. 首页背景视频横幅（fad97b4）
      视频容器带 elementor-hidden-mobile，手机端只剩
      min-height:506px 的大片空白 → 手机端改自适应高度。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-fad97b4.elementor-element {
		min-height: 0 !important;
		height: auto !important;
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

/* ============================================================
   8. 首页 TRAVEL RESPONSIBLY 区（e5686ad）
      左列内三个子元素绝对定位，手机端列高塌陷 → 文字压到
      右侧媒体上。手机端整体改上下堆叠、子元素回归文档流。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-e5686ad.elementor-element {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.elementor-element-e5686ad > .elementor-element {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.elementor-element-e5686ad [data-id="0e1d92a"] .elementor-element {
		position: static !important;
	}

	.elementor-element-e5686ad [data-id="0e1d92a"] {
		padding: 40px 24px !important;
	}

	/* 旧版灰色占位图清理（现已无 img，保留兜底） */
	.elementor-element-e5686ad [data-id="27f1141"] img {
		display: none !important;
	}
}

/* ============================================================
   9. 首页 TRAVEL RESPONSIBLY 右侧背景视频列（27f1141）
      背景视频 1080x1350（4:5 竖版）挂在容器上，Elementor 默认
      width/height:auto，小屏只画出窄条甚至列高塌陷为 0。
      小屏强制：容器铺满列 + video 100% cover，列高不再塌陷。
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-element-e5686ad [data-id="27f1141"] .elementor-background-video-container {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	.elementor-element-e5686ad [data-id="27f1141"] video.elementor-background-video-hosted {
		top: 0 !important;
		left: 0 !important;
		transform: none !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		object-fit: cover !important;
	}
}

/* 平板：与区块行高一致（400px），视频 cover 裁切铺满 */
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-e5686ad > [data-id="27f1141"].elementor-element {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 400px !important;
		min-height: 0 !important;
		overflow: hidden !important;
		background-color: #17110c !important;
	}
}

/* 手机：上下堆叠后，列按视频 4:5 比例自适应，最深 440px */
@media (max-width: 767px) {
	.elementor-element-e5686ad > [data-id="27f1141"].elementor-element {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 4 / 5;
		max-height: 440px;
		overflow: hidden !important;
		background-color: #17110c !important;
	}
}

/* ============================================================
   10. 首页 Where do you want to go?（nested-tabs akjgwtabs）
      参考 A&K 官网小屏样式：标签栏保持一行、可横向滑动；
      卡片区改为横向轮播（约 1 张/屏，下一张露边、scroll-snap），
      不再是纵向手风琴 + 卡片竖排。桌面端不受影响。
   ============================================================ */
@media (max-width: 1024px) {
	/* 1) 标签栏：一行、nowrap、横向滑动、隐藏滚动条
	      （必须改回 flex-start：继承的 center 在内容超宽时会把
	        第一个标签溢出到负方向，且该方向无法滚动到） */
	.elementor-element-akjgwtabs .e-n-tabs .e-n-tabs-heading {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		--n-tabs-title-justify-content: flex-start;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.elementor-element-akjgwtabs .e-n-tabs .e-n-tabs-heading::-webkit-scrollbar {
		display: none;
	}

	.elementor-element-akjgwtabs .e-n-tabs .e-n-tab-title {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		white-space: nowrap !important;
	}

	/* 2) 卡片区：横向轮播 */
	.elementor-element-akjgwtabs .akj-el-panel {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x proximity !important;
		scroll-padding-inline: 20px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 16px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		align-items: flex-start !important;
	}

	.elementor-element-akjgwtabs .akj-el-panel::-webkit-scrollbar {
		display: none;
	}

	.elementor-element-akjgwtabs .akj-el-panel .akj-el-card {
		flex: 0 0 84% !important;
		width: 84% !important;
		max-width: 84% !important;
		scroll-snap-align: start !important;
	}
}

/* 手机：卡片占比稍大，下一张露出约 12% 边 */
@media (max-width: 767px) {
	.elementor-element-akjgwtabs .akj-el-panel .akj-el-card {
		flex: 0 0 88% !important;
		width: 88% !important;
		max-width: 88% !important;
	}
}

/* ============================================================
   11. Our Story 页 hero（容器 4ef8d2e，背景视频 + 白色绝对定位标题）
      手机端：Elementor 给视频容器加了 elementor-hidden-mobile，
      ≤767px 整块隐藏 → 500px 纯白空块、白标题隐形；
      平板端：视频按固有 2:1 比例只画出 768×384，容器 500px 高
      → 上下各露 ~58px 白条。两处一并强制铺满。
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-element-4ef8d2e .elementor-background-video-container video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

@media (max-width: 767px) {
	/* 深色兜底：视频加载慢/失败时白标题仍可读（与首页 hero 同色系） */
	.elementor-element-4ef8d2e.elementor-element {
		background-color: #17110c !important;
	}

	/* 解除 Elementor 对手机端背景视频的隐藏，并铺满整块 */
	.elementor-element-4ef8d2e .elementor-background-video-container.elementor-hidden-mobile {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}
}

/* ============================================================
   12. 手机端背景视频通用铺满
      ak-responsive.js 补源后，Elementor 的 JS 尺寸计算（桌面 handler）
      并未运行，video 按固有比例只画出一条窄带 → 统一强制铺满宿主容器。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-background-video-container video.elementor-background-video-hosted {
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		object-fit: cover !important;
		top: 0 !important;
		left: 0 !important;
		transform: none !important;
	}
}

/* ============================================================
   13. Travel Guides 页 All travel guides 区（1b34645，短代码挂件 638a8f3）
      手机端 Chrome 对 e-con-boxed + .e-con-inner{height:100%} 的
      循环百分比解析怪癖：内容溢出时挂件被压到 ~0.8 倍内容高度，
      卡片溢出压住页脚且尾部 ~148px 永远滚不到。
      ≤767px 把 inner 改为 block 布局（flex gap 需用 margin 补回）。
      平板端内容恰好放下无溢出，不需处理。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-1b34645 > .e-con-inner {
		display: block !important;
	}

	.elementor-element-1b34645 > .e-con-inner > .elementor-element + .elementor-element {
		margin-top: 20px;
	}
}