/**
 * CTA Banner Block Styles
 *
 * Full-width call-to-action with centered content. Supports Navy or Light Blue
 * backgrounds (solid or image with overlay). Per Figma: Desktop, Tablet, Mobile.
 *
 * KEY FEATURES:
 * - Solid background (bg-dark-blue, bg-sky-blue)
 * - Image background with overlay (when image uploaded)
 * - Optional decorative arrow pointing to primary button
 * - Responsive: stacked on mobile, side-by-side buttons on tablet+
 */

/* ==========================================================================
   BASE STYLES - MOBILE FIRST
   ========================================================================== */

.cta-banner,
.cta {
	position: relative;
	color: var(--white);
	z-index: 1;
}

/* Solid backgrounds */
.cta-banner.bg-dark-blue {
	background-color: var(--secondary-color);
}

.cta-banner.bg-sky-blue {
	background-color: var(--primary-color);
}

/* Image backgrounds - no solid color, image + overlay */
.cta-banner.bg-dark-blue-image,
.cta-banner.bg-sky-blue-image {
	background-color: transparent;
}

.cta-banner--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cta-banner__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.cta-banner__overlay--dark-blue {
	background: linear-gradient(0deg, rgba(43, 56, 143, 0.92) 0%, rgba(43, 56, 143, 0.92) 100%);
}

.cta-banner__overlay--sky-blue {
	background:  linear-gradient(0deg, rgba(29, 143, 195, 0.92) 0%, rgba(29, 143, 195, 0.92) 100%);
}

.cta-banner .container {
	position: relative;
	z-index: 1;
}

/* Text colors - headings and paragraphs white; subheading uses accent */
.cta-banner h2,
.cta-banner h3,
.cta-banner h4,
.cta-banner h5,
.cta-banner h6 {
	color: var(--white);
}

.cta-banner .cta-banner__description .wysiwyg p,
.cta-banner .cta-banner__description p {
	color: var(--white) !important;
	text-transform: none;
}

/* Subheading - only .sub-heading gets accent + uppercase (not p:first-of-type) */
.cta-banner.bg-dark-blue .cta-banner__description .sub-heading,
.cta-banner.bg-dark-blue-image .cta-banner__description .sub-heading {
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cta-banner.bg-sky-blue .cta-banner__description .sub-heading,
.cta-banner.bg-sky-blue-image .cta-banner__description .sub-heading {
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 1200px) {
	.cta-banner.bg-dark-blue .cta-banner__description .sub-heading,
	.cta-banner.bg-dark-blue-image .cta-banner__description .sub-heading,
	.cta-banner.bg-sky-blue .cta-banner__description .sub-heading,
	.cta-banner.bg-sky-blue-image .cta-banner__description .sub-heading {
		font-size: 20px;
	}
	
}



.cta-banner__content,
.cta__content {
	padding: 0 2px;
	max-width: 510px;
	margin: 0 auto;
}

.cta-banner__description {
	margin-top: 0;
}

.cta-banner__description p {
	margin: 0;
}

.cta-banner__buttons {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0px;
	justify-content: center;
	margin-top: var(--spacing-paragraph, 20px);
    align-items: center;
}

/* Mobile: full-width buttons for larger touch targets */
.cta-banner__buttons .btn {
	width: max-content;
    margin: 0 0 10px 0;
}

/* Navy bg: primary button = light blue; tertiary = white bg, navy text */
.cta-banner.bg-dark-blue .btn-primary,
.cta-banner.bg-dark-blue-image .btn-primary {
	background-color: var(--primary-color);
	color: var(--white);
}

.cta-banner.bg-dark-blue .btn-tertiary,
.cta-banner.bg-dark-blue-image .btn-tertiary {
	color: var(--secondary-color);
	background: var(--white);
}

/* Sky blue bg: primary = navy; tertiary = white outline */
.cta-banner.bg-sky-blue .btn-primary,
.cta-banner.bg-sky-blue-image .btn-primary {
	background-color: var(--secondary-color);
	color: var(--white);
}

.cta-banner.bg-sky-blue .btn-tertiary,
.cta-banner.bg-sky-blue-image .btn-tertiary {
	background-color: transparent;
	border: 1px solid var(--white);
	color: var(--white);
}

.cta-banner.bg-dark-blue .cta-banner__description p a,
.cta-banner.bg-dark-blue .cta-banner__description li a,
.cta-banner.bg-dark-blue-image .cta-banner__description p a,
.cta-banner.bg-dark-blue-image .cta-banner__description li a,
.cta-banner.bg-sky-blue .cta-banner__description p a,
.cta-banner.bg-sky-blue .cta-banner__description li a,
.cta-banner.bg-sky-blue-image .cta-banner__description p a,
.cta-banner.bg-sky-blue-image .cta-banner__description li a {
	color: var(--white) !important;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 4px 12px;
}

.cta-banner.bg-dark-blue .cta-banner__description p .btn,
.cta-banner.bg-dark-blue-image .cta-banner__description p .btn,
.cta-banner.bg-sky-blue .cta-banner__description p .btn,
.cta-banner.bg-sky-blue-image .cta-banner__description p .btn {
	background-image: none;
	background-position: unset;
	background-repeat: unset;
	background-size: unset;
}

/* Hide arrow when disabled */
.cta-banner--no-arrow .cta-banner__buttons::after {
	display: none !important;
}

/* ==========================================================================
   TABLET BREAKPOINT (768px+)
   ========================================================================== */

@media (min-width: 768px) {
	.cta-banner__content p,
	.cta-banner__description p {
		padding: 0 50px;
	}

	.cta-banner__buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		position: relative;
		margin: 28px auto 0;
		width: max-content;
	}

	.cta-banner__buttons .btn, 
	.cta-banner__buttons .btn+.btn:last-child {
		width: auto;
		margin: 0;
	}

	.cta-banner__buttons::after {
		content: "\e901";
		font-family: 'roadrunner-icons' !important;
		position: absolute;
		left: -84px;
		top: -48px;
		font-size: 72px;
		transform: rotatex(180deg);
		color: var(--color-primary-yellow);
	}

	.cta-banner.bg-sky-blue .cta-banner__buttons::after,
	.cta-banner.bg-sky-blue-image .cta-banner__buttons::after {
		color: var(--color-primary-yellow);
	}
}

/* ==========================================================================
   DESKTOP BREAKPOINT (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
	.cta-banner__content,
	.cta__content {
		max-width: unset;
	}

	.cta-banner {
		padding-bottom: 148px;
	}

	.cta-banner__buttons {
		margin: 38px auto 0;
	}

	.cta-banner__buttons::after {
		left: -104px;
		top: -29px;
		transform: rotatex(180deg) rotate(21deg);
	}

	.cta-banner.bg-dark-blue .btn-tertiary:hover,
	.cta-banner.bg-dark-blue-image .btn-tertiary:hover {
		color: var(--white);
		background: var(--tertiary-color);
	}

	.cta-banner.bg-sky-blue .btn-tertiary:hover,
	.cta-banner.bg-sky-blue-image .btn-tertiary:hover {
		background: var(--tertiary-hover-color);
		color: var(--white);
		border-color: var(--tertiary-hover-color);
	}

	.cta-banner.bg-dark-blue .cta-banner__description p a:hover,
	.cta-banner.bg-dark-blue .cta-banner__description li a:hover,
	.cta-banner.bg-dark-blue-image .cta-banner__description p a:hover,
	.cta-banner.bg-dark-blue-image .cta-banner__description li a:hover {
		color: var(--primary-color) !important;
		background: linear-gradient(to bottom, rgba(49, 170, 223, 0.15) 0%, rgba(49, 170, 223, 0.15) 100%);
		background-position: 0 100%;
		background-repeat: repeat-x;
		background-size: 4px 12px;
	}

	.cta-banner.bg-sky-blue .cta-banner__description p a:hover,
	.cta-banner.bg-sky-blue .cta-banner__description li a:hover,
	.cta-banner.bg-sky-blue-image .cta-banner__description p a:hover,
	.cta-banner.bg-sky-blue-image .cta-banner__description li a:hover {
		color: var(--secondary-color) !important;
		background: linear-gradient(to bottom, rgba(43, 56, 143, 0.15) 0%, rgba(43, 56, 143, 0.15) 100%);
		background-position: 0 100%;
		background-repeat: repeat-x;
		background-size: 4px 12px;
	}

	.cta-banner.bg-dark-blue .cta-banner__description p .btn:hover,
	.cta-banner.bg-dark-blue-image .cta-banner__description p .btn:hover,
	.cta-banner.bg-sky-blue .cta-banner__description p .btn:hover,
	.cta-banner.bg-sky-blue-image .cta-banner__description p .btn:hover {
		background-image: none;
		background-position: unset;
		background-repeat: unset;
		background-size: unset;
	}

	.cta-banner.bg-sky-blue .btn-primary:hover,
	.cta-banner.bg-sky-blue-image .btn-primary:hover {
		background: var(--secondary-hover-color);
		color: var(--white);
	}

	/* Primary button: arrow moves 10px right on hover (use right property - more reliable than transform) */
	.cta-banner__buttons .btn-primary::after {
		transition: right ease-in-out 0.3s;
	}

	.cta-banner__buttons .btn-primary:hover {
		padding-right: 59px;
	}

	.cta-banner__buttons .btn-primary:hover::after {
		right: 14px;
	}
}