/**
 * Contact CTA card: template-parts/ui/cta-card.php.
 * From 1280 (FAQ 2171:879): the page colour for the top 205px, then the deep
 * green that runs into the footer; card 72px left padding, 88px top and
 * bottom, title Display/L at most 683px wide, 40px to the dark button.
 * Fill and line as the homepage newsletter (2061:575, 2073:743). Mascot
 * (image 13, turned) 454px wide, 90px from the card's right edge, 82px above
 * the card and cut by its bottom edge; its shadow is a CSS drop shadow (the
 * frame uses a blurred copy).
 * Below 1280 (not designed): the newsletter's stacked card, the mascot under
 * the text, cut by the card.
 */

.cta-section {
	--cta-split: 205px;

	padding-bottom: 12px;
	background: linear-gradient(to bottom, transparent var(--cta-split), var(--color-green-deep) var(--cta-split));
}

.cta-card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 36px 24px 270px;
	border-radius: var(--radius-section);
	color: var(--color-white);
	isolation: isolate;
}

.cta-card__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	background: var(--gradient-newsletter-card);
}

.cta-card__line {
	position: absolute;
	max-width: none;
	height: auto;
	mix-blend-mode: color-burn;
}

/* The newsletter's PNG line exports, placed as there: below 1280 from the
 * line's left end, 123px left of the card, to its bottom edge. */
.cta-card__line--mobile {
	bottom: 0;
	left: -123px;
	width: auto;
	height: 280px;
}

.cta-card__line--desktop {
	display: none;
}

.cta-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}

.cta-card__title {
	max-width: 683px;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

.cta-card__mascot {
	position: absolute;
	z-index: -1;
	bottom: -50px;
	left: 66px;
	overflow: hidden;
	width: 320px;
	aspect-ratio: 494 / 519;
	filter: drop-shadow(8px 4px 12px rgb(0 0 0 / 30%));
	pointer-events: none;
}

/* Out of the flow, so the box height comes from aspect-ratio alone: with
 * the image in the flow, Safari let the box grow to the full image (the
 * crop was lost and the mascot rose over the form on iPhones). */
.cta-card__mascot img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	transform: scaleX(-1);
}

@media (min-width: 768px) {
	.cta-card {
		padding: 48px 48px 300px;
	}

	/* Tablets: the desktop export at the card's height from its right edge,
	 * so its cut ends sit on the card's top and bottom edges and the loop
	 * stays behind the mascot. */
	.cta-card__line--mobile {
		display: none;
	}

	.cta-card__line--desktop {
		top: 0;
		right: 0;
		display: block;
		width: auto;
		height: 100%;
	}

	.cta-card__mascot {
		right: 40px;
		left: auto;
	}
}

@media (min-width: 1280px) {
	.cta-section {
		padding-bottom: 0;
	}

	.cta-card {
		display: flex;
		align-items: center;
		overflow: visible;
		padding: 88px 420px 88px 72px;
	}

	.cta-card__content {
		gap: var(--space-lg);
	}

	.cta-card__line--mobile {
		display: none;
	}

	/* From the card's top right corner, 745 x 459 (cut by the bottom edge). */
	.cta-card__line--desktop {
		width: 745px;
		height: auto;
	}

	.cta-card__mascot {
		top: -82px;
		right: 90px;
		bottom: 0;
		width: 454px;
		aspect-ratio: auto;
		filter: drop-shadow(19px 10px 19px rgb(0 0 0 / 30%));
	}
}

.cta-card__text-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.cta-card__text {
	margin: 0;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.cta-card__text a {
	color: inherit;
	text-decoration: underline;
}

/* Compact (Terms 2190:1602): radius 36, 44 / 48px padding, title Heading/H2
 * at most 428px, 10px to the button; line 571px wide, 369px from the left,
 * 134px above; mascot 334px wide, 85px from the right edge, 52px above the
 * card. The card sits in the content column, so no bands. Below 1280: the
 * stacked card. */
.cta-card--compact .cta-card__title {
	max-width: 428px;
	font-size: var(--text-h2);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

@media (min-width: 1280px) {
	.cta-card--compact {
		min-height: 299px;
		padding: 44px 48px;
		border-radius: 36px;
	}

	.cta-card--compact .cta-card__content {
		gap: 10px;
	}

	/* The export at the frame's scale (571 / 817): 520px wide, on the
	 * bottom edge so its cut ends stay outside the 299px card (in the frame
	 * it sits 30px higher). */
	.cta-card--compact .cta-card__line--desktop {
		top: auto;
		right: auto;
		bottom: 0;
		left: 369px;
		width: 520px;
	}

	.cta-card--compact .cta-card__mascot {
		top: -52px;
		right: 85px;
		width: 334px;
		filter: drop-shadow(14px 7px 14px rgb(0 0 0 / 30%));
	}
}