/* ==========================================================================
   Widget — Bottom CTA (Banner)
   Figma node 57:25. Mobile-first: copy over button, then side by side from
   900px up.
   ========================================================================== */

.o-bottom-cta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--o-space-lg);
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Copy column
   The shared heading block is centred and width-limited for a normal section
   heading; in a band it fills its column and the spacing below it belongs to
   the flex gap.
   -------------------------------------------------------------------------- */
.o-bottom-cta__text {
	min-width: 0;
}

.o-section--bottom-cta .o-section-heading {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
}

.o-section--bottom-cta .o-section-heading__title {
	margin-top: 0;
	font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); /* 28 -> 48, per the comp */
	font-weight: var(--o-fw-bold);
	line-height: 1.083; /* 52 on 48 */
	text-transform: uppercase;
	text-wrap: balance;
}

/* Space under the eyebrow - only when there is one, so a bare heading stays flush. */
.o-section--bottom-cta .o-eyebrow + .o-section-heading__title {
	margin-top: var(--o-space-md); /* 20 */
}

.o-section--bottom-cta .o-section-heading__intro {
	margin-top: var(--o-space-md);
	font-size: var(--o-fs-body-lg);
	line-height: 1.45; /* 26 on 18 */
}

/*
 * Copy width. The comp breaks the body copy over two lines well short of the
 * button, which is what the default measure reproduces.
 */
.o-bottom-cta--copy-measure .o-bottom-cta__text {
	max-width: 44rem;
}

.o-bottom-cta--copy-half .o-bottom-cta__text {
	max-width: 50%;
}

/* --------------------------------------------------------------------------
   Button
   The shared .o-btn at the comp's larger label size.
   -------------------------------------------------------------------------- */
.o-bottom-cta__actions {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.o-bottom-cta__btn {
	font-size: var(--o-fs-body-lg);
	letter-spacing: 0.025em; /* 0.45px at 18px */
}

/*
 * The signup form in place of the button (.o-signup, gravity-forms.css).
 * Beside the copy it takes up to 32rem and gives way first; stacked or
 * centred it runs at the signup's own width.
 */
.o-bottom-cta__actions--form {
	flex: 0 1 32rem;
	width: 100%;
	min-width: 0;
}

.o-bottom-cta--stacked .o-bottom-cta__actions--form,
.o-bottom-cta--centered .o-bottom-cta__actions--form {
	flex: 0 0 auto;
	width: min(100%, 40rem);
}

.o-bottom-cta__actions--form .o-signup {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Centred
   Figma 179:578, "Stay in the Loop": heading, copy and action stacked down
   the middle. The selector is long on purpose - it has to out-rank the CSS
   Elementor writes for the Heading alignment control, whatever that is set
   to, because a left-aligned heading over a centred form reads as a mistake.
   -------------------------------------------------------------------------- */
.o-bottom-cta--centered {
	align-items: center;
	gap: var(--o-space-md);
}

.o-section.o-section--bottom-cta .o-bottom-cta.o-bottom-cta--centered .o-section-heading {
	text-align: center;
}

.o-bottom-cta--centered .o-bottom-cta__text {
	max-width: 45rem; /* The comp's 720 copy width. */
}

.o-bottom-cta--centered .o-bottom-cta__actions {
	padding-top: var(--o-space-md);
}

/*
 * On the navy band the pattern darkens rather than tints, as the comp draws
 * it. The Pattern colour control still overrides this.
 */
.o-scheme-dark .o-bottom-cta__pattern {
	--o-pattern-ink: #000000;
}

/* --------------------------------------------------------------------------
   The wave pattern
   The shared .o-pattern (components.css) in a strip at one end of the band,
   fading in from that edge (o-pattern--from-right / --from-left in the
   markup). Navy-ink at 10% by default; the Pattern colour and Pattern
   strength controls override these two values.
   -------------------------------------------------------------------------- */
.o-bottom-cta__pattern {
	--o-pattern-ink: var(--o-navy-ink);

	inset: 0 auto;
	width: 41%;
}

.o-bottom-cta__pattern--right {
	right: 0;
}

.o-bottom-cta__pattern--left {
	left: 0;
}

.o-bottom-cta__pattern::before {
	opacity: 0.1;
}

/* --------------------------------------------------------------------------
   Side by side
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-bottom-cta--inline {
		flex-direction: row;
		gap: var(--o-space-xl);
		align-items: center;
		justify-content: space-between;
	}

	.o-bottom-cta--inline .o-bottom-cta__text {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------------
   Stacked
   The strip widens so the texture still reads as a texture once the band is
   narrow. The artwork keeps its size, so the bands keep their weight.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.o-bottom-cta__pattern {
		width: 62%;
	}

	.o-bottom-cta--copy-half .o-bottom-cta__text {
		max-width: none;
	}
}