/**
 * CTA
 *
 * Media runs a near-square photo off one edge of the screen with the copy centered in the
 * seven columns beside it. Statement drops the photo for a solid tea-green band carrying
 * one centered line of copy across the whole grid.
 */

/*** Style: media ***/

.module.cta.style-media .container {
	align-items: center;
}

.module.cta.style-media .media {
	aspect-ratio: 597 / 596;
	grid-row: 1;
}

.module.cta.style-media .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-row: 1;
	text-align: center;
}

.module.cta.style-media .text {
	display: flex;
	flex-direction: column;
}

.module.cta.style-media .text > * {
	margin-block: 0;
}

/* The heading finishes the line above it, so it takes the house display teal while the line it
   finishes stays in body colour. The Standard cut has no line to finish and no size to carry the
   colour, so it keeps the body's own. */
.module.cta.style-media.heading-display .text :is(h1, h2, h3, h4, h5, h6) {
	color: var(--dark-teal);
}

/* The two display lines sit on each other, reading as one sentence broken in two; the paragraph is
   a separate thought, and carries the whole gap itself now the row gap is gone. */
.module.cta.style-media .text > p.medium {
	margin-top: var(--text-spacing-xxsmall);
}

.module.cta.style-media .buttons {
	gap: var(--text-spacing-small);
	justify-content: center;
}

/** Layout: image left (default) **/

.module.cta.style-media.image-left .media {
	grid-column: 1 / span 5;
	margin-left: var(--viewport-edge);
}

.module.cta.style-media.image-left .media img {
	object-position: right center;
}

.module.cta.style-media.image-left .content {
	grid-column: 6 / span 7;
	padding-left: var(--text-spacing-small);
}

.module.cta.style-media.image-left.media-cutout .content {
	margin-left: calc(var(--gap) * -1);
	padding-left: 0;
}

/* The display cut is two lines of a sentence broken in half, and centred in the columns beside the
   photograph it started against its edge. The inset is the copy's own margin from the picture, and
   it outranks the cut-out's pull toward it — a knocked-out subject leaves air on its own side, not
   on the copy's. It goes once the copy is under the photograph rather than beside it. */
.module.cta.style-media.heading-display.image-left .content {
	padding-left: 64px;
}

/** Layout: image right **/

.module.cta.style-media.image-right .media {
	grid-column: 8 / span 5;
	margin-right: var(--viewport-edge);
}

.module.cta.style-media.image-right .media img {
	object-position: left center;
}

.module.cta.style-media.image-right .content {
	grid-column: 1 / span 7;
	padding-right: var(--text-spacing-small);
}

.module.cta.style-media.image-right.media-cutout .content {
	margin-right: calc(var(--gap) * -1);
	padding-right: 0;
}

/*** Style: statement ***/

.module.cta.style-statement {
	background-color: var(--tea-green);
	background-image: url('../../svgs/dot-grid-tint.svg');
	padding-block: var(--module-spacing-large);
}

.page-builder > .module.cta.style-statement:last-child,
.page-builder > .wash:last-child > .module.cta.style-statement:last-child {
	margin-bottom: calc(var(--footer-callout-overlap) * -1);
	padding-bottom: calc(var(--module-spacing-large) + var(--footer-callout-overlap));
}

.module.cta.style-statement .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-large);
	grid-column: 1 / -1;
	text-align: center;
}

.module.cta.style-statement p {
	margin-block: 0;
    word-break: break-word;
}

/*** Style: mega ***/

.module.cta.style-mega .container {
	isolation: isolate;
	row-gap: var(--text-spacing-medium);
	text-align: center;
}

.module.cta.style-mega .container > :is(h1, h2, h3, h4, h5, h6) {
	grid-column: 2 / span 10;
	margin: 0;
}

.module.cta.style-mega .emphasis {
	margin-bottom: var(--text-spacing-xxsmall);
}

.module.cta.style-mega .btn {
	grid-column: 1 / -1;
	justify-self: center;
}

.module.cta.style-mega .watermark {
	--watermark-arrival: 1;
	display: block;
	left: 50%;
	opacity: var(--watermark-arrival);
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(calc((1 - var(--watermark-arrival)) * 40%))
	           scale(calc(1 - (1 - var(--watermark-arrival)) * 0.12));
	/* Centred on the copy and dropped a fifth of its own height, both shares of the mark rather
	   than a fixed offset: the mark's height tracks the viewport and the copy's does not, so a
	   px offset that frames the copy on a desktop leaves the mark floating above it on a phone. */
	translate: -50% calc(-50% + 20% + var(--watermark-drop, 0px));
	width: min(1276px, 88.6vw);
	z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {

	.module.cta.style-mega .watermark[data-jazzy-scroll="watermark-rise"] {
		--watermark-arrival: 0;
	}

	.module.cta.style-mega .watermark[data-jazzy-scroll="watermark-rise"].animated-in {
		--watermark-arrival: 1;
	}

}

.module.cta.style-mega .watermark svg {
	display: block;
	height: auto;
	max-width: none;
	opacity: .05;
	width: 100%;
}

/*** Style: sub-brand ***/

.module.cta.style-sub-brand .lockup {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 2 / span 10;
	text-align: center;
}

.module.cta.style-sub-brand .logo {
	height: 120px;
	width: auto;
}

.module.cta.style-sub-brand .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-large);
}

.module.cta.style-sub-brand .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.cta.style-sub-brand .text > * {
	margin-block: 0;
}

.module.cta.style-sub-brand .emphasis {
	margin-bottom: 2px;
}

/*** Style: card ***/

.module.cta.style-card .media {
	aspect-ratio: 578 / 435;
	border-radius: 10px;
	grid-column: 1 / span 6;
}

.module.cta.style-card .panel {
	background: var(--white);
	border-radius: 10px;
	grid-column: 7 / span 6;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.module.cta.style-card .watermark {
	bottom: 0;
	color: var(--charcoal);
	display: block;
	opacity: .05;
	position: absolute;
	right: -194px;
	width: 479px;
	z-index: -1;
}

.module.cta.style-card .watermark svg {
	display: block;
	height: auto;
	width: 100%;
}

.module.cta.style-card .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	height: 100%;
	justify-content: center;
	padding: 0 var(--text-spacing-xlarge);
}

.module.cta.style-card .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.cta.style-card .text > * {
	margin-block: 0;
}

.module.cta.style-card .text > .icon {
	align-items: center;
	background: var(--petal-40);
	border-radius: 100%;
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.module.cta.style-card .text > .icon > :is(img, svg) {
	height: 24px;
	object-fit: contain;
	width: 24px;
}

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

@media only screen and (max-width: calc(950rem/16)) {

	/* The centred lockup is held to ten columns on desktop so a line of centred copy does not run
	   too long to track back to. Under this rung the container is already narrow enough to do that
	   job on its own, and the inset only makes the copy break early against a lot of empty gutter. */
	.module.cta.style-sub-brand .lockup {
		grid-column: 1 / -1;
	}

	/* Stacked, the panel is no longer as tall as the photograph beside it — so the copy needs a
	   run of its own above the icon and under the button rather than the height giving it one. */
	.module.cta.style-card .content {
		padding-block: var(--text-spacing-medium) calc(var(--text-spacing-medium) + 8px);
	}


	/* The mark's own 20% drop is measured against a height that tracks the viewport's width, so it
	   shortens faster than the copy it frames and rides up over it. A flat drop on top. */
	.module.cta.style-mega .watermark {
		--watermark-drop: 105px;
	}

	.module.cta.style-media:is(.image-left, .image-right) .media {
		border-radius: 0;
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: var(--viewport-edge);
	}

	/* A photograph takes a landscape crop of the screen's width. A knocked-out subject keeps the
	   shape it has beside the copy instead, so it fills that width rather than being fitted into
	   a band a fraction of it. The box carries the height, so it cannot be dropped: the picture
	   inside is positioned and would leave nothing to hold it open. */
	.module.cta.style-media:is(.image-left, .image-right):not(.media-cutout) .media {
		aspect-ratio: 16 / 9;
	}

	/* The subject sets the box's shape rather than being fitted inside the column's: knocked out,
	   it has no ground to fill, so a box on the desktop ratio left a field of nothing between the
	   figure and the copy below it. In flow it carries the box's height itself. */
	.module.cta.style-media.media-cutout .media {
		aspect-ratio: auto;
	}

	.module.cta.style-media.media-cutout .media img {
		height: auto;
		object-fit: contain;
		position: static;
		width: 100%;
	}

	/* Beside the copy the photograph is pulled toward it, which puts an image-left one against its
	   right edge. Stacked full width that edge is the screen's, so it reads as the wrong side. */
	.module.cta.style-media.image-left .media img {
		object-position: left center;
	}

	.module.cta.style-media.image-right .media img {
		object-position: right center;
	}

	.module.cta.style-media:is(.image-left, .image-right) .content,
	.module.cta.style-media:is(.image-left, .image-right).media-cutout .content,
	.module.cta.style-media.heading-display.image-left .content {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* The wash gives up its foot so the photograph beside the copy can reach it. Stacked, the
	   photograph is above the copy and the button lands on that edge instead, so the module pays
	   the foot back. */
	.wash:is(.aqua, .ray, .program) > .module.cta.style-media:is(.image-left, .image-right):last-child {
		padding-bottom: var(--module-spacing-medium);
	}

	/* The copy sits the same step below the photograph that the buttons sit above the wash's foot,
	   so the band reads evenly either side of it. The row's gap carries part of the step. */
	.module.cta.style-media:is(.image-left, .image-right) .content {
		margin-top: calc(var(--module-spacing-medium) - var(--gap));
	}

	.module.cta.style-card .container {
		display: block;
	}

	.module.cta.style-card .media {
		aspect-ratio: 16 / 9;
		border-radius: 10px 10px 0 0;
	}

	.module.cta.style-card .panel {
		border-radius: 0 0 10px 10px;
	}

}

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

@media only screen and (max-width: calc(650rem/16)) {

	.module.cta.style-statement .content {
		gap: var(--text-spacing-small);
	}

	.module.cta.style-mega .container > :is(h1, h2, h3, h4, h5, h6) {
		grid-column: 1 / -1;
	}

	/* 30px further than tablet: the copy is taller here for the same mark, so the mark's own
	   proportional offset frames less of it. */
	.module.cta.style-mega .watermark {
		--watermark-drop: 135px;
	}

	.module.cta.style-card .content {
		gap: var(--text-spacing-small);
		padding-inline: var(--text-spacing-medium);
	}

	/* The title and the line under it are one thought at this width; 8 rather than the run's own
	   16, and only for that pair — the disc above keeps its step. */
	.module.cta.style-card .text > .article-title + * {
		margin-top: calc(var(--text-spacing-xxsmall) - var(--text-spacing-xsmall));
	}

}