/* Progress block for the live campaign hero.
   Everything else (slide, overlay, caption, buttons) reuses the theme's
   existing .nacep-* styles, so only this block needs its own CSS. */
.bch-progress {
	margin: 18px 0 22px;
	max-width: 520px;
}

.bch-progress-track {
	background: rgba(255, 255, 255, .28);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.bch-progress-fill {
	background: #f7941e;
	border-radius: 999px;
	display: block;
	height: 100%;
	min-width: 3px;
	transition: width .6s ease;
}

.bch-progress-meta {
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	gap: 6px 18px;
	margin-top: 10px;
}

.bch-progress-meta strong {
	font-weight: 700;
}

.bch-progress-meta .bch-goal {
	opacity: .85;
}

/* ---- Tablet ---- */
@media (max-width: 991px) {
	/* The theme centres .banner-caption below 991px, so the progress block has to
	   centre with it instead of hugging the left edge. */
	.bch-progress {
		margin-left: auto;
		margin-right: auto;
	}

	.bch-progress-meta {
		justify-content: center;
	}
}

/* ---- Phone ---- */
@media (max-width: 767px) {
	.bch-progress {
		margin: 14px auto 16px;
	}

	.bch-progress-track {
		height: 8px;
	}

	.bch-progress-meta {
		font-size: 13px;
		gap: 2px 12px;
	}

	/* Campaign descriptions come from the donation platform and can be long.
	   Cap them so the copy never pushes the buttons off the slide. */
	.bch-hero .banner-caption p {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 0;
	}

	/* Both CTAs on one row: each takes half the width, so they sit left and right.
	   The theme's .nacep-btn is 66px tall with 32px padding and has no mobile
	   override, which is why they used to wrap and overflow the slide. */
	.bch-hero .nacep-btn-wrap {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		justify-content: center;
		padding-top: 12px;
	}

	.bch-hero .banner-caption .nacep-btn {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		line-height: 40px;
		padding: 0 10px;
		font-size: 11px;
		letter-spacing: 0.5px;
		white-space: nowrap;
		text-align: center;
	}

	/* The coloured shape is a 64px pseudo-element pill that only expands to full
	   width on :hover — which never fires on touch. Fill it at rest so phones get
	   a real button instead of a circle behind the text. */
	.bch-hero .banner-caption .nacep-btn:before,
	.bch-hero .banner-caption .nacep-btn:after {
		width: 100%;
		height: 100%;
		border-radius: 40px;
	}

	/* Elementor sets a fixed height at every breakpoint. Keep its value as the
	   MINIMUM on phones and let the slide grow with the content, so the buttons
	   can never end up underneath the following section.
	   (!important because Elementor's per-element selector is more specific than
	   anything this generic stylesheet can express.) */
	.bch-hero.nacep-swiper-slide.swiper-container {
		height: auto !important;
	}

	/* Arrows overlap the caption on small screens - the dots are enough there. */
	.bch-hero .swiper-button-prev,
	.bch-hero .swiper-button-next {
		display: none;
	}
}

/* Safety net: if Swiper never initialises (its JS blocked, addon renamed its
   classes), show only the first slide instead of stacking every slide down the
   page. Swiper v8 adds .swiper-initialized; older builds add
   .swiper-container-initialized. */
.bch-hero:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide:nth-child(n+2) {
	display: none;
}

/* ---- Very narrow phones ---- */
@media (max-width: 400px) {
	.bch-hero .banner-caption p {
		-webkit-line-clamp: 2;
	}

	.bch-hero .banner-caption .nacep-btn {
		font-size: 10px;
		padding: 0 6px;
		letter-spacing: 0;
	}
}