/* ==========================================================================
 * HBC Team Member — 团队成员卡
 *
 * 结构:
 *   .hbc-team-member
 *     └ .hbc-team-member__media (按形状切 border-radius)
 *         └ .hbc-team-member__photo / Elementor 的 <img>
 *     └ .hbc-team-member__name
 *     └ .hbc-team-member__role
 *
 * 形状由 prefix_class hbc-team-member-shape-* 切换:
 *   - circle  : 完美圆形(50%)
 *   - rounded : 圆角方形(默认 16px,可调)
 *   - square  : 直角方形
 * ========================================================================== */

.hbc-team-member {
	display: block;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hbc-team-member * {
	box-sizing: border-box;
}

a.hbc-team-member--linked {
	cursor: pointer;
}

/* ----- 头像容器 ----- */
.hbc-team-member__media {
	width: 280px;
	max-width: 100%;
	aspect-ratio: 1 / 1;     /* 强制 1:1 长宽比,圆/方形都基于这个 */
	overflow: hidden;
	position: relative;
	background-color: #F4F4F4;
	display: block;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 让 Elementor 输出的 <img> 完美填充媒体框 */
.hbc-team-member__media img,
.hbc-team-member__photo {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

/* 对齐:text-align 由 Elementor 控件输出在 .hbc-team-member 上,
 * media 是 inline-block 让 text-align 也能控制其位置。 */
.hbc-team-member__media {
	display: inline-block;
	vertical-align: top;
}

/* ==========================================================================
 *  形状切换
 * ========================================================================== */
.hbc-team-member-shape-circle .hbc-team-member__media {
	border-radius: 50%;
}

.hbc-team-member-shape-rounded .hbc-team-member__media {
	border-radius: 16px;
}

.hbc-team-member-shape-square .hbc-team-member__media {
	border-radius: 0;
}

/* ==========================================================================
 *  悬停效果(prefix_class hbc-team-member-hover-*)
 * ========================================================================== */
.hbc-team-member-hover-zoom .hbc-team-member__media:hover img,
.hbc-team-member-hover-zoom:hover .hbc-team-member__media img {
	transform: scale(1.06);
}

.hbc-team-member-hover-lift:hover {
	transform: translateY(-6px);
}

.hbc-team-member-hover-lift:hover .hbc-team-member__media {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
 *  文字
 * ========================================================================== */
.hbc-team-member__name {
	margin: 0 0 4px;
	color: #EE6B2D;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	word-wrap: break-word;
}

.hbc-team-member__role {
	margin: 0;
	color: #333333;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	word-wrap: break-word;
}

/* ==========================================================================
 *  键盘焦点轮廓(整卡链接时)
 * ========================================================================== */
a.hbc-team-member--linked:focus-visible {
	outline: 3px solid #EE6B2D;
	outline-offset: 4px;
	border-radius: 6px;
}

/* ==========================================================================
 *  减少动效偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hbc-team-member,
	.hbc-team-member__media,
	.hbc-team-member__photo,
	.hbc-team-member__media img {
		transition: none;
	}
	.hbc-team-member-hover-lift:hover {
		transform: none;
	}
	.hbc-team-member-hover-zoom .hbc-team-member__media:hover img {
		transform: none;
	}
}