/**
 * CTA — one section of the design.
 *
 * Not one page's section: the band is drawn once and used wherever a page
 * needs it, so nothing here is named for the page it first appeared on.
 */

.custom-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 130px calc( 254px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 134px calc( 254px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;
}

/* The picture is a box first: it keeps the band's shape whether or not one has
   been uploaded, and whatever arrives covers it. */
.custom-cta__picture {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-cta__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-cta__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-cta__heading {
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.custom-cta__button,
.custom-cta__button:hover,
.custom-cta__button:focus,
.custom-cta__button:active {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 1px solid currentColor;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 300ms ease-in-out,
		border-color 300ms ease-in-out,
		color 300ms ease-in-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-cta__button {
		transition: none;
	}
}

/* An anchor takes the browser's own colour unless it is told not to. */
.custom-cta__button {
	color: inherit;
	text-decoration: none;
}

/* Tablet and mobile — the file draws one of them (11174:8782): the band is
   38 deep above and below what it holds, and holds it the width of the
   screen. Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-cta {
		padding: 38px 0;
	}

	.custom-cta__button,
	.custom-cta__button:hover,
	.custom-cta__button:focus,
	.custom-cta__button:active {
		padding: 8px 16px;
	}
}

/* Tablet — not drawn. The band is given a good deal more depth than the
   narrow tier keeps for it, and still well short of the wide tier's. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-cta {
		padding: 80px 0;
	}
}