/* ============================================================
   CTA band widget

   Text on the left, one button on the right, stacking to centred on narrow
   screens. The tinted surface is what separates it from the section above —
   this is always the last band on a page, so it has no border-bottom.
   ============================================================ */

.hs-cta {
	background: var(--hs-card);
	border-top: 1px solid var(--hs-line);
}

.hs-cta__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

/*
 * minmax(0,…) equivalent for flex: `flex: 1 1 420px` alone lets a long unbroken
 * word push the button off the row and widen the page. min-width:0 is what makes
 * the text column actually shrinkable.
 */
.hs-cta__text {
	flex: 1 1 420px;
	min-width: 0;
}

.hs-cta__title {
	font-size: clamp( 22px, 3vw, 30px );
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

.hs-cta__lead {
	color: var(--hs-muted);
	margin: 10px 0 0;
	max-width: 60ch;
}

.hs-cta__acts {
	flex: 0 0 auto;
}

/*
 * The button must not shrink below a tappable size, and `white-space: nowrap`
 * keeps a two-word Vietnamese label like "Nhận tư vấn" on one line — wrapped,
 * the pill shape reads as a broken box.
 */
.hs-cta__acts .hs-btn {
	white-space: nowrap;
	min-height: 44px;
}

@media (max-width: 720px) {
	/*
	 * No root padding here either — the responsive step comes from
	 * `.hs-section--tight`, which this widget selects via $hs_pad_default.
	 */

	.hs-cta__in {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	/*
	 * Full width on a phone. A right-aligned pill next to left-aligned text
	 * reads as unrelated to it once they are stacked.
	 */
	.hs-cta__acts,
	.hs-cta__acts .hs-btn {
		width: 100%;
		text-align: center;
	}
}