/* ==========================================================================
 * HBC Headline Mosaic — 标题 + 文字块 + 图片网格(2x2)
 *
 * 结构(桌面):
 *   .hbc-hm                       根容器
 *     ├─ .hbc-hm__heading-row     顶部标题行(可关)
 *     │    └─ .hbc-hm__heading-inner > .hbc-hm__heading
 *     └─ .hbc-hm__body-row        下方图文行
 *          └─ .hbc-hm__body-inner (CSS Grid: 2 列)
 *               ├─ .hbc-hm__text   左:紫底 + 角标 + 正文
 *               └─ .hbc-hm__grid   右:N 列图片网格
 *
 * 控件 → CSS 变量:
 *   --hbc-hm-row-gap   标题行与图文行之间的纵向间距
 *   --hbc-hm-text-col  桌面下文字块占的列宽(%)
 *   --hbc-hm-col-gap   文字块和图片网格之间的水平间距
 * ========================================================================== */

.hbc-hm {
	--hbc-hm-row-gap: 40px;
	--hbc-hm-text-col: 50%;
	--hbc-hm-col-gap: 24px;
	--hbc-hm-img-h: 180px;
	--hbc-hm-img-ar: 1 / 1;

	display: flex;
	flex-direction: column;
	gap: var(--hbc-hm-row-gap);
	width: 100%;
	box-sizing: border-box;
	background-color: #FFFFFF;
}

.hbc-hm * {
	box-sizing: border-box;
}

/* ----- 顶部标题行 ----- */
.hbc-hm__heading-row {
	width: 100%;
}

.hbc-hm__heading-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 80px;
}

.hbc-hm__heading {
	margin: 0;
	color: #3D1B6B;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.5px;
}

.hbc-hm__heading a {
	color: inherit;
	text-decoration: none;
}

.hbc-hm__heading a:hover,
.hbc-hm__heading a:focus {
	text-decoration: underline;
}

/* ----- 下方图文行 ----- */
.hbc-hm__body-row {
	width: 100%;
}

.hbc-hm__body-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--hbc-hm-text-col) 1fr;
	gap: var(--hbc-hm-col-gap);
	align-items: stretch;
}

/* 文字在右:翻转列顺序 */
.hbc-hm--text-right .hbc-hm__body-inner {
	grid-template-columns: 1fr var(--hbc-hm-text-col);
}

.hbc-hm--text-right .hbc-hm__text  { order: 2; }
.hbc-hm--text-right .hbc-hm__grid  { order: 1; }

/* ----- 文字块(紫色块) -----
 * display:flex + 默认 justify-content:flex-start
 * body 不再 flex-grow,让 body_v_align 控件 (顶/中/底/分布) 真正生效 */
.hbc-hm__text {
	background-color: #3D1B6B;
	color: #FFFFFF;
	padding: 48px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hbc-hm__eyebrow-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
	flex-shrink: 0;
}

.hbc-hm__eyebrow {
	color: #F4D300;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

.hbc-hm__body {
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.7;
	flex: 0 0 auto;
}

.hbc-hm__body p {
	margin: 0 0 1em;
	color: inherit;
}

.hbc-hm__body p:last-child {
	margin-bottom: 0;
}

.hbc-hm__body :is(a) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----- 图片网格 ----- */
.hbc-hm__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-content: stretch;
}

/* 默认:固定高度模式(由 PHP image_size_mode 默认值匹配)
 * 模式切换由 Elementor wrapper 类 .hbc-hm-mode-* 接管 */
.hbc-hm__cell {
	display: block;
	overflow: hidden;
	height: var(--hbc-hm-img-h, 180px);
	background-color: #f5f5f5;
	text-decoration: none;
	color: inherit;
	position: relative;
}

/* 模式 1:固定像素高度 — 用 CSS 变量 --hbc-hm-img-h */
.hbc-hm-mode-fixed_height .hbc-hm__cell {
	height: var(--hbc-hm-img-h, 180px);
	aspect-ratio: auto;
}

/* 模式 2:按宽高比 — 用 CSS 变量 --hbc-hm-img-ar */
.hbc-hm-mode-aspect_ratio .hbc-hm__cell {
	aspect-ratio: var(--hbc-hm-img-ar, 1 / 1);
	height: auto;
}

/* 模式 3:自然高度 — 单元格只裹住图片,不强制尺寸 */
.hbc-hm-mode-auto .hbc-hm__cell {
	height: auto;
	aspect-ratio: auto;
}
.hbc-hm-mode-auto .hbc-hm__img {
	height: auto;
}

.hbc-hm__cell--link:focus-visible {
	outline: 3px solid #F4D300;
	outline-offset: 2px;
}

.hbc-hm__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* 悬停放大开关 */
.hbc-hm--zoom-on .hbc-hm__cell:hover .hbc-hm__img,
.hbc-hm--zoom-on .hbc-hm__cell:focus-within .hbc-hm__img {
	transform: scale(1.05);
}

/* ==========================================================================
 *  响应式
 * ========================================================================== */

/* 平板 */
@media (max-width: 1024px) {
	.hbc-hm__heading-inner {
		padding: 40px;
	}
	.hbc-hm__heading {
		font-size: 48px;
	}
	.hbc-hm__text {
		padding: 36px;
	}
}

/* 手机:堆叠 */
@media (max-width: 767px) {
	.hbc-hm {
		--hbc-hm-row-gap: 24px;
	}
	.hbc-hm__heading-inner {
		padding: 32px 24px 24px;
	}
	.hbc-hm__heading {
		font-size: 36px;
	}
	.hbc-hm__body-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hbc-hm--text-right .hbc-hm__body-inner {
		grid-template-columns: 1fr;
	}
	/* 手机端顺序由根类控制 */
	.hbc-hm--mobile-text_first .hbc-hm__text { order: 1; }
	.hbc-hm--mobile-text_first .hbc-hm__grid { order: 2; }
	.hbc-hm--mobile-grid_first .hbc-hm__text { order: 2; }
	.hbc-hm--mobile-grid_first .hbc-hm__grid { order: 1; }

	.hbc-hm__text {
		padding: 28px 24px;
	}
	.hbc-hm__grid {
		gap: 8px;
	}
}

/* ==========================================================================
 *  Elementor 编辑器内提示:占位图保持灰色,避免空 cell 看不见
 * ========================================================================== */
.hbc-hm__cell:empty {
	min-height: 120px;
}