/**
 * Module: CTA
 *
 * Both styles live here rather than in per-style files: the router loads its partials from
 * `ctas/`, while the head preload looks for `cta/{style}`, so a per-style file would only load
 * on one of the two paths.
 *
 * The boxed style's box breaks out of the container and pads back in by the same amount, so its
 * grid keeps the container's columns. Below 1400 the breakout is zero and the box pads by a gap.
 */

/*** Module: CTA ***/

.module.cta {
	--texture-fade: 135%;
}

.module.cta.texture-strong {
	--texture-opacity: 0.25;
}

.module.cta .description {
	color: var(--text-soft);
}

.module.cta .description > :first-child {
	margin-top: 0;
}

.module.cta .description > :last-child {
	margin-bottom: 0;
}

.module.cta :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

/** Style: Centered **/

.module.cta.centered {
	padding: calc(var(--module-spacing-xlarge) + var(--text-spacing-large)) 0;
	text-align: center;
}

.module.cta.centered .container {
	row-gap: 0;
}

.module.cta.centered .container > * {
	grid-column: 2 / span 10;
}

.module.cta.centered.medium .description {
	grid-column: 3 / span 8;
}

.module.cta.centered .description {
	margin-top: var(--text-spacing-small);
}

.module.cta.centered .btn {
	justify-self: center;
	margin-top: var(--text-spacing-large);
}

/** Style: Boxed **/

.module.cta.boxed {
	padding: var(--module-spacing-xlarge) 0 var(--module-spacing-large);
}

.module.cta.boxed .box {
	align-items: start;
	background: var(--teal);
	margin: 0 var(--container-breakout);
	padding: var(--module-spacing-medium) calc(var(--container-breakout) * -1);
}

.module.cta.boxed .box > :is(h1, h2, h3, h4, h5, h6) {
	color: var(--white);
	grid-column: 1 / span 6;
	padding-left: var(--gap);
}

.module.cta.boxed .description {
	color: var(--text);
}

.module.cta.boxed .box :is(strong, b) {
	font-weight: inherit;
}

.module.cta.boxed .content {
	display: grid;
	grid-column: 7 / span 5;
	justify-items: start;
	margin: var(--text-spacing-xxsmall) calc(var(--gap) * -1) 0 0;
	row-gap: var(--text-spacing-large);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {
	.module.cta.boxed .box {
		padding-inline: var(--gap);
	}

	.module.cta.boxed .box > :is(h1, h2, h3, h4, h5, h6) {
		padding-left: 0;
	}

	.module.cta.boxed .content {
		grid-column: 7 / span 6;
		margin-right: 0;
	}
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {
	.module.cta.centered.medium .description {
		grid-column: 2 / span 10;
	}

	.module.cta.boxed .box {
		row-gap: var(--text-spacing-small);
	}

	.module.cta.boxed .box > :is(h1, h2, h3, h4, h5, h6),
	.module.cta.boxed .content {
		grid-column: 1 / -1;
	}

	.module.cta.boxed .content {
		margin-top: 0;
	}
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {
	.module.cta.centered .container > *,
	.module.cta.centered.medium .description {
		grid-column: 1 / -1;
	}

	.module.cta.boxed .box {
		padding: var(--module-spacing-small) var(--text-spacing-small);
	}
}