/**
 * CTA Banner Block Styles
 *
 * Block-specific styles for the CTA Banner block.
 * These styles are loaded only when the block is used on a page.
 */

.ctaBanner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-lg);
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 400px;
	width: 100%;
}

.ctaBanner__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.ctaBanner__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 35, 67, 0.5);
	z-index: 1;
}

.ctaBanner__content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: var(--container-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.ctaBanner__logo {
	margin-bottom: var(--space-sm);
}

.ctaBanner__logoImage {
	max-width: 120px;
	height: auto;
}

.ctaBanner__heading {
	font-size: 3.375rem; /* 54px */
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 0;
}

.ctaBanner__description {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-light);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 0;
}

/* Button styles for this block */
.ctaBanner .button--accent {
	display: inline-block;
	background-color: #6abd45;
	color: var(--color-white);
	padding: 1.125rem 1.5rem;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.02em;
	border-radius: 9px;
	transition: all var(--transition-base);
}

.ctaBanner .button--accent:hover,
.ctaBanner .button--accent:focus {
	background-color: #5aad35;
	color: var(--color-white);
	transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
	.ctaBanner {
		padding: var(--space-2xl) var(--space-md);
		min-height: 300px;
	}

	.ctaBanner__logoImage {
		max-width: 80px;
	}

	.ctaBanner__heading {
		font-size: var(--font-size-3xl);
	}

	.ctaBanner__description {
		font-size: var(--font-size-lg);
	}
}