/*
 * Every selector is prefixed with .elementor: Elementor prints its global classes as `.elementor .ac-x`, and these
 * rules must outrank them (same specificity, loaded later).
 * Cards inside the Home carousels (Services, Testimonials, Insights), rendered by includes/carousels.php.
 * Colours, type and radii come from the ac- global classes and variables; this file only holds what the
 * Elementor cards had as local styles (widths, image ratios, gaps). Breakpoints: mobile = 767px.
 */

.elementor .ac-card__title a, .elementor .ac-card__more a {
	all: unset;
	cursor: pointer;
}

.elementor .ac-card__img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* ---------- Mirror of Elementor global classes ----------
   Elementor only prints the CSS of a global class that some element on the page uses. The cards are
   rendered here, not in Elementor, so these classes would otherwise lose their styles. The source of
   truth is custom/elementor-global-settings.json in the project; keep these rules in step with it. */

.elementor .ac-h3--card {
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.elementor .ac-author-name {
	margin: 0;
	font-family: var(--f-accent);
	font-weight: 600;
	font-size: clamp(22px, 14px + 1vw, 32px);
	line-height: 1.125;
}

.elementor .ac-btn-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--c-navy);
	font-family: var(--f-primary);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	text-decoration: none;
	cursor: pointer;
}

.elementor .ac-btn-link:hover, .elementor .ac-btn-link:focus, .elementor .ac-btn-link:active {
	background-color: transparent;
	color: var(--c-navy);
	text-decoration: underline;
}

.elementor .ac-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: var(--c-white);
	color: var(--c-navy);
}

.elementor .ac-card--service {
	height: 100%;
	gap: 44px;
	padding: 30px 33px 40px;
	border-radius: var(--radius-card-lg);
	transition: background-color 0.25s ease;
}

.elementor .ac-card--service img {
	transition: transform 0.4s ease;
}

.elementor .ac-card--service:hover {
	background-color: var(--c-navy);
}

.elementor .ac-card--service:hover img {
	transform: scale(1.06);
}

.elementor .ac-card--service:hover h3, .elementor .ac-card--service:hover p {
	color: var(--c-white);
}

.elementor .ac-card--testimonial {
	justify-content: flex-end;
	min-height: 582px;
	padding: 41px 49px 55px;
	border-radius: var(--radius-card-xl);
}

.elementor .ac-card--insight {
	gap: 31px;
	padding: 30px 25px;
	border-radius: var(--radius-card);
}

.elementor .ac-card--insight img {
	border-radius: var(--radius-sm);
}

/* After the rules above so it wins over .ac-card and .ac-card--testimonial, as the class order does in Elementor. */
.elementor .ac-card--dark {
	background-color: var(--c-navy);
	color: var(--c-white);
}

.elementor .ac-card--dark h1, .elementor .ac-card--dark h2, .elementor .ac-card--dark h3, .elementor .ac-card--dark h4, .elementor .ac-card--dark p, .elementor .ac-card--dark span {
	color: var(--c-white);
}

/* ---------- Services ---------- */

.elementor .ac-card--service {
	height: auto; /* the global class says 100%, which doesn't stretch; auto makes the cards one height */
	aspect-ratio: 557 / 604; /* Figma card size; taller content still grows the card */
	padding-bottom: 26px; /* Figma: 40px, but its 5-line card (accounting) overflows into it inside the fixed 604px */
	min-width: 0;
	flex: 0 0 clamp(300px, 29vw, 557px);
	scroll-snap-align: start;
	overflow: clip;
}

.elementor .ac-card--service .ac-card__img {
	aspect-ratio: 491 / 337;
	border-radius: 12.573px;
	object-position: center bottom;
}

.elementor .ac-card--service .ac-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 0 0 5px;
}

.elementor .ac-card--service .ac-card__text {
	line-height: 1.21;
}

/* Title row: the title and a hover-reveal arrow; the arrow sets the row height (37.27px in Figma). */
.elementor .ac-card__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	overflow: clip;
}

.elementor .ac-card__arrow {
	display: block;
	flex: 0 0 auto;
	width: 63.7px;
	height: 37.27px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.elementor .ac-card--service:hover .ac-card__arrow {
	opacity: 1;
}

/* ---------- Insights ---------- */

.elementor .ac-card--insight {
	padding-bottom: 40px; /* Figma: 30px top, 40px bottom */
	min-width: 0;
	flex: 0 0 clamp(300px, 30.1vw, 433px);
	scroll-snap-align: start;
	overflow: clip;
}

.elementor .ac-card__imglink {
	display: block;
}

.elementor .ac-card--insight .ac-card__img {
	aspect-ratio: 383 / 252;
	border-radius: var(--radius-sm);
}

.elementor .ac-card__body--insight {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 9px;
}

.elementor .ac-card--insight .ac-card__title {
	max-width: 271px;
	color: var(--c-slate);
}

.elementor .ac-card__more {
	margin: 0; /* Hello Elementor adds a bottom margin to every p */
	margin-block-start: auto;
}

/* ---------- Testimonials ----------
   The active card is the light, wide one; the others are dark and narrow (class ac-card--dark).
   Swapping that class swaps the width, colours and quote icon, so the carousel script only toggles it. */

.elementor .ac-card--testimonial {
	position: relative;
	width: auto;
	min-width: 0;
	gap: 24px;
	flex: 0 0 clamp(340px, 46.67vw, 896px);
	transition: flex-basis 0.28s ease, background-color 0.28s ease, color 0.28s ease;
}

.elementor .ac-card--testimonial.ac-card--dark {
	flex-basis: clamp(300px, 28.75vw, 552px);
}

.elementor .ac-card--testimonial:not(.ac-card--dark) {
	color: var(--c-navy);
}

.elementor .ac-card--testimonial:not(.ac-card--dark) .ac-card__headline {
	color: var(--c-slate);
}

.elementor .ac-quote {
	display: block;
	width: 55px;
	height: auto;
	flex: 0 0 auto;
}

.elementor .ac-quote--dark, .elementor .ac-card--dark .ac-quote--light {
	display: none;
}

.elementor .ac-card--dark .ac-quote--dark {
	display: block;
	width: 59px;
}

.elementor .ac-card__spacer {
	min-width: 0;
	min-height: 1px;
	flex: 1 0 0;
}

.elementor .ac-card__quote {
	line-height: 1.444;
}

.elementor .ac-card__foot {
	display: flex;
	flex-direction: row;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
}

.elementor .ac-card__author {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: auto;
}

.elementor .ac-card__role {
	font-size: 16px;
	line-height: 22px;
}

/* Cards that are not showing while the desktop carousel centres the active one. */
@media (min-width: 768px) {
	.elementor .ac-card--off {
		display: none;
	}
}

@media (max-width: 767px) {
	.elementor .ac-card--service {
		flex-basis: 347px;
	}

	.elementor .ac-card--service .ac-card__img {
		aspect-ratio: 292.6 / 200.7;
	}

	.elementor .ac-card--service .ac-card__body {
		gap: 12px;
	}

	.elementor .ac-card--service .ac-card__text {
		line-height: 1.35;
	}

	.elementor .ac-card--insight {
		flex-basis: 347px;
	}

	.elementor .ac-card--insight .ac-card__img {
		aspect-ratio: 313 / 198;
	}

	/* One card per screen, swiped; the light (active) card goes first. */
	.elementor .ac-card--testimonial, .elementor .ac-card--testimonial.ac-card--dark {
		min-height: 612px;
		padding: 36px 20px 40px;
		gap: 18px;
		flex: 0 0 calc(100vw - 32px);
		scroll-snap-align: start;
	}

	.elementor .ac-card--testimonial:not(.ac-card--dark) {
		order: -1;
	}

	.elementor .ac-quote, .elementor .ac-card--dark .ac-quote--dark {
		width: 48px;
	}

	.elementor .ac-card__quote {
		line-height: 1.5;
	}

	.elementor .ac-card__foot {
		flex-direction: column;
		gap: 21px;
		align-items: flex-start;
	}

	.elementor .ac-card__foot .ac-btn-primary {
		padding: 11px 36px;
		font-size: 15px;
	}

	/* Figma mobile card measurements (frame 383:1111) */
	.elementor .ac-card--service {
		aspect-ratio: 347 / 429;
		padding: 18px 19.5px 20px;
		gap: 27px;
	}

	.elementor .ac-card--service .ac-card__img {
		width: 292.6px;
	}

	.elementor .ac-card--service .ac-card__body {
		padding-left: 3.5px;
		gap: 10px;
	}

	.elementor .ac-card--service .ac-card__title {
		line-height: 17.92px;
	}

	.elementor .ac-card__arrow {
		width: 37.9px;
		height: 22.2px;
	}

	.elementor .ac-card--insight {
		aspect-ratio: 347 / 453;
		padding: 18px 17px 30px;
		gap: 31.7px;
	}

	.elementor .ac-card__body--insight {
		gap: 21px;
		padding: 0 6px;
	}

	.elementor .ac-card--insight .ac-card__title {
		line-height: 17.92px;
	}

	.elementor .ac-card--insight .ac-card__text {
		line-height: 20px;
	}

	.elementor .ac-card--insight .ac-card__more {
		font-size: 16px;
		margin-block-start: -9px; /* Figma: 12px under the text, the body gap is 21px */
	}

	.elementor .ac-card--testimonial .ac-author-name {
		font-size: 26.28px;
		line-height: 31.45px;
	}

	.elementor .ac-card--testimonial .ac-card__role {
		font-size: 14px;
		line-height: 19.45px;
	}

	.elementor .ac-card--testimonial .ac-card__headline {
		font-size: 17.52px;
		line-height: 24.7px;
	}

	.elementor .ac-card--testimonial .ac-card__quote {
		line-height: 22.78px;
	}

	.elementor .ac-card--testimonial,
	.elementor .ac-card--testimonial.ac-card--dark {
		padding-inline-end: 16px;
	}

	/* the mobile titles are Regular, not Medium */
	.elementor .ac-card--service .ac-card__title,
	.elementor .ac-card--insight .ac-card__title {
		font-weight: 400;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .ac-card--testimonial {
		transition: none;
	}
}