/**
 * 移动端（≤800px）专项优化
 *
 * 背景：整站样式是从 Discuz 模板（elec_2023_led）搬过来的，桌面端还原度很高，
 * 但移动端只是"能看"：列表掉成单列一屏看不全两张卡、内页横幅固定 220px 高把
 * 1920×220 的横图裁得只剩中间一小块、正文被底部固定导航压住 60px。
 *
 * 原则：
 *   1. 只在本文件里写覆盖，不动 portal.css / style.css 那些上万行的原模板样式，
 *      出问题删掉 functions.php 里那一行 enqueue 即可整体回退。
 *   2. 需要覆盖的选择器一律带 !important —— 原模板大量使用
 *      `.xxx[data-v-xxxxxxxx]` 这种带属性选择器的写法，特异性比普通类高。
 *   3. 只改 ≤800px，桌面端零影响（桌面端已验收定稿）。
 *
 * 2026-10-31 建。改这里之前先读一遍上面的三条。
 *
 * @package leddxs
 */

@media (max-width: 800px) {

	/* =====================================================================
	 * 1. 底部固定导航留白
	 *
	 * #kioNav 是 position:fixed; bottom:0; height:60px; z-index:9999，
	 * 但 body 从来没有 padding-bottom（实测 0px）—— 于是每页最后一块内容
	 * 都被导航压住 60px，卡片标题、页脚版权都看不全。
	 * ================================================================== */
	body {
		padding-bottom: 60px !important;
	}

	/* =====================================================================
	 * 2. 内页横幅（关于我们 / 产品中心 / 案例 / 资讯 / 服务支持 / 视频 / 文章）
	 *
	 * 原样：header-block.css 的 ≤800px 块里写死 height:220px、cn 26px、en 18px，
	 * 图是 1920×220 的桌面横图，cover 到 390×220 时只剩中间约 1/5 宽，
	 * 而橙色 #ff9d00 标题压在浅色照片上几乎看不清。
	 *
	 * 现在：降到 150px（占屏 18% 而不是 26%），图强制正中对齐，
	 * 叠一层从深蓝到透明的横向渐变当遮罩，让白/浅色文字有对比度。
	 * 渐变右端保留 .10 透明度，是为了还能看见照片本身。
	 * ================================================================== */
	.page-ban .img[data-v-dabc661e] {
		height: 150px !important;
		background-size: cover !important;
		background-position: 50% 50% !important;
	}

	.pc-banner .page-ban {
		position: relative;
	}

	.pc-banner .page-ban::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(100deg,
			rgba(4, 28, 86, .82) 0%,
			rgba(4, 28, 86, .45) 58%,
			rgba(4, 28, 86, .10) 100%);
	}

	.page-ban .auto[data-v-dabc661e] {
		position: relative;
		z-index: 2;
	}

	.page-ban .slogan .cn[data-v-dabc661e] {
		font-size: 19px !important;
		line-height: 1.25 !important;
		font-weight: 500 !important;
	}

	.page-ban .slogan .en[data-v-dabc661e] {
		font-size: 11px !important;
		line-height: 1.3 !important;
		margin-top: 4px !important;
		color: #d6e6f1 !important;
	}

	/* =====================================================================
	 * 3. 卡片列表 —— 完全交给 case-list.css，这里不干预
	 *
	 * 2026-10-31 用户反馈：手机端两列不如单列。
	 *
	 * 查下来 case-list.css 原本就是对的 ——
	 *   @media (max-width:1100px) { .waterfall { 两列 } }
	 *   @media (max-width: 800px) { .waterfall { grid-template-columns: 1fr; gap:12px } }
	 * 800px 那条在后面，手机上本来就是单列大卡片（380×267、图 180 高）。
	 * 是我上一版在这里硬写了 repeat(2) + !important 把它压掉了，才会变成
	 * 190×182 的小卡片。所以这一段现在整段删除，不写任何 .waterfall 规则，
	 * 列数、间距、内边距一律回到原模板的值。
	 * ================================================================== */

	/* =====================================================================
	 * 4. 首页：数据条 4 项纵向 → 2×2
	 *
	 * intro.php 里 .list 下 4 个 .item（10 年 / 30 家 / 150 家 / 3000+），
	 * 手机上是四行竖排，光这一块就占 400px 高；末尾还有个 .en「10 year」
	 * 大号水印，和第一项的「10」叠在一起，观感很乱。
	 * ================================================================== */
	.index1 .list[data-v-281ecba5] {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 14px 10px !important;
	}

	/*
	 * .item 在原模板里是 float:left + 内容宽。改成 grid 后 float 仍然生效，
	 * 每个 item 只会占内容宽度（实测 139px），格子里左边一坨、右边空着。
	 * 必须把 float 清掉并撑满格子。
	 */
	.index1 .list[data-v-281ecba5] .item[data-v-281ecba5] {
		float: none !important;
		width: 100% !important;
	}

	.index1 .list[data-v-281ecba5] .en[data-v-281ecba5] {
		display: none !important;
	}

	.index1 .list[data-v-281ecba5] h5[data-v-281ecba5] {
		font-size: 12px !important;
		line-height: 1.55 !important;
	}

	.index1 .list[data-v-281ecba5] h5 em[data-v-281ecba5] {
		font-size: 21px !important;
	}

	/* =====================================================================
	 * 5. 首页 h1 收字号
	 *
	 * intro.php 第 23 行是 <h1>湖北LED显示屏专业服务商</h1>，原模板给了 30px；
	 * home-index.css:79 又用 `.index1 .infomation h1[data-v-281ecba5]` +
	 * !important 钉死在 30px —— 光写 h1 是压不住的，必须用同样的选择器。
	 *
	 * 其余页面的 h1（列表页 22px、文章页 24px）本来就合适，这里不动，
	 * 所以不要写成通用的 `h1 {}`。
	 * ================================================================== */
	.index1 .infomation h1[data-v-281ecba5] {
		font-size: 23px !important;
		line-height: 1.4 !important;
	}

	/* =====================================================================
	 * 6. 首页轮播裁切位置的兜底
	 *
	 * parts/home/banner.php 的 3 张图都是 1920 宽的桌面横图，.fullSlide .bd li
	 * 已经是 background-size:cover —— 也就是说 390px 宽的手机上只能看到原图
	 * 正中间的一条（约 1/5），左右两侧的「飘带屏」「弧形屏」必然被切。
	 *
	 * 这一条只能把裁切中心从「顶部对齐」改成「垂直居中」，让它至少不失衡。
	 * 真正的解法是补一张竖版图（约 780×520），换掉 1/2/3.jpg —— 待素材。
	 * ================================================================== */
	.fullSlide .bd li {
		background-position: 50% 50% !important;
	}

	/* =====================================================================
	 * 6b. 首页「解决方案」区块
	 *
	 * parts/home/banner-extra.php 第 88 行把背景图写成内联
	 * `background:url(...) #194982 center 0 no-repeat` —— 内联样式优先级高于
	 * 普通 CSS，而且没写 background-size，于是 1920 宽的图在 390 屏上只露出
	 * 左边一小块，文字直接压在一片蓝壁上（右侧全空）。
	 *
	 * 这里用 !important 压过内联（内联没带 !important，所以压得住），
	 * 再叠一层从上到下加深的遮罩，让白字有对比度。
	 * ================================================================== */
	.index3 .bd li {
		background-size: cover !important;
		background-position: 50% 50% !important;
		position: relative;
	}

	/*
	 * 高度必须从 260 提到 300。
	 *
	 * 实测：li 高 260、overflow:hidden，而里面的 .infomation 高 192px
	 * 从 y=2141 一直排到 2333 —— 超出 li 底边 12px，被裁掉的正好是
	 * 底部的「查看更多」按钮和案例链接。加 40px 余量后内容能完整落下。
	 *
	 * .fullSlide2 / .bd / ul / li 四层都是固定高度且层层相等，
	 * 只改 li 会被外层裁掉，所以四层一起改。
	 */
	.index3 .fullSlide2,
	.index3 .bd,
	.index3 .bd ul,
	.index3 .bd li {
		height: 300px !important;
	}

	.index3 .bd li::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(3, 25, 80, .30) 0%,
			rgba(3, 25, 80, .72) 100%);
	}

	.index3 .bd li .auto,
	.index3 .bd li .c-cnt {
		position: relative;
		z-index: 2;
	}

	/* =====================================================================
	 * 10. 移动端抽屉菜单（parts/mobile-menu.php）
	 *
	 * 这个文件 2026-10-31 重写过：原先里面硬编码了 12 行菜单，
	 * 只有「案例展示」「关于我们」两个一级项，而且把「解决方案」「技术支持」
	 * 错挂到「关于我们」下面 —— 桌面端 7 个栏目在手机上缺了 5 个。
	 * 现在是同一个数据源（ldx_default_nav() / wp_nav_menu），因此多了
	 * 二级展开、登录后态这些结构，下面这些是新结构配套的样式。
	 *
	 * 注意 header-block.css:421-423 里有
	 *   .header1 .menuphone ul li a { font-size:16px !important; color:#5b6d80 !important }
	 * 带 !important，所以这里每条都要跟着写 !important 才压得住。
	 * ================================================================== */
	.menuphone {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		/*
		 * padding-top: 0 —— 必须显式写。
		 * style.css:719 的 `.header1 .menuphone` 带 padding-top: 55px，
		 * 那是原模板给站头品牌条留的位；抽屉是 position:fixed; top:0 全高，
		 * 本来就把站头盖住了，这 55px 纯属白留 —— 连同下面 .mn_top 的 40px，
		 * 一共 95px 才开始出第一项（2026-10-31 用户反馈顶部空太多）。
		 * 它没有 !important，这里加 !important 就能压住，不用改特异性。
		 */
		padding-top: 0 !important;
		/* 底部留给 .bottom_box（登录/在线商城那一行） */
		padding-bottom: 60px !important;
	}

	/* 关闭按钮：44px 是移动端最小点击区，按钮在其中垂直居中 */
	.mn_top {
		position: relative;
		height: 44px;
		border-bottom: 1px solid rgba(0, 31, 137, .08) !important;
	}

	.mn_close {
		position: absolute;
		top: 11px;
		right: 14px;
		width: 22px;
		height: 22px;
		cursor: pointer;
	}

	.mn_close::before,
	.mn_close::after {
		content: "";
		position: absolute;
		left: 2px;
		top: 10px;
		width: 18px;
		height: 2px;
		background: #26316a;
	}

	.mn_close::before {
		transform: rotate(45deg);
	}

	.mn_close::after {
		transform: rotate(-45deg);
	}

	.mn_list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mn_item {
		position: relative;
		border-bottom: 1px solid rgba(0, 31, 137, .08) !important;
	}

	/* 一级项 */
	.menuphone .mn_item > .mn_l1 {
		display: block !important;
		padding: 13px 44px 13px 18px !important;
		font-size: 16px !important;
		line-height: 1.3 !important;
		color: #26316a !important;
		font-weight: 500 !important;
		height: auto !important;
		line-height: 21px !important;
	}

	/* 当前栏目高亮，跟桌面端一样用品牌橙 */
	.menuphone .mn_item.a > .mn_l1 {
		color: #ff8e00 !important;
	}

	/* 展开箭头：默认朝右，展开后朝下 */
	.mn_arrow {
		position: absolute;
		top: 12px;
		right: 8px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		display: block;
	}

	.mn_arrow::after {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		margin: 11px auto;
		border-right: 2px solid #26316a;
		border-bottom: 2px solid #26316a;
		transform: rotate(-45deg);
		transition: transform .2s;
	}

	.mn_item.mn_open > .mn_arrow::after {
		transform: rotate(45deg);
		margin-top: 8px;
	}

	/* 二级：默认收起 */
	.mn_sub {
		display: none;
		background: rgba(0, 31, 137, .045);
		padding-bottom: 6px;
	}

	.mn_item.mn_open > .mn_sub {
		display: block;
	}

	/*
	 * 这两条的选择器必须带 .mn_sub 且多于两个类。
	 *
	 * header-block.css:422 有一条
	 *   .header1 .menuphone ul li a { font-size:16px !important; color:#5b6d80 !important }
	 * 特异性是 (0,2,3)。二级链接虽然在 div.mn_sub 里，但结构上仍然是
	 * `.menuphone ul li` 的后代，会被它命中 —— 所以只写 `.menuphone .mn_group`
	 * （(0,2,0)）压不住，字号会一直停在 16px。带上 .mn_sub 凑到 (0,3,1) 才行。
	 */
	.menuphone .mn_sub > a.mn_group {
		display: block !important;
		padding: 9px 18px 3px !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		color: #7a8798 !important;
		height: auto !important;
	}

	.menuphone .mn_sub > a.mn_l2 {
		display: block !important;
		padding: 11px 18px 11px 30px !important;
		font-size: 14px !important;
		line-height: 1.35 !important;
		color: #4a5568 !important;
		height: auto !important;
		border-top: 1px solid rgba(0, 0, 0, .04) !important;
	}

	/* =====================================================================
	 * 7. 文章正文：图片不越界
	 *
	 * 正文里贴的是原尺寸大图（实测有 1280px 宽的），窄屏下会横向撑破容器。
	 * 实测当前没有产生滚动条（文档宽 390 = 视口宽），但高度会被拉得很夸张，
	 * 这里统一约束一下更稳。
	 * ================================================================== */
	.ldx-article-content img,
	.ldx-article-content iframe,
	.ldx-article-content video {
		max-width: 100% !important;
		height: auto !important;
	}

	/* =====================================================================
	 * 8. 首页资讯标签栏
	 *
	 * 「资讯动态 / 行业资讯 / 技术知识 / 产品展示」挤在 276px 里，最右侧的
	 * 「产品展示」贴着屏幕边。允许换行并缩小字号。
	 * ================================================================== */
	.content-news .tab-name {
		width: 100% !important;
	}

	.content-news .tab-name .ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 12px;
	}

	.content-news .tab-name .li {
		font-size: 13px !important;
	}

	/* =====================================================================
	 * 9. 资讯卡片：文字不许溢出卡片
	 *
	 * 实测首页第一条资讯的摘要在卡片底边被硬切（"覆盖智慧会议、商业零售等
	 * 应用场景…" 只露出半个字），原因是卡片高度固定而摘要没有截断。
	 * ================================================================== */
	.content-news .index-box,
	.content-news .index-box > div,
	.content-news .index5-exhibition {
		overflow: hidden !important;
	}
}