/* ============================================================
   front.css — 首页 hero + 分类入口条
   只在博客首页加载（见 inc/enqueue.php）。
   卡片样式**不在这里** —— 见 blog.css，那份首页/归档/单篇都要加载。
   ============================================================ */

/* ============================================================
   Hero —— 满宽大图 + 大写标语
   ------------------------------------------------------------
   满宽做法：先用 100vw 撑开，再用负 margin 抵消父容器的居中限制。
   `calc(50% - 50vw)` 比 `margin-left:-50vw;left:50%` 那套更稳，
   不会在有滚动条时溢出半根条。
   ============================================================ */
.jg-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	min-height: clamp(19rem, 14rem + 18vw, 30rem);
	display: grid;
	place-items: center;
	padding: var(--jg-section-y) var(--jg-gutter);
	background-color: rgb(var(--jg-ink));
	background-image: var(--jg-hero-image);
	background-size: cover;
	background-position: center 42%;   /* 略偏上，人像/产品图的重心通常在上半部 */
	color: rgb(var(--jg-paper));
	overflow: hidden;
}

/* 压暗遮罩：图上压白字必须有它，否则浅色区域的字直接消失 */
.jg-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	/* 遮罩要够重。主站的图是产品特写，明暗对比强，
	   浅遮罩下白字会在浅色区域直接消失 —— 实测 .30 不够，抬到 .48/.62。 */
	background: linear-gradient(
		180deg,
		rgb(var(--jg-ink) / .48) 0%,
		rgb(var(--jg-ink) / .62) 100%
	);
}

/* 没有配图时退化成纯近黑底，不留一块空白 */
.jg-hero--plain { background-image: none; }
.jg-hero--plain::after { display: none; }

.jg-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	text-align: center;
}

.jg-hero__eyebrow {
	font-size: var(--jg-text-xs);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgb(var(--jg-paper) / .82);
	margin: 0 0 1.1em;
}

.jg-hero__title {
	color: rgb(var(--jg-paper));
	text-shadow: 0 1px 24px rgb(var(--jg-ink) / .45);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	line-height: 1.15;
	margin: 0 0 .7em;
}

.jg-hero__text {
	font-size: var(--jg-text-lg);
	line-height: 1.7;
	color: rgb(var(--jg-paper) / .92);
	text-shadow: 0 1px 16px rgb(var(--jg-ink) / .5);
	margin: 0 auto;
	max-width: 32rem;
}

/* ============================================================
   分类入口条 —— hero 之下的第二落点
   横向排布，窄屏可横滑，不换行挤成两排
   ============================================================ */
.jg-topics {
	border-bottom: 1px solid rgb(var(--jg-border-soft));
	margin-bottom: var(--jg-section-y);
}

.jg-topics__inner {
	display: flex;
	gap: 2.2rem;
	justify-content: center;
	flex-wrap: wrap;
	padding-block: 1.4rem;
}

.jg-topics__item {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	font-size: var(--jg-text-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgb(var(--jg-ink));
	padding-bottom: .35em;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.jg-topics__item:hover {
	opacity: 1;
	border-bottom-color: rgb(var(--jg-ink));
}

.jg-topics__count {
	font-size: 10px;
	color: rgb(var(--jg-muted));
	letter-spacing: .04em;
}

/* 窄屏：改成可横滑的一条，避免挤成参差两行 */
@media (max-width: 600px) {
	.jg-topics__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		gap: 1.6rem;
		padding-inline: var(--jg-gutter);
		scrollbar-width: none;
	}
	.jg-topics__inner::-webkit-scrollbar { display: none; }
	.jg-topics__item { flex: 0 0 auto; }
}