/**
 * Framebrand CTA widget styles.
 *
 * Defaults are the Figma values ("CTA" node 2234:44496):
 * 1920 x 380 section, 56px side padding, a #260D40 panel with 80/56 padding,
 * 32px between heading and subheading, 40px before the button, and a
 * #8069F0 button at 30/40 padding with an 8.75px radius.
 */

.fb-cta {
	--fb-cta-bg: #ffffff;
	--fb-cta-pad: 0 56px;

	--fb-cta-panel-bg: #260d40;
	--fb-cta-panel-pad: 80px 56px;
	--fb-cta-panel-radius: 0px;
	--fb-cta-panel-gap: 40px;

	--fb-cta-title-color: #ffffff;
	--fb-cta-sub-color: #ffffff;
	--fb-cta-sub-max-w: 890px;
	--fb-cta-text-gap: 32px;
	--fb-cta-trim: trim-both;

	--fb-cta-btn-bg: #8069f0;
	--fb-cta-btn-bg-hover: #6e58e0;
	--fb-cta-btn-color: #ffffff;
	--fb-cta-btn-color-hover: #ffffff;
	--fb-cta-btn-pad: 30px 40px;
	--fb-cta-btn-radius: 8.75px;

	/* This site's <body> is 24px/36px/0.48px; isolate so nothing inherits it. */
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;

	background: var(--fb-cta-bg);
	padding: var(--fb-cta-pad);
	box-sizing: border-box;
	width: 100%;
}

.fb-cta *,
.fb-cta *::before,
.fb-cta *::after {
	box-sizing: border-box;
}

.fb-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fb-cta-panel-gap);
	width: 100%;
	padding: var(--fb-cta-panel-pad);
	border-radius: var(--fb-cta-panel-radius);
	background: var(--fb-cta-panel-bg);
}

.fb-cta__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fb-cta-text-gap);
	width: 100%;
	text-align: center;
}

/* Qualified with the element so theme/kit heading and paragraph rules,
   which land at (0,1,1), cannot win over these. */
.fb-cta .fb-cta__title {
	margin: 0;
	padding: 0;
	color: var(--fb-cta-title-color);
	/* Matches the design's trimmed text box: cap-top to baseline, no leading. */
	text-box-trim: var(--fb-cta-trim);
	text-box-edge: cap alphabetic;
}

.fb-cta p.fb-cta__sub {
	margin: 0;
	padding: 0;
	max-width: var(--fb-cta-sub-max-w);
	color: var(--fb-cta-sub-color);
	text-box-trim: var(--fb-cta-trim);
	text-box-edge: cap alphabetic;
}

.fb-cta a.fb-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--fb-cta-btn-pad);
	border-radius: var(--fb-cta-btn-radius);
	background: var(--fb-cta-btn-bg);
	color: var(--fb-cta-btn-color);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fb-cta a.fb-cta__button:hover,
.fb-cta a.fb-cta__button:focus-visible {
	background: var(--fb-cta-btn-bg-hover);
	color: var(--fb-cta-btn-color-hover);
}

/* --- Below 1024px -------------------------------------------------------- */

@media (max-width: 1024px) {
	.fb-cta a.fb-cta__button {
		white-space: normal;
		overflow-wrap: break-word;
	}
}

@media (max-width: 767px) {
	.fb-cta__text,
	.fb-cta p.fb-cta__sub {
		max-width: 100%;
	}

	.fb-cta a.fb-cta__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-cta *,
	.fb-cta *::before,
	.fb-cta *::after {
		transition-duration: 0.01ms !important;
	}
}