@charset "utf-8";
/**
 * home.css — 首页专用模板（home.php）脚手架样式
 * 仅负责首页专属区域（#ja-home-*）的基础排布，刻意保持极简，
 * 方便后续按设计稿重写。全站通用样式仍在 template.css / layout.css 中。
 */

/* 首页容器 */
.ja-home {
	padding-top: 15px;
	padding-bottom: 20px;
}

/* 横幅区 */
.ja-home-hero {
	margin: 0 0 15px 0;
}

.ja-home-hero .ja-moduletable {
	margin: 0;
}

/* 内容块堆叠区：多个首页模块实例自上而下全宽排列 */
.ja-home-sections {
	margin: 0 0 15px 0;
}

.ja-home-sections .hblk:last-child {
	margin-bottom: 0;
}

/* 中部栅格：默认四列，窄屏见响应式覆盖 */
.ja-home-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 0 0 15px 0;
}

.ja-home-grid .ja-home-cell {
	flex: 1 1 0;
	min-width: 0;
}

/* 实际只有 1~3 个位置时自动收窄，避免单元格被拉得过宽 */
.ja-home-grid.cols-1 .ja-home-cell { flex: 0 0 100%; }
.ja-home-grid.cols-2 .ja-home-cell { flex: 0 0 calc(50% - 8px); }
.ja-home-grid.cols-3 .ja-home-cell { flex: 0 0 calc(33.333% - 10px); }

/* 组件输出区（featured 文章列表） */
.ja-home-component {
	margin: 0 0 15px 0;
}

/* 首页底部区 */
.ja-home-bottom {
	margin: 0;
}

/* ===== 平板：两列 ===== */
@media (max-width: 768px) {
	.ja-home-grid.cols-3 .ja-home-cell,
	.ja-home-grid.cols-4 .ja-home-cell {
		flex: 0 0 calc(50% - 8px);
	}
}

/* ===== 手机：单列 ===== */
@media (max-width: 590px) {
	.ja-home-grid,
	.ja-home-grid.cols-2 .ja-home-cell,
	.ja-home-grid.cols-3 .ja-home-cell,
	.ja-home-grid.cols-4 .ja-home-cell {
		display: block;
	}

	.ja-home-grid .ja-home-cell {
		margin-bottom: 12px;
	}
}