/**
 * Media CTA — Frame 18
 */

.elementor-column > .elementor-element-populated:has(.elementor-widget-agency-media-cta) {
	padding: 0 !important;
}

.e-con:has(.elementor-widget-agency-media-cta) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* Defeat Elementor's boxed section width so the widget can reach a true 1440
   (the boxed .elementor-container otherwise caps it ~1140/1200). Same breakout
   the other contained widgets use. */
.elementor-section:has(.elementor-widget-agency-media-cta),
.elementor-section:has(.elementor-widget-agency-media-cta) > .elementor-container,
.e-con:has(.elementor-widget-agency-media-cta) {
	max-width: 100% !important;
	width: 100% !important;
}

.aew-media-cta {
	--aew-media-cta-bg: var(--aew-color-blue, #305b83);
	--aew-media-cta-panel-bg: var(--aew-color-blue-light, #5796bb);
	--aew-media-cta-image-height: 240px;
	position: relative;
	isolation: isolate;
	width: 100%;
	box-sizing: border-box;
}

.aew-media-cta::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	transform: translateX(-50%);
	background-color: var(--aew-media-cta-bg);
	z-index: -1;
	pointer-events: none;
}

/* Design-system width model: X gutter on the OUTER block so content is a TRUE
   1440 (padding becomes empty centring margin above ~1520, gutter shows below).
   The full-bleed band background is painted by .aew-media-cta::before. */
.aew-media-cta {
	padding-left: 16px;    /* X 16 mobile base */
	padding-right: 16px;
}

.aew-media-cta__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 0;       /* mobile base: Y 32 (X via outer gutter) */
	box-sizing: border-box;
}

.aew-media-cta__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	width: 100%;
}

.aew-media-cta__panel {
	border-radius: 20px;
	overflow: hidden;
}

.aew-media-cta__media {
	flex: 0 0 auto;
	width: 100%;
	height: var(--aew-media-cta-image-height);
	border-radius: 40px;
	overflow: hidden;
	line-height: 0;
}

.aew-media-cta__media img,
.aew-media-cta__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.aew-media-cta__panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	width: 100%;
	min-width: 0;
	padding: 24px;
	background-color: var(--aew-media-cta-panel-bg);
	box-sizing: border-box;
}

.aew-media-cta__title {
	margin: 0;
	/* Optional extra space below the title (the "Space below title" control).
	   Adds to the panel gap. Default 0 = panel gap only. */
	margin-bottom: var(--aew-media-cta-title-gap, 0px);
	width: 100%;
	font-family: var(--aew-font-heading, 'Teko', sans-serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--aew-media-cta-title, var(--aew-color-white, #fff));
}

.aew-media-cta__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.aew-media-cta__text {
	margin: 0;
	font-family: var(--aew-font-body, 'Lato', sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--aew-media-cta-text, var(--aew-color-white, #fff));
}

/* Neutralise the global `.aew-rich-text p { margin:0 0 1em }` inside this
   widget's text block so paragraph spacing is controlled by the widget (panel
   gap + the body's own 16px gap), not an inherited 1em margin. Scoped to
   .aew-media-cta so other rich-text widgets keep their default paragraph rhythm. */
.aew-media-cta .aew-media-cta__text p {
	margin: 0;
}

.aew-media-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 16px 24px;
	border: 0;
	border-radius: 18px;
	background-color: var(--aew-media-cta-btn-bg, var(--aew-cta, #444444));
	color: var(--aew-media-cta-btn-text, #FFFFFF);
	font-family: var(--aew-font-body, 'Lato', sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.aew-media-cta__button:hover,
.aew-media-cta__button:focus-visible {
	background-color: var(--aew-media-cta-btn-bg-hover, var(--aew-cta-hover));
	color: var(--aew-media-cta-btn-text-hover, #ffffff);
	text-decoration: none;
}

/* Optional arrow icon — inherits button text color. Base SVG points left, so
   flip it so the default "after" arrow points right. */
.aew-media-cta__btn-arrow {
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	margin-top: -2px;
	transform: scaleX(-1);
	transition: transform 0.18s ease;
}

.aew-media-cta__btn-arrow--before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
	.aew-media-cta__button:hover .aew-media-cta__btn-arrow {
		transform: scaleX(-1) translateX(3px);
	}
	.aew-media-cta__button:hover .aew-media-cta__btn-arrow--before {
		transform: scaleX(1) translateX(-3px);
	}
}

@media (min-width: 768px) {
	.aew-media-cta {
		--aew-media-cta-image-height: 500px;
	}
}

@media (min-width: 1024px) {
	.aew-media-cta {
		padding-left: 40px;   /* X 40 desktop (outer gutter) */
		padding-right: 40px;
	}
	.aew-media-cta__inner {
		padding: 64px 0;      /* desktop: Y 64 (X via outer gutter) */
	}

	.aew-media-cta__row {
		flex-direction: row;
		align-items: stretch;
	}

	.aew-media-cta__row--image-right {
		flex-direction: row-reverse;
	}

	/* Adjustable split: image width is the --aew-media-cta-image-width % (default
	   50%); the text panel fills the remaining width (minus the 20px row gap).
	   The image height is CAPPED (default 560px) so a tall/portrait photo can't
	   blow the row up on wide screens — object-fit:cover crops to the cap. The
	   panel then sizes to its own content rather than being dragged taller by the
	   image. If the panel happens to be taller, the image stretches to match
	   (align-items:stretch) but never past the cap. */
	.aew-media-cta__media {
		flex: 0 0 var(--aew-media-cta-image-width, 50%);
		width: var(--aew-media-cta-image-width, 50%);
		max-width: var(--aew-media-cta-image-width, 50%);
		height: var(--aew-media-cta-image-height, 500px);
		max-height: var(--aew-media-cta-image-height, 500px);
		align-self: center;   /* don't let the row stretch the image past its set height */
	}

	.aew-media-cta__panel {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
		padding: 80px;
	}

	.aew-media-cta__title {
		font-size: 48px;
	}

	.aew-media-cta__text {
		font-size: 18px;
	}

	.aew-media-cta__media {
		border-radius: 40px;
	}

	.aew-media-cta__panel {
		border-radius: 40px;
	}
}