/*
 * 通用详情页外壳 —— industry-single / material-single 两个 widget 共用。
 *
 * 2026-09-06 背景：jcrapid.com 参考站没有 Industries/Material 的详情页版式
 * （归档页就是终点，见 docs/页面清单.md §3/§4），用户跟客户确认后改用
 * case-study 详情页的外壳（白底 hero + 正文）来展示这两类内容。
 *
 * 🚫 这不是照抄 case-study-archive-header.css 里 .jiesheng-case-study-single-*
 * 那套类名——那套类名的 CSS 是跟 case-study 特有的"About/参数两栏 + How 步骤
 * 三栏"结构强绑定的，industry/material 的内容（cncpartschina.com 抓取来的
 * body_text，导入时已拍平成纯 <p> 段落，没有 <h2>/<h3> 语义结构，见
 * widgets/industry-single.php 顶部注释）套不进那套结构。这里只挪用视觉规格
 * （字号、留白、最大宽度），类名和规则单独维护，不与 case-study 那份耦合。
 */

.jiesheng-generic-single-hero {
	background: #fff;
	padding: 80px 0 40px 57px;
	box-sizing: border-box;
}

.jiesheng-generic-single-hero__title {
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.2;
	color: var(--ast-global-color-2, #000);
	font-weight: 700;
	margin: 0 0 16px;
}

.jiesheng-generic-single-hero__excerpt {
	font-size: 15px;
	color: var(--ast-global-color-3, #333);
	max-width: 800px;
	margin: 0 0 24px;
	line-height: 1.75;
}

/* 报价按钮 —— 2026-09-13 补的（客户反馈"少了一个报价按钮"，Capability 详情页
   hero 一直有，这里当时拆分 widget 时漏了），样式照抄
   capability-detail-hero.css 里 `.elementor-button` 那份胶囊按钮规格，
   两处详情页视觉保持一致 */
.jiesheng-generic-single-hero .elementor-button {
	display: inline-block;
	padding: 16px 36px;
	background: var(--brand);
	border: 2px solid var(--brand);
	border-radius: 50px;
	color: #f8f8f8;
	text-decoration: none;
	font-weight: 600;
}

.jiesheng-generic-single-hero .elementor-button:hover {
	opacity: 0.9;
}

/* 特色图 —— 现在跟 hero 左右并排（见下面的 grid 布局区块），不再居中限宽，
   铺满右边这一列 */
.jiesheng-generic-single-image {
	padding: 80px 57px 40px 0;
	box-sizing: border-box;
}

.jiesheng-generic-single-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
 * H1+摘要 与 特色图 左右布局。
 *
 * 2026-09-13 用户反馈这两块应该是左字右图，不是现在的上下堆叠。这两块其实是
 * 两个各自独立的 Elementor 顶层 container（generic-detail-hero.php /
 * generic-detail-image.php 两个 widget 各自烘焙成一个 container，中间没有共用
 * 的 flex/grid 父级能直接摆成一行）。15 篇 Industry/Material 详情页
 * （2026-09-13 查库核实：结构完全一致，都是 hero/image/正文 三个顶层
 * container，特色图都存在）共用同一套结构，改 _elementor_data 逐篇重排风险大
 * （见 .agents/elementor-data.md），这里改用纯 CSS 方案：靠 :has() 把这一类
 * 页面的 `.elementor` 页面根元素变成两列 grid，把 hero/图片两个顶层 container
 * 分别摆进第一行的两列，正文 container（以及以后可能追加的任何其他顶层
 * container）自动落到下一行占满整行。`.elementor` 是每个 Elementor 页面通用
 * 的裸 class，:has() 精确限定只在"里面有 generic-detail-hero widget"的页面上
 * 生效，不影响首页/Capability 详情页等其他页面。
 */
.elementor:has(> .elementor-element.e-parent > .elementor-widget-jiesheng-pages-generic-detail-hero) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
}

.elementor:has(> .elementor-element.e-parent > .elementor-widget-jiesheng-pages-generic-detail-hero)
	> .elementor-element.e-parent:has(> .elementor-widget-jiesheng-pages-generic-detail-hero) {
	grid-column: 1;
	grid-row: 1;
}

.elementor:has(> .elementor-element.e-parent > .elementor-widget-jiesheng-pages-generic-detail-hero)
	> .elementor-element.e-parent:has(> .elementor-widget-jiesheng-pages-generic-detail-image) {
	grid-column: 2;
	grid-row: 1;
}

.elementor:has(> .elementor-element.e-parent > .elementor-widget-jiesheng-pages-generic-detail-hero)
	> .elementor-element.e-parent:not(:has(> .elementor-widget-jiesheng-pages-generic-detail-hero)):not(:has(> .elementor-widget-jiesheng-pages-generic-detail-image)) {
	grid-column: 1 / -1;
}

.jiesheng-generic-single-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 57px 80px;
	box-sizing: border-box;
}

.jiesheng-generic-single-content p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--ast-global-color-3, #333);
	margin: 0 0 18px;
}

/* 旧站"· 条目"列表合并渲染成的 ul（见 inc/generic-detail-content.php），
   视觉上跟 case-study 详情页的参数列表保持一致 */
.jiesheng-generic-single-content ul {
	padding-left: 0;
	list-style: none;
	margin: 0 0 24px;
	columns: 2;
	column-gap: 40px;
}

.jiesheng-generic-single-content ul li {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ast-global-color-3, #333);
	padding: 6px 0;
	border-bottom: 1px solid #eee;
	break-inside: avoid;
}

/* ── 图文卡片分区（jiesheng_render_detail_sections()，见 inc/generic-detail-content.php）──
   重新解析旧站原始 HTML 拿回来的"标题+卡片网格"结构，2026-09-06 替换掉
   纯文字渲染那版。一个 section = 一个 <h2> 小标题 + 可选导语 + 卡片网格。 */
.jiesheng-generic-single-content .jiesheng-generic-single-section {
	margin-bottom: 48px;
}

.jiesheng-generic-single-content .jiesheng-generic-single-section h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--ast-global-color-2, #000);
	margin: 0 0 16px;
}

.jiesheng-generic-single-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.jiesheng-generic-single-card {
	background: var(--ast-global-color-4, #f8f8f8);
	padding: 12px;
	box-sizing: border-box;
}

.jiesheng-generic-single-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 10px;
}

.jiesheng-generic-single-card__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ast-global-color-2, #000);
	line-height: 1.4;
}

.jiesheng-generic-single-card__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ast-global-color-3, #333);
	margin-top: 6px;
	white-space: pre-line;
}

/* "Materials & Finishing" 这类只有 3 张卡片、带长描述的分区，宽一点更好读
   （PHP 端判断卡片里有没有 desc 字段加这个修饰类，不用 :has() 选择器） */
.jiesheng-generic-single-card-grid--rich {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.jiesheng-generic-single-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.jiesheng-generic-single-card-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.elementor:has(> .elementor-element.e-parent > .elementor-widget-jiesheng-pages-generic-detail-hero) {
		display: block;
		max-width: none;
	}

	.jiesheng-generic-single-hero,
	.jiesheng-generic-single-image,
	.jiesheng-generic-single-content {
		padding-left: 24px;
		padding-right: 24px;
	}

	.jiesheng-generic-single-content ul {
		columns: 1;
	}
}