/* ============================================================
 * _overrides.css —— 对原型 CSS 的最小修正（原型本身漏写，非改设计）
 *
 * 为什么单独放一个文件：
 *   fam/*.css 都是从 05-原型 原样抽出的（tools/extract_fam_css.py 生成），
 *   保持「可重跑、可 diff」。凡是需要偏离原型的修正一律写在这里，
 *   一处可查，不污染抽取结果。
 *
 * 现有条目
 *   1. cert-grid：原型只写了 6 列，没有 ≤768px 断点。手机上 6 个认证徽章
 *      最小宽度合计 > 屏宽，会撑出横向滚动条（实测 scrollWidth 634 / 视口 485）。
 *      改为 2 列，与 .cat-grid / .ind-grid / .why-grid 的移动端处理一致。
 *   2. .hdr img：原型 .hdr img{height:104px} 是给「内容撑满整张图」的 logo 写的。
 *      实际 company-logo.png 是 1536×1536 的方图，内容只占 1348×305，
 *      按 104px 渲染时 logo 实际只有 19px 高。已把图片裁到内容（company-logo.png），
 *      高度改为 44px（手机 36px），并去掉 header.php 里的内联 height。
 *   3. .about-text：原型给公司介绍文字定了 max-width:800px，实测右边缘停在 899，
 *      而其他模块内容右边缘是 1151，空出 252px，整段看起来没对齐。
 *      桌面端改为两栏铺满容器（每栏约 500px，行长仍在舒适区），手机端保持单栏。
 *   4. .pager：原型博客列表把 13 篇一次性铺开、没有分页。文章会持续增加，
 *      所以改成 10 条一页并补上分页样式（取旧栈 pages.css 的同一套外观）。
 *   5. .article .table-wrap：V4-5 的内容把表格包成 <figure class="table-wrap">（为了窄屏能横滚），
 *      而 <figure> 有浏览器默认的 margin:1em 40px，会让表格左右缩进 40px、与正文不对齐。
 *      把 figure 的外边距归零，间距交回 .article table 的 margin，视觉与原型一致。
 *   6. .zz-hp / .zz-rfq-error：询盘表单的两处新增元素（原型里没有）。
 *      .zz-hp 是防垃圾提交的隐藏字段，必须不可见；.zz-rfq-error 只在 ?rfq=error 时出现。
 * ============================================================ */

@media (max-width: 768px) {
	.cert-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hdr img {
	height: 44px;
	width: auto;
}

@media (max-width: 768px) {
	.hdr img {
		height: 36px;
	}
}

@media (min-width: 769px) {
	.about-text {
		max-width: none;
		column-count: 2;
		column-gap: 56px;
	}
}

/* ------------------------------------------------------------
 * 分页（博客列表 10 条一页）
 * 原型 05-原型/blog.html 只有 13 篇、一次性列出，没有分页组件。
 * 文章会持续增加，这里补一个与站内其它列表一致的分页条：
 * 外观与旧栈 pages.css 的 .pager 相同，换成新族的变量。
 * ------------------------------------------------------------ */
.pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 36px 0 0;
	flex-wrap: wrap;
	font-family: Arial, sans-serif;
}

.pager a,
.pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: 13px;
	color: var(--blue-darker);
	text-decoration: none;
	background: var(--white);
}

.pager .current {
	background: var(--blue-darker);
	border-color: var(--blue-darker);
	color: #fff;
	font-weight: 700;
}

.pager a:hover {
	border-color: var(--blue);
	color: var(--blue);
}

/* ------------------------------------------------------------
 * 博客正文里的表格容器（figure.table-wrap）
 * 见图 5：只归零外边距 + 允许横向滚动，不改表格本身的样式。
 * ------------------------------------------------------------ */
.article .table-wrap {
	margin: 20px 0;
	overflow-x: auto;
}

.article .table-wrap table {
	margin: 0;
}

/* ------------------------------------------------------------
 * 询盘表单：反垃圾隐藏字段 + 提交失败提示
 * 两者都是原型里没有的元素，样式只保证「不干扰原设计」。
 * ------------------------------------------------------------ */
.zz-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zz-rfq-error {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 3px solid var(--red);
	background: #fdf0ee;
	color: #8a1c0f;
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

.zz-rfq-error a {
	color: inherit;
}