/* ==========================================================================
 * HBC Stripe Banner — 条纹按钮横幅
 *
 * 结构:
 *   <div.hbc-sb-wrap>
 *     <div.hbc-sb>                    (按钮 + 条纹 整体容器)
 *       [<a.hbc-sb__link>]            (可选链接外层)
 *         <span.hbc-sb__button>       (按钮视觉容器，使用 <span>)
 *           <span.hbc-sb__button-inner>
 *             <span.hbc-sb__button-text>按钮文字</span>
 *             <span.hbc-sb__button-arrow>▶</span>
 *           </span>
 *         </span>
 *       [</a>]
 *       <div.hbc-sb__stripes>
 *         <span.hbc-sb__stripe></span>  (颜色/高度/上间距由 inline-style 注入)
 *         <span.hbc-sb__stripe></span>
 *       </div>
 *     </div>
 *   </div>
 * ========================================================================== */

/* ==========================================================================
 *  外层包装
 * ========================================================================== */
.hbc-sb-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.hbc-sb-wrap * {
	box-sizing: border-box;
}

/* ==========================================================================
 *  主容器（按钮 + 条纹）
 * ========================================================================== */
.hbc-sb {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
 *  链接外层（如有）— 强力重置，避免主题默认 a 样式干扰
 * ========================================================================== */
.hbc-sb__link,
.hbc-sb__link:link,
.hbc-sb__link:visited,
.hbc-sb__link:hover,
.hbc-sb__link:focus,
.hbc-sb__link:focus-visible,
.hbc-sb__link:active {
	display: block;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.hbc-sb__link * {
	text-decoration: none;
}

/* ==========================================================================
 *  按钮视觉容器（span 标签）
 * ========================================================================== */
.hbc-sb__button {
	display: block;
	width: 100%;
	min-height: 80px;
	padding: 24px 32px;
	background-color: #3F1D5C;
	transition: background-color 0.2s ease;
	cursor: inherit;
}

/* 有链接时按钮显示手型 */
.hbc-sb__link .hbc-sb__button {
	cursor: pointer;
}

.hbc-sb__link:hover .hbc-sb__button {
	background-color: #4D2570;
}

/* ==========================================================================
 *  按钮内层（控制文字+箭头的对齐与间距）
 * ========================================================================== */
.hbc-sb__button-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

/* ==========================================================================
 *  按钮文字
 * ========================================================================== */
.hbc-sb__button-text {
	display: inline-block;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	transition: color 0.2s ease;
}

/* ==========================================================================
 *  箭头（使用内联 SVG，颜色 = currentColor，尺寸 = font-size 控制）
 * ========================================================================== */
.hbc-sb__button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 0.85em;
	line-height: 1;
	flex-shrink: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
}

.hbc-sb__button-arrow svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ==========================================================================
 *  条纹列表
 * ========================================================================== */
.hbc-sb__stripes {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hbc-sb__stripe {
	display: block;
	width: 100%;
	height: 8px;
	/* 颜色 / 高度 / 上间距由 inline-style 控制 */
}

/* 当条纹设置为铺满全宽时，条纹脱离按钮宽度 */
.hbc-sb-wrap--full-stripes {
	align-items: stretch;
}

.hbc-sb-wrap--full-stripes .hbc-sb {
	max-width: 100%;
	width: 100%;
}

.hbc-sb-wrap--full-stripes .hbc-sb__stripes {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ==========================================================================
 *  响应式
 * ========================================================================== */
@media ( max-width: 767px ) {
	.hbc-sb__button {
		min-height: 60px;
		padding: 16px 20px;
	}

	.hbc-sb__button-text {
		font-size: 18px;
	}
}

/* ==========================================================================
 *  Elementor 编辑器中防止链接劫持点击
 * ========================================================================== */
.elementor-editor-active .hbc-sb__link {
	pointer-events: none;
}