/* ==========================================================================
 * HBC Team Grid — 团队网格
 *
 * 结构:
 *   .hbc-tg                         (CSS Grid 容器)
 *     └ .hbc-tg__item               (每位成员; 有链接时为 <a>,否则 <div>)
 *         ├ .hbc-tg__photo-wrap     (圆形图片容器)
 *         │   └ .hbc-tg__photo      (<img>)
 *         └ .hbc-tg__info
 *             ├ .hbc-tg__name       (<hN>)
 *             └ .hbc-tg__role       (<p>)
 * ========================================================================== */

/* ── 网格容器 ──────────────────────────────────────────────────────────── */
.hbc-tg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 48px;
	width: 100%;
	box-sizing: border-box;
}

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

/* ── 成员卡 ────────────────────────────────────────────────────────────── */
.hbc-tg__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

a.hbc-tg__item--linked {
	cursor: pointer;
}

a.hbc-tg__item--linked:focus-visible {
	outline: 3px solid #A8D400;
	outline-offset: 4px;
	border-radius: 4px;
}

/* ── 圆形图片容器 ──────────────────────────────────────────────────────── */
.hbc-tg__photo-wrap {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #A8D400;
	flex-shrink: 0;
	margin-bottom: 16px;
}

.hbc-tg__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

/* 悬停放大 */
.hbc-tg__photo-wrap--zoom:hover .hbc-tg__photo,
.hbc-tg__item--linked:hover .hbc-tg__photo-wrap--zoom .hbc-tg__photo {
	transform: scale(1.06);
}

/* ── 文字区 ────────────────────────────────────────────────────────────── */
.hbc-tg__info {
	width: 100%;
}

/* ── 姓名 ──────────────────────────────────────────────────────────────── */
.hbc-tg__name {
	margin: 0 0 4px;
	color: #1D0F36;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	word-wrap: break-word;
}

/* ── 职位 ──────────────────────────────────────────────────────────────── */
.hbc-tg__role {
	margin: 0;
	color: #555555;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	word-wrap: break-word;
}

/* ==========================================================================
 *  item 对齐（由 Elementor selectors 驱动 text-align,
 *  flex align-items 跟随 text-align 切换）
 * ========================================================================== */
.hbc-tg__item[style*="text-align: left"],
.hbc-tg__item[style*="text-align:left"] {
	align-items: flex-start;
}

.hbc-tg__item[style*="text-align: right"],
.hbc-tg__item[style*="text-align:right"] {
	align-items: flex-end;
}

/* ==========================================================================
 *  响应式
 * ========================================================================== */
@media (max-width: 1024px) {
	.hbc-tg {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 28px;
		row-gap: 36px;
	}

	.hbc-tg__photo-wrap {
		width: 180px;
		height: 180px;
	}
}

@media (max-width: 767px) {
	.hbc-tg {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.hbc-tg__photo-wrap {
		width: 200px;
		height: 200px;
	}
}

/* ==========================================================================
 *  编辑器空白占位
 * ========================================================================== */
.elementor-editor-active .hbc-tg:empty::before {
	content: '团队网格 — 请在左侧面板「成员列表」中添加成员';
	display: block;
	padding: 40px;
	text-align: center;
	color: rgba(0, 0, 0, 0.3);
	font-size: 13px;
	font-style: italic;
	border: 2px dashed rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
 *  减动效偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hbc-tg__photo {
		transition: none;
	}

	.hbc-tg__photo-wrap--zoom:hover .hbc-tg__photo,
	.hbc-tg__item--linked:hover .hbc-tg__photo-wrap--zoom .hbc-tg__photo {
		transform: none;
	}
}