/* ==========================================================================
 * HBC Feature Cards — 功能卡片网格
 *
 * 结构:
 *   .hbc-fc
 *     └ .hbc-fc__list                      (CSS Grid,grid-template-columns 由控件设置)
 *         └ .hbc-fc__card                  (卡片本体,可被 <a> 化为整卡链接)
 *             ├ .hbc-fc__media-wrap        (flex 行容器,控制图片在卡片中的水平对齐)
 *             │   └ .hbc-fc__media         (图片框,设高度/宽度/边框/圆角/阴影)
 *             │       └ .hbc-fc__img       (<img>,object-fit/object-position 设封面)
 *             ├ .hbc-fc__title             (标题,标签由控件决定 h2~div)
 *             └ .hbc-fc__body              (正文)
 *
 * 悬停放大由 wrapper 上的 prefix_class .hbc-fc-zoom-yes 触发,
 * 倍数 / 时长由 selectors 直接写在 inline CSS 上覆盖默认值。
 * ========================================================================== */

.hbc-fc {
	width: 100%;
	box-sizing: border-box;
}

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

/* ----- 列表(Grid) ----- */
.hbc-fc__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	justify-content: center;       /* 当 max-width < 100% 时,卡片组居中 */
	align-items: stretch;
}

/* ----- 卡片 ----- */
.hbc-fc__card {
	display: flex;                  /* 让标题/正文等垂直规整 */
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	min-width: 0;          /* 防止子图片让网格列溢出 */
}

/* 「统一标题/正文行高位置」开关:让每张卡片的内容区按相同位置规则排列 */
.hbc-fc-equalize-yes .hbc-fc__card {
	justify-content: flex-start;
}
.hbc-fc-equalize-yes .hbc-fc__title {
	flex: 0 0 auto;
}
.hbc-fc-equalize-yes .hbc-fc__body {
	flex: 1 1 auto;                /* 正文向下扩展,卡片底边对齐 */
}

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

a.hbc-fc__card--linked:hover {
	text-decoration: none;
}

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

/* ----- 图片包裹层(用于 image_align: 当图片宽度 < 100% 时控制水平对齐) ----- */
.hbc-fc__media-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ----- 图片框(可上 border / radius / shadow) ----- */
.hbc-fc__media {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 240px;
	border-style: solid;
	border-width: 4px;
	border-color: #3D1B6B;
	background-color: #ffffff;
	position: relative;
	flex-shrink: 0;        /* 配合 wrap 的 flex,防止压缩 */
}

/* 图片本体:用 !important 是为了压制 wp_get_attachment_image 输出的 width/height 属性 */
.hbc-fc__media img,
.hbc-fc__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center center;
	transition: transform 400ms ease;
	will-change: transform;
}

/* ----- 标题 ----- */
.hbc-fc__title {
	margin: 20px 0 12px;
	color: #3D1B6B;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	word-wrap: break-word;
}

a.hbc-fc__card--linked .hbc-fc__title {
	color: inherit;
}

/* ----- 正文 ----- */
.hbc-fc__body {
	margin: 0;
	color: #1D0F36;
	font-size: 14px;
	line-height: 1.6;
	word-wrap: break-word;
}

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

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

a.hbc-fc__card--linked .hbc-fc__body {
	color: inherit;
}

/* ==========================================================================
 *  悬停放大 — 通过 wrapper 上的 .hbc-fc-zoom-yes 触发
 * ========================================================================== */
.hbc-fc-zoom-yes .hbc-fc__card:hover .hbc-fc__img,
.hbc-fc-zoom-yes .hbc-fc__card:hover .hbc-fc__media img {
	transform: scale(1.06);
}

/* ==========================================================================
 *  减少动效偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hbc-fc__img,
	.hbc-fc__media img {
		transition: none;
	}
	.hbc-fc-zoom-yes .hbc-fc__card:hover .hbc-fc__img,
	.hbc-fc-zoom-yes .hbc-fc__card:hover .hbc-fc__media img {
		transform: none;
	}
}

/* ==========================================================================
 *  Elementor 编辑器内提示:占位媒体保持灰色,避免看不见
 * ========================================================================== */
.hbc-fc__media:empty {
	background-color: #f5f5f5;
}