/*
 * CTA v2 Block — the closing call to action: a photo band under a green wash, with a heading, a
 * short pitch and one button.
 *
 * Self-contained: every rule the block needs is here. Element rules are scoped under the root with
 * at least two classes, so neither the Bootstrap grid nor the theme style.css is required, and the
 * generic rules still living there (h2, p, a, a:hover) cannot win against these whatever the print
 * order. The only outside inputs are the theme tokens, each read with a literal fallback, and the
 * site's @font-face. The block ships no JavaScript.
 *
 * The photograph used to be handed to app.min.js through data-bg-img, so the band had no background
 * at all until that script ran; it is a plain CSS background here, from earth.webp next to this
 * file (21.9 KB against the 102 KB earth.jpg the JS pointed at). It stays a *background* rather
 * than an <img>: at odd section widths Chrome snaps an image element to whole pixels but paints a
 * background at the true half-pixel offset, which is worth 1-6 % of the frame.
 *
 * Geometry mirrors the legacy section pixel for pixel:
 *   - 80px / 50px band padding, 40px on top below 1024px (the theme wrote that as
 *     `.pt-80,.pt-120{padding-top:40px!important}` inside `screen and (max-width:1023px)`);
 *   - the container ladder (--sws-container-max) with no gutter of its own, and an 83.333 % inner
 *     column with a 15px gutter. That is exactly what `.container > .row(-15px) > .col-10(+15px)`
 *     produced: the row's negative margins cancel the container's padding, so the column is
 *     83.333 % of the *full* container width, not of its content box;
 *   - 30px under the text block, 0 below 768px;
 *   - Rubik 500 1.875rem/1.4 heading (22px below 768px) and Source Sans Pro 1rem/1.8 copy, both
 *     white, and the 250px white button with #028d40 text that wipes to #02a94d on hover.
 *
 * The green wash is #028d40 at 70 %, not the #605cb8 a reader of style.css:5178 would expect: that
 * declaration is outranked by a later, equally specific one at :6849. Same story on the button's
 * ::after, violet at :5133 and green again at :6873. Both are reproduced as they actually render.
 *
 * Breakpoints are viewport media queries, not container queries: the block is full width, and the
 * editor canvas is an iframe, so they follow the canvas width there too. They keep the theme's own
 * `screen and` prefix and integer edges (1023 / 767) so nothing shifts by a pixel.
 */

.sws-content-block.cta-v2-block,
.cta-v2-block *,
.cta-v2-block *::before,
.cta-v2-block *::after {
	box-sizing: border-box;
}

/* Typography as the section inherited it from body: every child's line box depends on it.
   text-align stays left on the root — the legacy section centred at .row/.col level, not here. */
.sws-content-block.cta-v2-block {
	position: relative;
	display: block;
	margin: 0;
	padding: 80px 0 50px;
	background-color: #0b2345;
	background-position: 50% 50%;
	background-size: cover;
	font-family: var(--sws-font-body, "Source Sans Pro", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sws-text, #777);
	text-align: left;
}

/* Below 576px the legacy `.bg-img-xs-none` dropped the photo and painted #0b2345 instead — on a
   phone the band is mostly text anyway, and the crop of a 1920x636 panorama says nothing. So the
   photo is added from 576px up rather than removed below it, and #0b2345 above is also what shows
   through if it fails to load, exactly as before. */
@media (min-width: 576px) {
	.sws-content-block.cta-v2-block {
		background-color: transparent;
		background-image: url(earth.webp);
	}
}

/* The green wash. No z-index: the content lifts itself above this instead (see __body), which is
   what the legacy `.col-10{position:relative}` happened to do. */
.sws-content-block.cta-v2-block::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--sws-green, #028d40);
	opacity: 0.7;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.cta-v2-block .ctav2__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: var(--sws-container-max, 1200px);
	margin: 0 auto;
	text-align: center;
}

/* The 83.333 % column is a flex item, not a block with `width` and auto margins, and that is not
   decoration. Chrome quantises layout to 1/64px: as a block the column came out 312.4844px wide at
   375px, where the flex item comes out at exactly 312.5px, and the half-pixel that buys puts the
   centred button one whole device pixel to the left at some widths. Measured, not guessed. */
.cta-v2-block .ctav2__body {
	position: relative;
	z-index: 1;
	width: 100%;
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
	padding: 0 var(--sws-gutter, 15px) 30px;
}

/* ==========================================================================
   Copy — the heading and the pitch arrive inside the `content` wysiwyg, so they are reached as
   descendants rather than given classes.
   ========================================================================== */

.cta-v2-block .ctav2__body h2 {
	margin: 0 0 15px;
	font-family: var(--sws-font-heading, Rubik, sans-serif);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	text-transform: none;
}

.cta-v2-block .ctav2__body p {
	margin: 0 0 1.6rem;
	font-size: 1rem;
	line-height: 1.8;
	color: #fff;
}

.cta-v2-block .ctav2__body > :last-child {
	margin-bottom: 0;
}

/* A link typed into the wysiwyg. None of the 57 live instances has one, but without this it would
   fall through to the reboot's #007bff rather than to the theme's ink-then-violet-on-hover. */
.cta-v2-block .ctav2__body a:not(.ctav2__btn) {
	color: var(--sws-ink, #202e39);
	text-decoration: none;
	transition: all 0.2s;
}

.cta-v2-block .ctav2__body a:not(.ctav2__btn):hover,
.cta-v2-block .ctav2__body a:not(.ctav2__btn):focus {
	color: var(--sws-violet, #605cb8);
	text-decoration: none;
}

/* Spacing utilities that arrive *inside* the wysiwyg rather than from the template: the ru and en
   About pages carry a paragraph with pt-3 pb-3 text-center-mobile on it. They travel with the
   content, so the block has to carry them; scoped here they no longer need the !important the
   global copies had. */
.cta-v2-block .ctav2__body .pt-3 {
	padding-top: 1rem;
}

.cta-v2-block .ctav2__body .pb-3 {
	padding-bottom: 1rem;
}

/* ==========================================================================
   Button — the theme's .btn/.large-btn in its inverted form: white face, green label, wiping to
   the lighter green on hover. `fill-reference` on the element is a JS hook, never styled.
   ========================================================================== */

.cta-v2-block .ctav2__btn {
	position: relative;
	z-index: 0;
	display: inline-block;
	width: 100%;
	max-width: 250px;
	margin: 30px 0 0;
	padding: 0.5rem 1.792rem;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
	color: var(--sws-green, #028d40);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	/* Only `color` actually changes, but the legacy list is kept so the computed value — which the
	   isolation check compares — stays what it has always been. */
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cta-v2-block .ctav2__btn:hover,
.cta-v2-block .ctav2__btn:focus,
.cta-v2-block .ctav2__btn:active {
	color: #fff;
	text-decoration: none;
}

.cta-v2-block .ctav2__btn::before,
.cta-v2-block .ctav2__btn::after {
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.cta-v2-block .ctav2__btn::before {
	background: #fff;
}

.cta-v2-block .ctav2__btn::after {
	background-color: var(--sws-green-2, #02a94d);
	transform: scaleY(0);
	transition: transform 0.3s ease-out;
}

.cta-v2-block .ctav2__btn:hover::after,
.cta-v2-block .ctav2__btn:focus::after {
	transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
	.cta-v2-block .ctav2__btn,
	.cta-v2-block .ctav2__btn::after {
		transition: none;
	}
}

/* ==========================================================================
   Breakpoints — the two steps the legacy cascade had, at its own integer edges.
   ========================================================================== */

@media screen and (max-width: 1023px) {
	.sws-content-block.cta-v2-block {
		padding-top: 40px;
	}
}

@media screen and (max-width: 767px) {
	.cta-v2-block .ctav2__body {
		padding-bottom: 0;
	}

	.cta-v2-block .ctav2__body h2 {
		font-size: 22px;
	}

	.cta-v2-block .ctav2__body .text-center-mobile {
		text-align: center;
	}

	.cta-v2-block .ctav2__btn {
		margin-top: 15px;
	}
}