/*
 * 关于美林页 —— 在旧站版式基础上的现代化微调
 *
 * 基础版式（.about_banner / .about_con_tit / .about_detail1-8）来自 index.css，
 * 这里只做三件事：
 * 1. 板块标题从 div 换成 h2 后修正 UA 默认外边距；
 * 2. 内容图片统一圆角与间距（取代旧站 <br><br><br> 的硬换行）；
 * 3. 板块进入视口时轻微上浮淡入（见 about.js），尊重系统减少动态设置。
 */

h2.about_con_tit {
	margin: 30px auto 0;
}

/* 板块「标题条 → 正文」间距：与标题条上方对称，各 30px。
 * 标题条已是纯色背景（index.css），flex 垂直居中，不再依赖背景图。 */
.about_con_box [class^="about_detail"] {
	margin-top: 30px;
}

/* 内容图（class="about-photo"，在自定义器内容里书写）
 * 上下留白对称：上方 26px 与段落下边距折叠后生效，下方 30px；
 * 作为板块末元素时不留多余底部空白（:last-child）。
 * 旧站此处上方为 0 —— 文字与大图紧贴，是「文字块下面没留白」的根源。 */
.about-photo {
	display: block;
	margin: 26px auto 30px;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
.about-photo:last-child {
	margin-bottom: 0;
}
/* 相邻的内容图（如 ④ 的 4 张车间照片）之间用小间距，保持成组感 */
.about-photo + .about-photo {
	margin-top: 8px;
}

/* 内文字号：旧站 12px 偏小，微调至 14px 提升可读性 */
.about_con_box {
	font-size: 14px;
	line-height: 26px;
}

/* 内容里的小标题（自定义器「板块内容」中书写 h3，如 ② 生产条件/研发能力/品质管理）
 * —— 旧站没有这层结构，这里补一套克制的样式，避免落到 UA 默认的大字号粗体 */
.about_con_box h3 {
	margin: 20px 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 26px;
	color: #006a35;
}
.about_con_box h3:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------
 * 常见问题（⑩ 常见问题）
 * 用原生 <details>/<summary>，零 JS 依赖；答案默认收起。
 * 注意：主题没有全局 box-sizing:border-box 重置，这里不写 width:100%
 * 的横向内边距元素，避免比容器宽出内边距之和（参见项目红线）。
 * ------------------------------------------------------------------ */
.about_faq {
	margin-top: 4px;
}
.faq_item {
	border-bottom: 1px solid #e6e6e6;
}
.faq_item:first-child {
	border-top: 1px solid #e6e6e6;
}
.faq_q {
	position: relative;
	padding: 14px 44px 14px 32px;
	cursor: pointer;
	color: #006a35;
	font-weight: 700;
	list-style: none;
}
/* 去掉浏览器默认的展开三角（Firefox / Safari 用 marker，Chrome 用伪元素） */
.faq_q::-webkit-details-marker {
	display: none;
}
.faq_q::marker {
	content: "";
}
/* 左侧橙色 Q 标记 */
.faq_q::before {
	content: "Q";
	position: absolute;
	left: 6px;
	top: 14px;
	color: #f39800;
	font-weight: 700;
}
/* 右侧箭头，展开时旋转 180° */
.faq_q::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 22px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #727171;
	border-bottom: 2px solid #727171;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.faq_item[open] .faq_q::after {
	transform: rotate(-135deg);
}
.faq_q:hover {
	color: #eb8a1a;
}
.faq_a {
	padding: 0 24px 18px 32px;
	color: #444;
}

/* 工艺流程卡片：h3 / p 修正 UA 外边距，悬浮轻微上浮 */
.about_detail7 .tit {
	margin: 0;
}
.about_detail7 .con {
	margin: 10px 0 0 26px;
}
.about_detail7 .one {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about_detail7 .one:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.about_detail7 .one:hover .imgbox {
	box-shadow: none;
}

/* 板块浮现动画（about.js 在支持 IntersectionObserver 时添加 .reveal） */
.about_section.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.about_section.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.about_section.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.about_detail7 .one {
		transition: none;
	}
	.faq_q::after {
		transition: none;
	}
	.about_detail7 .one:hover {
		transform: none;
		box-shadow: none;
	}
}