/* ============================================================================
   hntf-seo.css  ——  华南腾飞官网：SEO 模块 + 响应式修复 统一入口
   说明：本文件取代原先分散在 index.php / product1show.php 模板里的内联 <style>。
   .hntf-shell 只允许在此定义一次（历史 bug：曾在模板中重复定义并嵌套 <style>）。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   [0] 响应式图片基础约束 —— 修复富文本大图撑破移动端布局
   背景：CMS 后台插入的图片常带写死的 width/height（如资质图 width="1119"），
        在手机上会撑出横向滚动条（实测首页溢出 741px）。
   放最前面的原因：后续 .hntf-hotgrid img / .rel-grid img 等更具体的规则
        需要能覆盖这里的 height:auto，保持其固定图片高度。
   --------------------------------------------------------------------------- */
.MainList img,
.case_details img,
.layer4Box img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   [1] 统一版块容器 —— 与全站 .w1200 网格对齐（1200px 居中）
   --------------------------------------------------------------------------- */
.hntf-shell { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
@media (min-width: 1200px) { .hntf-shell { padding: 0; } }

/* ---------------------------------------------------------------------------
   [2] SKU 详情页分区卡片
   --------------------------------------------------------------------------- */
.hntf-secbox { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.hntf-secbox h3 { font-size: 16px; color: #0f172a; margin: 0 0 14px; border-bottom: 2px solid #2563eb; padding-bottom: 8px; }
@media (max-width: 767px) { .hntf-secbox { padding: 14px 12px; } }

/* ---------------------------------------------------------------------------
   [3] 首页 · 产品分类直达
   --------------------------------------------------------------------------- */
.hntf-catmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; margin-top: 15px; }
.hntf-catgrp { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 18px; }
.hntf-catlv1 { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px dashed #e5e7eb; font-size: 16px; line-height: 1.4; }
.hntf-catlv1 a { color: #1f2937; text-decoration: none; font-weight: 600; }
.hntf-catlv1 a:hover { color: #1a5fb4; }
.hntf-catlv2 { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hntf-catlv2 a { display: inline-block; padding: 5px 10px; background: #f5f7fa; border: 1px solid #e7ebf0; border-radius: 4px; font-size: 13px; color: #374151; text-decoration: none; transition: all .2s; }
.hntf-catlv2 a:hover { background: #eaf2fd; border-color: #1a5fb4; color: #1a5fb4; }
.hntf-num { font-style: normal; color: #9aa4b2; font-size: 12px; margin-left: 3px; }

/* ---------------------------------------------------------------------------
   [4] 首页 · 精选产品
   --------------------------------------------------------------------------- */
.hntf-hotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.hntf-hotgrid a { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; text-decoration: none; color: #1f2937; transition: all .2s; }
.hntf-hotgrid a:hover { border-color: #1a5fb4; box-shadow: 0 4px 14px rgba(26,95,180,.12); }
.hntf-hotgrid img { display: block; width: 100%; height: 140px; object-fit: contain; background: #f5f7fa; border-radius: 6px; }
.hntf-hotgrid h3 { display: -webkit-box; margin: 10px 0 4px; font-size: 14px; line-height: 1.45; font-weight: 500; height: 40px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hntf-hotgrid p { margin: 0; font-size: 12px; color: #6b7280; }

/* ---------------------------------------------------------------------------
   [5] SKU 详情页 · 同类产品 / 相关产品 / 相关方案 互链网格
   --------------------------------------------------------------------------- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.rel-grid a { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; text-decoration: none; color: #1f2937; transition: all .2s; }
.rel-grid a:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.rel-grid img { display: block; width: 100%; height: 130px; object-fit: contain; background: #f5f7fa; border-radius: 6px; }
.rel-grid h4 { display: -webkit-box; margin: 10px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; height: 38px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rel-more { margin-top: 12px; text-align: right; font-size: 13px; }
.rel-more a { color: #2563eb; text-decoration: none; }
.rel-more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   [6] 移动端断点
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hntf-catmap { grid-template-columns: 1fr; }
    .hntf-catgrp { padding: 14px; }
    .hntf-hotgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hntf-hotgrid img { height: 110px; }
    .rel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .rel-grid img { height: 100px; }
}

/* ---------------------------------------------------------------------------
   [P2-9] 首页服务项目卡片 — 移动端 2×2 网格修复
   问题：原 CSS 用 float:left + width:50%，4个卡片高度不一致时
         float 会错位堆叠成 2+1+1，而非整齐的 2×2。
   方案：移动端改用 flex-wrap + 等高，确保每行固定 2 列。
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.indexContainer .layer1 ul {
		display: flex;
		flex-wrap: wrap;
		overflow: visible;
		padding: 0 10px;
	}
	.indexContainer .layer1 ul li {
		float: none;
		width: 50%;
		padding: 20px 10px;
		box-sizing: border-box;
	}
	.indexContainer .layer1 ul li:nth-child(odd) { clear: left; }
	.indexContainer .layer1 ul li .icon img {
		display: block;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   [P2-10] 优势保障图片移动端变形修复
   问题：img 标签的 width="988" HTML 属性在移动端覆盖了 CSS width:95%
   方案：用 max-width:100% + height:auto 强制约束
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.indexContainer .layer3 img {
		width: 95% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* ---------------------------------------------------------------------------
   [P3-3] 方案/产品详情页正文排版优化
   问题：.MainList p 无 font-size/line-height/margin 定义，裸 p 标签继承全局 reset
         导致字体小（可能12-13px）、间距紧凑（margin:0）、不可读
   方案：为 .MainList 内 p/h2/h3/ol/li 补充合理排版样式
   注意：不使用 !important，让内联 style 仍可覆盖
   --------------------------------------------------------------------------- */
.case_details .MainList p {
	font-size: 16px !important;
	line-height: 1.85 !important;
	color: #333 !important;
	margin: 0 0 16px 0 !important;
	text-align: justify !important;
}
.case_details .MainList p:last-child {
	margin-bottom: 0;
}
.case_details .MainList h2 {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #1a2744 !important;
	margin: 28px 0 16px !important;
	padding-bottom: 8px !important;
	border-bottom: 2px solid #e8ecf1 !important;
	line-height: 1.4 !important;
}
.case_details .MainList h3 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #1e3a5f !important;
	margin: 24px 0 12px !important;
	line-height: 1.4 !important;
}
.case_details .MainList ol,
.case_details .MainList ul {
	margin: 0 0 16px 0;
	padding-left: 24px;
}
.case_details .MainList ol li,
.case_details .MainList ul li {
	font-size: 16px;
	line-height: 1.85;
	color: #333;
	margin-bottom: 8px;
}
.case_details .MainList ol li p,
.case_details .MainList ul li p {
	margin-bottom: 4px;
}
.case_details .MainList strong {
	color: #1a2744;
}
.case_details .MainList img {
	margin: 12px auto;
	display: block;
}

/* 移动端适配 */
@media (max-width: 767px) {
	.case_details .MainList p {
		font-size: 15px !important;
		line-height: 1.8 !important;
		margin-bottom: 14px !important;
	}
	.case_details .MainList h2 {
		font-size: 20px !important;
		margin: 22px 0 14px !important;
	}
	.case_details .MainList h3 {
		font-size: 17px !important;
		margin: 20px 0 10px !important;
	}
	.case_details .MainList ol,
	.case_details .MainList ul {
		padding-left: 20px;
	}
	.case_details .MainList ol li,
	.case_details .MainList ul li {
		font-size: 15px !important;
		line-height: 1.8 !important;
	}
}

/* ---------------------------------------------------------------------------
   [P3-5] 首页服务项目卡片图标图统一约束
   问题：icon 容器 250x210，但 img 没有尺寸约束，大图会撑满
   方案：统一限制 icon img 尺寸
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon img {
	max-width: 100% !important;
	max-height: 210px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* ---------------------------------------------------------------------------
   [P3-6] 企业简介页资质证书图片移动端居中
   问题：图片 style="float:left" width="1119" 固定左浮动，手机端不居中
   方案：移动端取消浮动，图片居中+自适应宽度
   --------------------------------------------------------------------------- */
/* PC端: 防止图片挡住下方导航栏 */
	.indexContainer.about .layer4Box {
		overflow: hidden !important;
	}
	.indexContainer.about .layer4 {
		overflow: hidden !important;
		height: auto !important;
		min-height: 695px !important;
	}
	.indexContainer.about .layer4Box p:last-child {
		clear: both !important;
		overflow: hidden !important;
	}
	.indexContainer.about .pageFull {
		clear: both !important;
	}
	
	@media (max-width: 767px) {
	.indexContainer.about .layer4Box p:has(img) {
		text-align: center !important;
		overflow: hidden !important;
	}
	.indexContainer.about .layer4Box img {
		float: none !important;
		display: block !important;
		margin: 12px auto !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}
	/* PC端: 图片后清除浮动，防止挡住导航栏 */
	.indexContainer.about .layer4Box p:has(img) + *,
	.indexContainer.about .layer4Box > p:last-child {
		clear: both !important;
	}
	.indexContainer.about .pageFull {
		clear: both !important;
		position: relative !important;
		z-index: 1 !important;
	}
	.indexContainer.about .layer4Box p {
		text-align: left;
	}
	.indexContainer.about .layer4Box p[style*="margin-left"] {
		margin-left: 0 !important;
	}
	.indexContainer.about .layer4Box span[style*="font-size:20px"] {
		font-size: 15px !important;
	}
}

/* ---------------------------------------------------------------------------
   [P4-1] PSI CLS 修复：给首页分类封面图设置固定宽高比
   问题：图片从数据库动态输出，无 width/height 属性导致布局偏移
   方案：通过 CSS aspect-ratio 预留空间
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon {
	aspect-ratio: 250 / 210;
	min-height: 210px;
	overflow: hidden;
}
.indexContainer .layer1 ul li .icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	max-width: 100% !important;
	max-height: 210px !important;
}

/* PC 端 CLS: 给所有图片预留尺寸 */
img[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

/* ---------------------------------------------------------------------------
   [P4-2] PC端 CLS 修复：给所有屏幕尺寸的 icon 容器预留空间
   问题：P4-1 的 aspect-ratio 只在 @media(767px) 内，PC端没生效
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon {
	aspect-ratio: 250 / 210 !important;
	min-height: 210px !important;
	overflow: hidden !important;
}
.indexContainer .layer1 ul li .icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	max-height: 210px !important;
}

/* ---------------------------------------------------------------------------
   [P4-3] PC端 banner CLS 修复
   问题：swiper banner 图片加载后推动 indexContainer 布局偏移 0.4
   方案：给 banner 容器设置固定高度
   --------------------------------------------------------------------------- */
.indexContainer .banner {
	height: 480px !important;
	max-height: 480px !important;
	overflow: hidden !important;
}
.indexContainer .bannerBox {
	height: 480px !important;
	max-height: 480px !important;
	overflow: hidden !important;
}
.indexContainer .banner img,
.indexContainer .bannerBox img {
	width: 100% !important;
	height: 533px !important;
	object-fit: cover !important;
}