/**
 * Elcogen CTA Widget Styles
 *
 * Call-to-action banner with gradient background, headings, and button
 * Based on Figma design system
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ============================================
   CTA Banner Base Styles
   ============================================ */

.elcogen-cta {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--spacing-baseline-80) var(--spacing-baseline-32) !important;

	box-sizing: border-box !important;
	position: relative !important;
	isolation: isolate !important;
}

.elcogen-cta::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: linear-gradient(104.567deg, var(--elcogen-cta-color-1, #0066FF) 0%, var(--elcogen-cta-color-2, #00CCFF) 50%, var(--elcogen-cta-color-3, #00FF99) 100%) !important;
	opacity: var(--elcogen-cta-bg-opacity, 1) !important;
	z-index: -1 !important;
}

/* ============================================
   Container
   ============================================ */

.elcogen-cta__container {
	max-width: var(--container-default) !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/* ============================================
   Content Area
   ============================================ */

.elcogen-cta__content {
	text-align: center !important;
}

/* ============================================
   Headings
   ============================================ */

.elcogen-cta__small-heading {
	margin: 0 0 var(--spacing-baseline-16) 0 !important;
	font-family: var(--font-family-headings), sans-serif !important;
	font-size: 1.1875rem !important;
	font-weight: var(--font-weight-bold) !important;
	line-height: 2rem !important;
	color: var(--color-white);
}

.elcogen-cta__large-heading {
	/* Typography now controlled by universal .elcogen-widget-title class in global CSS */
	margin: 0 0 var(--spacing-baseline-16) 0 !important;
	color: var(--color-white);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================
   Button
   ============================================ */

.elcogen-cta__button {
	display: inline-block !important;
	text-decoration: none !important;
	transition: var(--transition-all) !important;
	cursor: pointer !important;
	font-family: var(--font-family-body), sans-serif !important;
	font-size: var(--font-size-body-medium) !important;
	font-weight: var(--font-weight-bold) !important;
	line-height: 1.5 !important;
	color: var(--color-white);
	background-color: var(--color-dark-neutral);
	padding: var(--spacing-baseline-08) var(--spacing-baseline-24) !important;
	border-radius: var(--radius-pill) !important;
	border: none !important;
}

.elcogen-cta__button:hover {
	background-color: var(--color-dark-neutral-hover);
	transform: translateY(-0.125rem) !important;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 64rem) {
	.elcogen-cta {
		padding: 3.75rem var(--spacing-baseline-24) !important;
		min-height: 21.875rem !important;
	}

	.elcogen-cta__container {
		padding: 0 var(--spacing-baseline-32) !important;
	}

	.elcogen-cta__large-heading {
		/* Typography now controlled by universal .elcogen-widget-title class in global CSS */
	}
}

@media (max-width: 48rem) {
	.elcogen-cta {
		padding: var(--spacing-baseline-48) var(--spacing-baseline-16) !important;
		min-height: 18.75rem !important;
	}

	.elcogen-cta__container {
		padding: 0 var(--spacing-baseline-16) !important;
	}

	.elcogen-cta__small-heading {
		font-size: var(--font-size-body-medium) !important;
		line-height: 1.625rem !important;
	}

	.elcogen-cta__large-heading {
		/* Typography now controlled by universal .elcogen-widget-title class in global CSS */
		margin-bottom: var(--spacing-baseline-24) !important;
	}

	.elcogen-cta__button {
		font-size: var(--font-size-body-medium) !important;
		padding: 0.875rem var(--spacing-baseline-40) !important;
	}
}

/* ============================================
   Elementor Editor Adjustments
   ============================================ */

.elementor-editor-active .elcogen-cta {
	/* Ensure proper display in Elementor editor */
	min-height: 18.75rem;
}