/*
 * Case Studies 归档页样式 —— case-study-archive-header（token 型）和
 * case-study-archive-grid（数据型）两个 widget + case-study-single（详情）共用一份 CSS。
 *
 * 参考站 jcrapid.com/case-studies/ 实测（2026-09-05 截图对比）：
 *   - Hero 区域：白色背景，无深色遮罩，左对齐文字，padding 约 100px 上下
 *   - 卡片：无 box-shadow，无圆角，图片直接显示，标题 + 橙色摘要文字
 *   - 底部 CTA：深色背景大区块
 *   - 详情页：白色背景，h1 标题 + 摘要，然后正文内容
 */

/* ── Hero 文字区块（白色背景，无深色遮罩） ─────────────────────────────────── */
/*
 * 🚩 2026-09-06 修：max-width 原来只加在 .jiesheng-case-study-archive-grid 上，
 * header 没有对应的 max-width，导致宽视口下 header 是通栏 padding、grid 是居中
 * 定宽两种不同的对齐逻辑——视口越宽两者左边缘错位越明显（1920px 下实测差 240px）。
 * 参考站 jcrapid.com/case-studies/ 用 Playwright 挂真实线上页面实测（本地归档的
 * CSS 外链是空 href，样式规则测不到，见 2026-09-06 采集记录）：这个页面的内容
 * 真实上限是 1600px（不是全站其它页面常见的 1400px kit 默认值），header/grid
 * 两个区块共用同一个 1600px 居中容器，此后各自的 57px 侧边距才生效。
 */
.jiesheng-case-study-archive-header {
	background: #fff;
	max-width: 1600px;
	margin: 0 auto;
	padding: 80px 57px 60px;
	box-sizing: border-box;
}

/* 去掉原先的 __inner 容器包裹，内容直接在 header 里 */
.jiesheng-case-study-archive-header__inner {
	max-width: 1424px;
	margin: 0 auto;
	padding: 0;
}

/* Eyebrow 标签（小型全大写橙色文字） */
.jiesheng-case-study-archive-header__eyebrow {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ast-global-color-0, #e7823a);
	font-weight: 700;
	margin: 0 0 16px;
}

/* 主标题 h2 — 参考站实测 44px */
.jiesheng-case-study-archive-header__title {
	font-size: 44px;
	line-height: 1.1;
	color: var(--ast-global-color-2, #000);
	font-weight: 700;
	margin: 0 0 20px;
}

/* 说明文字 — 参考站实测约 752px 宽 */
.jiesheng-case-study-archive-header__desc {
	font-size: 15px;
	color: var(--ast-global-color-3, #333);
	max-width: 752px;
	line-height: 1.7;
	margin: 0;
}

/* --display 补丁 */
.e-flex {
	--display: flex;
	display: flex;
	flex-wrap: wrap;
}

/*
 * ── 卡片网格 — 参考站实测：grid gap≈0，padding 内外靠卡片自身 ──
 * 🚩 2026-09-06 修：max-width 从 1424px 改成 1600px，跟上面 header 的修法
 * 是同一个问题的两处症状——之前 1424 这个数字是猜的，没有实测支撑；挂真实
 * 线上页面在 1920px/2560px 两档视口下量出来，卡片的真实上限跟着一个 1600px
 * 居中容器走（宽视口下卡片会跟着变宽到约 490px，不是固定 436px），1424px
 * 偏窄是"卡片整体偏小"的根因，不只是对齐问题。
 */
.jiesheng-case-study-archive-grid {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 57px 80px;
	box-sizing: border-box;
}

@media (max-width: 921px) {
	.jiesheng-case-study-archive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
		padding: 20px 20px 60px;
	}
}

@media (max-width: 544px) {
	.jiesheng-case-study-archive-grid {
		grid-template-columns: 1fr;
		gap: 40px 0;
		padding: 20px 16px 48px;
	}
}

/* 单张卡片 — 无边框、无阴影（参考站真实样式）*/
.jiesheng-case-study-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	padding: 26px 26px 0;
	box-sizing: border-box;
}

/* 卡片图片区 — 参考站实测约 384×256px（3:2 比例，填满卡片宽度减 padding）*/
.jiesheng-case-study-card__img-wrap {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #f0f0f0;
	margin-bottom: 16px;
}

.jiesheng-case-study-card__img-wrap img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.jiesheng-case-study-card:hover .jiesheng-case-study-card__img-wrap img {
	transform: scale(1.05);
}

/* 占位（无缩略图时） */
.jiesheng-card-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: #e8e8e8;
}

/* 卡片文字区 */
.jiesheng-case-study-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 10px 0 20px;
}

/* 卡片标题 — 参考站实测 18px 黑色 */
.jiesheng-case-study-card__body .elementor-heading-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 10px;
	color: #000;
}

.jiesheng-case-study-card__body .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.jiesheng-case-study-card__body .elementor-heading-title a:hover {
	color: var(--ast-global-color-0, #e7823a);
}

/* 卡片摘要 — 参考站截图实测橙色（CSS 未加载时 probe 显示 #333，截图比对才准） */
.jiesheng-case-study-card__body p {
	font-size: 15px;
	color: var(--ast-global-color-0, #e7823a);
	line-height: 1.7;
	margin: 0 0 12px;
	flex: 1;
}

/* "Read Case Study →" 链接 */
.jiesheng-case-study-card__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--ast-global-color-3, #333);
	text-decoration: none;
	margin-top: auto;
}

.jiesheng-case-study-card__link:hover {
	color: var(--ast-global-color-0, #e7823a);
}

/* ── 底部 CTA 区块 ─────────────────────────────────────────────────────────── */
.jiesheng-case-study-cta {
	background: #1a1a1a;
	background-image: url('');  /* 运行时由 CSS 或内联设定背景图 */
	background-size: cover;
	background-position: center;
	padding: 60px 24px;
	text-align: center;
	position: relative;
}

.jiesheng-case-study-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.jiesheng-case-study-cta > * {
	position: relative;
	z-index: 1;
}

.jiesheng-case-study-cta__title {
	font-size: 44px;
	font-weight: 700;
	color: #fff;
	margin: 0 auto 16px;
	max-width: 760px;
	line-height: 1.1;
}

.jiesheng-case-study-cta__desc {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
	max-width: 600px;
	margin: 0 auto 32px;
	line-height: 1.7;
}

.jiesheng-case-study-cta .elementor-button {
	display: inline-block;
	padding: 16px 40px;
	background: var(--ast-global-color-0, #e7823a);
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}

.jiesheng-case-study-cta .elementor-button:hover {
	background: var(--ast-global-color-1, #d56b1f);
}

/* ── 详情页样式 ───────────────────────────────────────────────────────────────
 * 参考站 smoke-grinder 实测结构：
 *   白色背景，h1 小写标题（参考站用小写），摘要文字
 *   About The Project（左图右文两栏）
 *   项目参数列表（左列）
 *   How The Parts Were Manufacturing（带 01/02/03 大数字）
 */

/*
 * 🚩 2026-09-06 修：跟归档页同一类问题——hero 原来只有 padding 没有 max-width，
 * 下方 .jiesheng-case-study-single-content 是居中定宽 1100px，两个区块用了不同的
 * 对齐逻辑，宽视口下标题和正文位置对不上。挂真实线上页面
 * jcrapid.com/case-studies/smoke-grinder/ 实测：hero 和下方 "About The
 * Project"/步骤区共用同一个 1400px 居中容器（不是 1100px），改成跟 content
 * 同一个 max-width，两者才会保持对齐；1100px 偏窄也是下面步骤卡片偏小的根因
 * （见 .jiesheng-case-study-single-content 的修法）。
 */
.jiesheng-case-study-single-hero {
	background: #fff;
	max-width: 1400px;
	margin: 0 auto;
	padding: 80px 57px 40px;
	box-sizing: border-box;
}

.jiesheng-case-study-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-case-study-single-hero__excerpt {
	font-size: 15px;
	color: var(--ast-global-color-3, #333);
	max-width: 800px;
	margin: 0;
	line-height: 1.75;
}

/*
 * 正文内容区
 * 🚩 2026-09-06 修：max-width 从 1100px 改成 1400px，跟上面 hero 对齐——
 * 1100px 是之前猜的数字，挂真实线上页面实测这个区块（About The Project +
 * 步骤区）跟 hero 共用同一个 1400px 容器。这个值直接决定下面
 * .jiesheng-steps-grid 三张卡片的宽度（步骤卡片偏小就是这个 1100px 抠小了）。
 *
 * 🚩 2026-09-06 再修：margin 的 auto 从 "0 auto" 改成 "0"——这个 div 的直接
 * 父级 .e-con-inner 是 Elementor 自己的 display:flex; flex-direction:column
 * （不是我们自己声明的，是它默认这样），auto 外边距在 flex 场景下会关掉
 * cross-axis 的 stretch，让这个 div 缩到"内容多宽就多宽"再居中——没有 IMG2
 * 时参数列表单栏兜底渲染就撞上了这个坑，表现是整块文字被推到页面中间偏右，
 * 不再是贴左对齐。max-width:1400px 配合父级本来就是 1400px 宽，去掉 auto
 * 不影响原本就撑满的情况，只修掉会收缩的场景。
 */
.jiesheng-case-study-single-content {
	max-width: 1400px;
	margin: 0;
	padding: 40px 57px 80px;
	box-sizing: border-box;
}

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

.jiesheng-case-study-single-content h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ast-global-color-2, #000);
	margin: 28px 0 12px;
}

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

.jiesheng-case-study-single-content ul {
	padding-left: 0;
	list-style: none;
	margin: 0 0 24px;
}

.jiesheng-case-study-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;
}

.jiesheng-case-study-single-content ul li:last-child {
	border-bottom: none;
}

/* 特色图片 — 参考站不用全宽大图，图片放在 About 区块旁边 */
.jiesheng-case-study-single-featured-img {
	display: none;  /* 特色图已经整合进两列布局，不单独显示 */
}

/* About The Project 两列布局（左图右文）*/
.jiesheng-case-study-single-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin: 40px 0;
	align-items: start;
}

.jiesheng-case-study-single-about-grid img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.jiesheng-case-study-single-about-grid {
		grid-template-columns: 1fr;
	}
}

/* "More Case Studies" 区块 */
.jiesheng-case-study-single-related {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 2px solid #eee;
}

.jiesheng-case-study-single-related > .elementor-heading-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 32px;
	color: var(--ast-global-color-2, #000);
}

/* 正文步骤区（"How The Parts Were Manufactured" 下面的 h3）
 * 参考站是 3 列横排 + 大数字编号 + 浅灰背景
 * 用 CSS counter 自动给 h2 之后的 h3 加编号，不需要改 PHP */
.jiesheng-case-study-single-content .jiesheng-steps-section {
	background: var(--ast-global-color-4, #f8f8f8);
	padding: 60px 24px;
	margin: 40px -24px;
	box-sizing: border-box;
}

.jiesheng-case-study-single-content .jiesheng-steps-title {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	/* 🚩 2026-09-06 修：挂真实线上页面 getComputedStyle 实测这行小字是
	   #333（深灰），不是橙色——之前套用了别处 eyebrow 惯用的橙色 token，
	   没有单独核实这一处。 */
	color: var(--ast-global-color-3, #333);
	margin-bottom: 8px;
}

.jiesheng-case-study-single-content .jiesheng-steps-heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 40px;
}

.jiesheng-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 768px) {
	.jiesheng-steps-grid { grid-template-columns: 1fr; }
}

.jiesheng-step-item__number {
	font-size: 52px;
	font-weight: 700;
	color: #c8c8c8;  /* 参考站实测浅灰色，不是橙色 */
	line-height: 1;
	margin-bottom: 16px;
}

.jiesheng-step-item__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--ast-global-color-2, #000);
}

.jiesheng-step-item__text {
	font-size: 14px;
	line-height: 1.75;
	color: var(--ast-global-color-3, #333);
	margin: 0;
}
	margin: 48px 0 0;
	text-align: center;
}

.jiesheng-case-study-single-cta .elementor-button {
	display: inline-block;
	padding: 16px 40px;
	background: var(--ast-global-color-0, #e7823a);
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}

.jiesheng-case-study-single-cta .elementor-button:hover {
	background: var(--ast-global-color-1, #d56b1f);
}