/* Hallmark · macrostructure: Long Document · tone: utilitarian · anchor hue: navy
 * scope: case detail (/case/{slug}/) · genre: editorial / technical dossier
 * pre-emit critique: P4 H5 E5 S4 R4 V4
 *
 * 设计意图：把案例详情页当成一份「技术档案」来排，而不是一篇博客。
 *   1. 深蓝档案头承担标题，行业与地区做眉标；
 *   2. 客户数据从灰底小表格改成左侧常驻档案栏，滚动时保持可见；
 *   3. 正文撑满主栏，与封面、正文插图同一宽度，左中右三条边对齐；
 *   4. 全页不复用 8px 圆角，改用 3px 以内的直角，贴工业感。
 */

.jby-case {
	--case-deep:  #14324F;
	--case-rail:  268px;
}

/* ── 档案头 ───────────────────────────────────────────── */
.jby-case-head {
	background: var(--case-deep);
	color: #fff;
	padding: 34px 36px 36px;
	margin: 0 0 36px;
	border-radius: 3px;
}

.jby-case-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 13px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: #9DC4E8;
	line-height: 1;
}

.jby-case-kicker i {
	font-style: normal;
	opacity: .55;
}

.jby-case-head h1 {
	margin: 0;
	max-width: 900px;
	font-size: 33px;
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: -.3px;
	color: #fff;
	text-wrap: balance;     /* 避免中文标题末行只剩一个字 */
}

/* ── 两栏：档案栏 + 正文 ──────────────────────────────── */
.jby-case-body {
	display: grid;
	grid-template-columns: var(--case-rail) minmax(0, 1fr);
	gap: 0 52px;
	align-items: start;
}

.jby-case-main { min-width: 0; }

/* 档案栏 */
.jby-case-rail {
	position: sticky;
	top: 24px;
}

.jby-case-plate {
	border-top: 3px solid var(--case-deep);
	background: var(--jby-bg-soft);
	padding: 16px 18px 18px;
}

.jby-case-plate .plate-t {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--jby-muted);
}

.jby-case-plate dl { margin: 0; }

.jby-case-plate dl > div {
	padding: 9px 0;
	border-bottom: 1px solid var(--jby-border);
}

.jby-case-plate dl > div:first-child { padding-top: 0; }
.jby-case-plate dl > div:last-child { padding-bottom: 0; border-bottom: 0; }

.jby-case-plate dt {
	margin: 0 0 3px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--jby-muted);
	line-height: 1.4;
}

.jby-case-plate dd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	color: #1B2836;
}

.jby-case-plate dd em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.5;
	color: #8A94A0;
}

/* 档案栏底部电话 */
.jby-case-call {
	display: block;
	margin-top: 12px;
	padding: 14px 18px;
	background: var(--case-deep);
	color: #fff;
	text-decoration: none;
	transition: background .2s var(--case-ease, ease);
}

.jby-case-call span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	color: #9DC4E8;
}

.jby-case-call b {
	display: block;
	margin-top: 5px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;            /* Kadence 给 b 单独上了色，不显式声明会变成深蓝压深蓝 */
	font-variant-numeric: tabular-nums;
}

.jby-case-call:hover { background: var(--jby-primary); color: #fff; }

.jby-case-call:focus-visible {
	outline: 3px solid #7FB2E0;
	outline-offset: 2px;
}

/* ── 封面 ─────────────────────────────────────────────── */
.jby-case-cover { margin: 0 0 32px; }

.jby-case-cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--jby-border);
}

/* ── 正文（长文档） ───────────────────────────────────── */
/* 正文与封面、插图统一撑满主栏宽度，三者左右边缘对齐才算「到边」 */
.jby-case-entry {
	max-width: none;
	font-size: 16px;
	line-height: 1.88;
	color: #2B3540;
}

.jby-case-entry > p { margin: 0 0 1.4em; }

.jby-case-entry > p:first-of-type {
	font-size: 17px;
	line-height: 1.9;
	color: #1B2836;
}

.jby-case-entry figure { margin: 30px 0; }

/* 正文图居中。
 * width:auto + max-width:100%：原图比主栏窄就按原尺寸显示（不放大、不糊），
 * 原图更宽才缩到主栏宽度；margin auto 负责居中。
 * 老文章的 figure/img 带内联 max-width:560px、width:100%、border-radius:8px，
 * 内联优先级高于类选择器，必须 !important 才压得住。 */
.jby-case-entry img {
	display: block;
	width: auto !important;
	height: auto;
	max-width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--jby-border);
	border-radius: 3px !important;
}

.jby-case-entry figcaption {
	margin-top: 8px !important;
	font-size: 12.5px !important;
	line-height: 1.6;
	color: var(--jby-muted) !important;
	text-align: center;
}

.jby-case-entry a { color: var(--jby-accent); }

/* ── 同行业案例 ───────────────────────────────────────── */
.jby-case-more { margin-top: 52px; }

.jby-case-more .jby-card .thumb { aspect-ratio: 4 / 3; }

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width: 1000px) {
	.jby-case-head {
		padding: 26px 22px 28px;
		margin-bottom: 26px;
	}
	.jby-case-head h1 { font-size: 24px; letter-spacing: -.2px; }

	.jby-case-body {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.jby-case-rail { position: static; }

	/* 手机端档案栏压成两列，别把首屏全部吃掉 */
	.jby-case-plate dl {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}
	.jby-case-plate dl > div:nth-child(2) { padding-top: 0; }
	/* 条目数为奇数时，最后一条占满整行，别在右下角留一块空白 */
	.jby-case-plate dl > div:nth-child(odd):last-child { grid-column: 1 / -1; }

	.jby-case-entry { font-size: 15.5px; }
	.jby-case-entry > p:first-of-type { font-size: 16.5px; }
}

@media (max-width: 480px) {
	.jby-case-head { padding: 22px 18px 24px; }
	.jby-case-head h1 { font-size: 21px; line-height: 1.5; }
	.jby-case-plate { padding: 14px 16px 16px; }
	.jby-case-plate dl { gap: 0 14px; }
	.jby-case-plate dd { font-size: 13.5px; }
	.jby-case-call { padding: 13px 16px; }
	.jby-case-call b { font-size: 16px; }
}