/* ==========================================================================
   XZK 玻璃站 · 移动端自适应增强层
   --------------------------------------------------------------------------
   加载顺序：始终在 style.css 与 lp.css 之后（见 inc/template-enqueue.php）
   作用范围：仅小屏（默认 ≤768px，部分规则到 ≤480px）

   为什么单独建一个文件，而不是改 style.css？
     · style.css 是主题原有主样式（7362 行），就地改动风险高、难回溯
     · 本文件是纯增量，删掉即回到原状
     · 便于后续单独维护移动端规则

   解决的实际问题（均为线上实测，非推测）：
     1. 触控目标过小 —— 产品列表页 152 个可点元素中 99 个低于 32px，
        面包屑链接仅 14px 高、产品卡按钮仅 80×24px，
        远低于 WCAG 2.2「目标尺寸」的 24px 下限与 44px 推荐值
     2. 产品列表页卡片标题被省略号截断（如 "Chrome-Zirconia-Mulli..."），
        移动端两列布局下信息丢失
     3. 产品详情页技术规格表横向可滚动，但没有任何视觉提示
     4. 部分辅助文字字号偏小，iOS 横屏会被强制放大（未声明 text-size-adjust）
   ========================================================================== */


/* ==========================================================================
   1. 全局移动端基础
   ========================================================================== */

@media (max-width: 768px) {

	/* 防止 iOS 横屏时自动放大字号 */
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* 点击高亮改为浅色，避免整块变灰 */
	body {
		-webkit-tap-highlight-color: rgba(201, 1, 1, .08);
	}

	/* 正文里的图片与表格不撑破容器 */
	body img {
		max-width: 100%;
		height: auto;
	}

	/* 表单控件字号 ≥16px，否则 iOS Safari 聚焦时会自动放大页面 */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	textarea,
	select {
		font-size: 16px;
	}

	/* 正文段落行高略放宽，手机上更好读 */
	body p {
		line-height: 1.75;
	}
}


/* ==========================================================================
   2. 面包屑：触控目标从 14px 提升到 44px
   --------------------------------------------------------------------------
   做法：保持视觉外观不变（背景不变、文字不被挤开），
        用上下 padding 把可点击区域撑起来。
   ========================================================================== */

@media (max-width: 768px) {

	.breadcrumb-content {
		line-height: 1.5;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.breadcrumb-content a,
	.breadcrumb-content span {
		display: inline-block;
		padding: 15px 2px;
		line-height: 1;
		vertical-align: middle;
	}

	/* 分隔符不参与点击，只保留视觉间隔 */
	.breadcrumb-content i,
	.breadcrumb-content .sep {
		padding: 15px 0;
	}
}


/* ==========================================================================
   3. 产品卡片按钮：80×24 → 96×44
   --------------------------------------------------------------------------
   原样式：.product-btn div { width:80px; height:24px; line-height:24px; }
   选择器层级深（4 层类），这里用 !important 确保在小屏生效，
   且仅在 ≤768px 内生效，不影响桌面端。
   ========================================================================== */

@media (max-width: 768px) {

	.product-content .product-right .product-item .product-btn div,
	.product-related-products .product-item .product-btn div,
	.product-contents .product-item .product-btn div {
		width: 96px !important;
		height: 44px !important;
		line-height: 42px !important;
		border-radius: 22px !important;
		font-size: 14px !important;
	}

	/* 按钮内的链接铺满整个可点区域 */
	.product-content .product-right .product-item .product-btn div a,
	.product-related-products .product-item .product-btn div a,
	.product-contents .product-item .product-btn div a {
		display: block;
		width: 100%;
		height: 100%;
		line-height: inherit;
	}

	/* 两列卡片下按钮并排更紧凑，同时保证间距够点 */
	.product-content .product-right .product-item .product-btn,
	.product-related-products .product-item .product-btn,
	.product-contents .product-item .product-btn {
		gap: 10px;
		margin: 0 0 14px;
	}
}


/* ==========================================================================
   4. 产品列表页卡片：标题不再被截断
   --------------------------------------------------------------------------
   移动端为两列布局，卡片窄，原样式用单行省略号处理导致标题残缺。
   改为最多两行显示，仍超出才省略。
   ========================================================================== */

@media (max-width: 768px) {

	.product-content .product-right .product-item .product-title,
	.product-related-products .product-item .product-title,
	.product-contents .product-item .product-title {
		font-size: 15px;
		line-height: 1.35;
		min-height: 2.7em;           /* 固定两行高度，卡片高度整齐 */
	}

	.product-content .product-right .product-item .product-title a,
	.product-related-products .product-item .product-title a,
	.product-contents .product-item .product-title a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		white-space: normal;
		text-overflow: clip;
		word-break: break-word;
		/* 标题是卡片的主要入口，撑起可点高度（原为 19px） */
		padding: 9px 0;
	}

	/* 参数文字略放大，原 11~12px 在手机上偏吃力 */
	.product-content .product-right .product-item .product-data,
	.product-related-products .product-item .product-data,
	.product-contents .product-item .product-data {
		font-size: 13px;
		line-height: 1.6;
	}

	/* 卡片图片统一比例，避免高低参差 */
	.product-content .product-right .product-item .product-img img,
	.product-related-products .product-item .product-img img,
	.product-contents .product-item .product-img img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: contain;
	}
}


/* ==========================================================================
   5. 技术规格表：横向滚动提示
   --------------------------------------------------------------------------
   表格在窄屏可横向滑动（父容器 overflow-x:auto），但用户看不出可滑。
   用 background-attachment:local 的滚动阴影做提示 —— 纯 CSS，无需改模板。
   原理：local 的背景跟随内容滚动，scroll 的背景固定；
        两者叠加后，未滚到边缘的一侧会露出阴影。
   ========================================================================== */

@media (max-width: 768px) {

	.product-technical-data .detail-box,
	.product-description .detail-box,
	.xzk-lp-prose .lp-table-scroll {
		background-image:
			linear-gradient(to right, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0)),
			linear-gradient(to left, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0));
		background-position: 0 0, 100% 0;
		background-repeat: no-repeat;
		background-size: 26px 100%, 26px 100%;
		background-attachment: local, local;
	}

	.product-technical-data .detail-box table,
	.product-description .detail-box table {
		min-width: 480px;            /* 保证列不挤压，宁可横向滑 */
	}

	.product-technical-data .detail-box table th,
	.product-technical-data .detail-box table td,
	.product-description .detail-box table th,
	.product-description .detail-box table td {
		font-size: 13.5px;
		padding: 10px 12px;
		white-space: nowrap;
	}

	/* 首列允许换行，属性名通常较长 */
	.product-technical-data .detail-box table td:first-child,
	.product-technical-data .detail-box table th:first-child,
	.product-description .detail-box table td:first-child {
		white-space: normal;
		min-width: 130px;
		font-weight: 600;
	}
}


/* ==========================================================================
   6. 专题页 / 窑炉页：小屏触控目标与排版补强
   --------------------------------------------------------------------------
   lp.css 已含专题页的移动端断点，此处只补「触控目标」与实测量到的问题，
   避免与 lp.css 重复定义。
   ========================================================================== */

@media (max-width: 768px) {

	/* 首屏 CTA：三个按钮全宽堆叠，每个 ≥48px */
	.xzk-lp .xzk-lp-cta {
		flex-direction: column;
		gap: 12px;
	}

	.xzk-lp .xzk-lp-cta a {
		width: 100%;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
	}

	/* 锚点导航：横向滑动 + 加大点击区 */
	.xzk-lp-anchor-inner {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.xzk-lp-anchor-inner::-webkit-scrollbar {
		display: none;
	}

	.xzk-lp-anchor-inner a {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		padding: 0 14px;
	}

	/* 窑炉页材料卡的按钮：提到 44px */
	.fs-mat-actions a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 13.5px;
	}

	/* 段落内链接给一点纵向空间，便于点按 */
	.xzk-lp-prose a {
		padding: 2px 0;
	}
}


/* ==========================================================================
   8. 页脚：链接与社交图标的触控目标
   --------------------------------------------------------------------------
   实测：页脚链接高 16px、社交图标 29×16px，均为偏小的点击目标。
   ========================================================================== */

@media (max-width: 768px) {

	.footer-products .item a,
	.footer-aboutUs .item a,
	.footer-contact .item a,
	.footer-nav a,
	.footer-links a {
		display: inline-block;
		padding: 9px 0;
		line-height: 1.4;
	}

	/* 社交图标：只用 min-* 撑开点击区，不改图标本身的视觉尺寸 */
	.footer-contact .icons > div,
	.footer-contact .item.icons > div,
	.footer-contact .item.icons > div > a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.footer-products,
	.footer-aboutUs,
	.footer-contact {
		padding-bottom: 4px;
	}
}


/* ==========================================================================
   9. 新闻 / 案例列表：分类标签与「Read More」的触控目标
   --------------------------------------------------------------------------
   实测：分类链接 113×17px、Read More 89×17px。
   ========================================================================== */

@media (max-width: 768px) {

	.news-container .news-cat .item a,
	.news-container .cat span a,
	.news-list .cat a,
	.news-item .cat a {
		display: inline-block;
		padding: 8px 2px;
		line-height: 1.4;
	}

	.news-item .text .intro a,
	.news-item .intro a,
	.case-item .text .intro a,
	.case-list .intro a {
		display: inline-block;
		padding: 9px 0;
		line-height: 1.4;
	}

	.news-item .title a,
	.news-list .title a,
	.case-item .title a {
		display: block;
		padding: 6px 0;
		line-height: 1.4;
	}
}


/* ==========================================================================
   7. 超小屏（≤480px）微调
   ========================================================================== */

@media (max-width: 480px) {

	.product-content .product-right .product-item .product-title,
	.product-related-products .product-item .product-title,
	.product-contents .product-item .product-title {
		font-size: 14px;
		min-height: 2.6em;
	}

	.product-content .product-right .product-item .product-btn div,
	.product-related-products .product-item .product-btn div,
	.product-contents .product-item .product-btn div {
		width: 84px !important;
		font-size: 13px !important;
	}

	.xzk-lp .xzk-lp-h1 {
		font-size: 26px;
		line-height: 1.25;
	}

	.xzk-lp .xzk-lp-sub {
		font-size: 14.5px;
	}
}