/* Small Group Journeys: closing CTA (Figma 245:790, mobile 229:580).
 *
 * Reuses the live .ot-section.g--cta pattern (the navy gradient from the left,
 * white copy, gold buttons). This file holds only what the design changes.
 * Port it to astra-child with the section markup. */

/* The photo is a <picture> (AVIF, WebP, JPEG) behind the gradient, in place of
 * the live pattern's inline background-image. Centred, as designed (the live
 * pattern moves its photo 67.5% down from 992px, which would crop the bell
 * tower). */
.g--sgj-cta > .ot-section__bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.g--sgj-cta > .ot-section__bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.g--sgj-cta .ot-section__content > p:last-child {
	margin-bottom: 0;
}

/* Mobile: a flat 60% navy overlay and the buttons stacked, 20px apart. 479px is
 * where the live hero stacks its buttons. */
@media (max-width: 479px) {
	.g--cta.g--sgj-cta::before {
		background: rgba(0, 52, 90, 0.6);
	}

	.g--sgj-cta .ot-section__content > h2 + p {
		margin-top: 20px;
	}

	.g--sgj-cta .ot-section__buttons {
		flex-direction: column;
		gap: 20px;
		margin-top: 20px;
	}

	.g--sgj-cta .ot-section__buttons .button + .button {
		margin-left: 0;
	}
}