/**
 * Common CTA section
 */

.common-cta {
	position: relative;
	overflow: hidden;
}

.common-cta__bg {
	position: absolute;
	inset: 0;
}

.common-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.common-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(27, 42, 74, 0.74) 0%, rgba(20, 30, 54, 0.68) 100%);
}

.common-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 40px;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(56px, 8vw, 96px) var(--container-padding);
}

.common-cta__heading {
	font-size: clamp(22px, 3.5vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-white);
	margin-bottom: 16px;
}

.common-cta__body {
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.8);
	max-width: 560px;
}

.common-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 260px;
}

.cta-primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-full);
	transition: background var(--transition), transform var(--transition);
}

.cta-primary-button:hover,
.cta-primary-button:focus-visible {
	background: var(--color-beige);
	transform: translateY(-1px);
}

.cta-phone-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-green);
	transition: background var(--transition), border-color var(--transition);
}

.cta-phone-button:hover,
.cta-phone-button:focus-visible {
	background: var(--color-green-dark);
	border-color: var(--color-green-dark);
}

@media (max-width: 768px) {
	.common-cta__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.common-cta__actions {
		min-width: 0;
		width: 100%;
	}

	.common-cta__bg img {
		object-position: center 25%;
	}

	.common-cta__overlay {
		background: linear-gradient(180deg, rgba(27, 42, 74, 0.78) 0%, rgba(20, 30, 54, 0.72) 55%, rgba(20, 30, 54, 0.8) 100%);
	}
}