/* ==========================================================================
 * HBC Team Overview — 团队总览(图文+彩条)
 *
 * 结构:
 *   .hbc-team-overview [.hbc-team-overview--image-{left,right}]
 *                      [.hbc-team-overview--mobile-{text_first,image_first}]
 *                      [.hbc-team-overview--bars{-,-tablet-,-mobile-}{left,center,right}]
 *     ├ .hbc-team-overview__top                (两列网格:文字列 / 图片列)
 *     │   ├ .hbc-team-overview__col-text       (单列堆叠:卡片 + 段落)
 *     │   │   ├ .hbc-team-overview__card       (紫色卡片)
 *     │   │   │   ├ .hbc-team-overview__title  (标题,白)
 *     │   │   │   └ .hbc-team-overview__intro  (引言,浅紫白)
 *     │   │   └ .hbc-team-overview__below      (卡片下方区域)
 *     │   │       └ .hbc-team-overview__desc   (描述段落,深紫文字)
 *     │   └ .hbc-team-overview__media          (图片容器,grid item)
 *     │       └ .hbc-team-overview__image
 *     └ .hbc-team-overview__bars               (底部彩条容器)
 *         └ .hbc-team-overview__bar (× N)
 *
 * 关键 CSS 变量:
 *   --hbc-to-image-w   图片列宽
 *   --hbc-to-col-gap   两列之间间距
 *
 * 视觉关键点:
 *   - 紫色卡片只占文字列上半部分,下面留白后接深紫色描述段落
 *   - 图片列高度 > 卡片高度 → 图片自然延伸到卡片下方
 *   - 彩条对齐由 prefix_class hbc-team-overview--bars-{align} 驱动,
 *     宽度由 PHP selectors 输出在 .hbc-team-overview__bars 上
 *   - 图片容器 .hbc-team-overview__media 是 grid 子项,
 *     justify-self / align-self 由 PHP 控件控制
 * ========================================================================== */

.hbc-team-overview {
	--hbc-to-image-w: 42%;
	--hbc-to-col-gap: 24px;
	--hbc-to-card-w: 100%;
	--hbc-to-card-extend: 0px;

	display: block;
	width: 100%;
	box-sizing: border-box;
}

.hbc-team-overview *,
.hbc-team-overview *::before,
.hbc-team-overview *::after {
	box-sizing: border-box;
}

/* ==========================================================================
 *  顶部两列布局
 * ========================================================================== */
.hbc-team-overview__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--hbc-to-image-w));
	gap: var(--hbc-to-col-gap);
	align-items: start;
}

/* 图片在右(默认) */
.hbc-team-overview--image-right .hbc-team-overview__top {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--hbc-to-image-w));
}

.hbc-team-overview--image-right .hbc-team-overview__col-text { order: 1; }
.hbc-team-overview--image-right .hbc-team-overview__media    { order: 2; }

/* 图片在左 */
.hbc-team-overview--image-left .hbc-team-overview__top {
	grid-template-columns: minmax(0, var(--hbc-to-image-w)) minmax(0, 1fr);
}

.hbc-team-overview--image-left .hbc-team-overview__col-text { order: 2; }
.hbc-team-overview--image-left .hbc-team-overview__media    { order: 1; }

/* ==========================================================================
 *  文字列(纵向堆叠:卡片 + 段落)
 * ========================================================================== */
.hbc-team-overview__col-text {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	overflow: visible;            /* 允许 card 越过列边界向图片方向延伸 */
	position: relative;
	z-index: 2;                   /* 浮在图片上方 */
}

/* 紫色卡片宽度 = 卡片宽度控件值 + 延伸值
   方向取决于图片在左还是在右 */
.hbc-team-overview__card {
	width: calc(var(--hbc-to-card-w, 100%) + var(--hbc-to-card-extend, 0px));
	max-width: none;
}

.hbc-team-overview--image-left .hbc-team-overview__card {
	margin-left: calc(0px - var(--hbc-to-card-extend, 0px));
}

/* ==========================================================================
 *  紫色卡片
 * ========================================================================== */
.hbc-team-overview__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 56px;
	background-color: #4F2C7E;
	color: #FFFFFF;
}

.hbc-team-overview__title {
	margin: 0;
	color: #FFFFFF;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
}

.hbc-team-overview__intro {
	margin: 0;
	color: #E9DFF5;
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
 *  卡片下方段落
 * ========================================================================== */
.hbc-team-overview__below {
	min-width: 0;
}

.hbc-team-overview__desc {
	margin: 0;
	color: #4F2C7E;
	font-size: 15px;
	line-height: 1.65;
}

/* ==========================================================================
 *  图片列
 * ========================================================================== */
.hbc-team-overview__media {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
	min-width: 0;
	background-color: #E2E2E2;
}

/* 「图片高度跟随文字列」开关:让图片自动等于左侧文字列高度 */
.hbc-to-stretch-media-yes .hbc-team-overview__top {
	align-items: stretch;
}
.hbc-to-stretch-media-yes .hbc-team-overview__media {
	height: auto;
	min-height: 100%;
	align-self: stretch;
}

.hbc-team-overview__image-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.hbc-team-overview__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
 *  底部彩条
 * ========================================================================== */
.hbc-team-overview__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 60%;
	margin-top: 32px;
	pointer-events: none;
}

.hbc-team-overview__bar {
	display: block;
	width: 100%;
	height: 22px;
	/* background-color & height 由 PHP inline style 注入 */
}

/* 彩条水平对齐 — 由 prefix_class 驱动
   .hbc-team-overview__bars 是块级元素,通过 margin-left/right: auto 实现对齐 */
.hbc-team-overview--bars-left .hbc-team-overview__bars {
	margin-left: 0;
	margin-right: auto;
}

.hbc-team-overview--bars-center .hbc-team-overview__bars {
	margin-left: auto;
	margin-right: auto;
}

.hbc-team-overview--bars-right .hbc-team-overview__bars {
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
 *  响应式 — 平板及以下堆叠为单列
 * ========================================================================== */
@media (max-width: 1024px) {
	.hbc-team-overview__top {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}

	/* 手机端顺序:图片在上(默认) */
	.hbc-team-overview--mobile-image_first .hbc-team-overview__col-text { order: 2; }
	.hbc-team-overview--mobile-image_first .hbc-team-overview__media    { order: 1; }

	/* 手机端顺序:文字在上 */
	.hbc-team-overview--mobile-text_first .hbc-team-overview__col-text { order: 1; }
	.hbc-team-overview--mobile-text_first .hbc-team-overview__media    { order: 2; }

	.hbc-team-overview__media {
		height: 400px;
	}

	.hbc-team-overview__card {
		padding: 40px 32px;
	}

	.hbc-team-overview__title {
		font-size: 30px;
	}

	/* 平板:彩条对齐(prefix_class hbc-team-overview--bars-tablet-{align}) */
	.hbc-team-overview--bars-tablet-left .hbc-team-overview__bars {
		margin-left: 0;
		margin-right: auto;
	}
	.hbc-team-overview--bars-tablet-center .hbc-team-overview__bars {
		margin-left: auto;
		margin-right: auto;
	}
	.hbc-team-overview--bars-tablet-right .hbc-team-overview__bars {
		margin-left: auto;
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	.hbc-team-overview__media {
		height: 320px;
	}

	.hbc-team-overview__card {
		padding: 32px 24px;
	}

	.hbc-team-overview__title {
		font-size: 24px;
	}

	/* 手机:彩条对齐(prefix_class hbc-team-overview--bars-mobile-{align}) */
	.hbc-team-overview--bars-mobile-left .hbc-team-overview__bars {
		margin-left: 0;
		margin-right: auto;
	}
	.hbc-team-overview--bars-mobile-center .hbc-team-overview__bars {
		margin-left: auto;
		margin-right: auto;
	}
	.hbc-team-overview--bars-mobile-right .hbc-team-overview__bars {
		margin-left: auto;
		margin-right: 0;
	}
}

/* ==========================================================================
 *  编辑器空白占位
 * ========================================================================== */
.elementor-editor-active .hbc-team-overview__card:empty::before {
	content: '团队总览 — 请在左侧面板填写标题与引言';
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}