/**
 * CTA Pattern Styles
 *
 * Styling für das CTA Pattern basierend auf Figma Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* CTA Section - py-18 bg-gradient-to-br from-orange-500 via-orange-400 to-yellow-400 text-white */
.hs-cta-section {
	padding-top: 4.5rem; /* py-18 */
	padding-bottom: 4.5rem;
	background: linear-gradient(to bottom right, #f97316, #fb923c, #facc15); /* from-orange-500 via-orange-400 to-yellow-400 */
	color: #ffffff; /* text-white */
	position: relative;
	overflow: hidden;
}

/* SVG Top Decoration via ::before pseudo-element */
.hs-cta-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4rem; /* h-16 */
	z-index: 0;
	pointer-events: none;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none"><path d="M0,50 Q300,0 600,50 T1200,50 L1200,0 L0,0 Z" fill="white" opacity="0.1" /></svg>');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top center;
}

/* SVG Decorative (right top) via ::after pseudo-element */
.hs-cta-section::after {
	content: '';
	position: absolute;
	top: 2.5rem; /* top-10 */
	right: 2.5rem; /* right-10 */
	width: 12rem; /* w-48 */
	height: 12rem; /* h-48 */
	z-index: 0;
	pointer-events: none;
	opacity: 0.1;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="white" d="M44.3,-76.2C57.1,-68.3,67.2,-54.9,74.1,-40.2C81,-25.5,84.7,-9.6,83.9,6C83.1,21.6,77.8,36.9,68.7,48.9C59.6,60.9,46.7,69.6,32.8,75.4C18.9,81.2,4,84.1,-11.2,83.5C-26.4,82.9,-42,78.8,-55.3,70.8C-68.6,62.8,-79.6,50.9,-85.4,36.7C-91.2,22.5,-91.8,6,-88.3,-9.3C-84.8,-24.6,-77.2,-38.7,-66.3,-49.8C-55.4,-60.9,-41.2,-69,-26.5,-76.3C-11.8,-83.6,3.4,-90.1,18.5,-88.9C33.6,-87.7,31.5,-84.1,44.3,-76.2Z" transform="translate(100 100)" /></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* CTA Container - max-w-4xl mx-auto px-6 text-center */
.hs-cta-container {
	max-width: 56rem; /* max-w-4xl = 896px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem; /* px-6 */
	padding-right: 1.5rem;
	text-align: center;
	position: relative;
	z-index: 10;
}

/* CTA Heading - text-3xl md:text-4xl mb-5 */
.hs-cta-heading {
	font-size: 1.875rem; /* text-3xl */
	line-height: 1.5;
	font-weight: var(--font-weight-medium, 500);
	color: #ffffff; /* text-white */
	margin-top: 0;
	margin-bottom: 1.25rem; /* mb-5 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.hs-cta-heading {
		font-size: 2.25rem; /* md:text-4xl */
	}
}

/* CTA Text - text-lg mb-8 opacity-95 */
.hs-cta-text {
	font-size: 1.125rem; /* text-lg */
	line-height: 1.5;
	color: #ffffff; /* text-white */
	opacity: 0.95;
	margin-top: 0;
	margin-bottom: 2rem; /* mb-8 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-weight: 400;
}

/* CTA Buttons */
.hs-cta-buttons.wp-block-buttons {
	display: flex;
	gap: 1rem; /* gap-4 */
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* CTA Button - px-6 py-2 bg-white text-orange-500 rounded-full */
.hs-cta-button .wp-block-button__link,
.hs-cta-buttons .hs-cta-button .wp-block-button__link {
	padding: 0.875rem 2rem; /* py-2 */
	background-color: #ffffff; /* bg-white */
	color: #f97316; /* text-orange-500 */
	border-radius: 9999px; /* rounded-full */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.5;
	font-weight: 600 !important;
	text-decoration: none;
	display: inline-block;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
	transition: all 0.2s ease-in-out;
	border: none;
	cursor: pointer;
}

.hs-cta-button .wp-block-button__link:hover,
.hs-cta-buttons .hs-cta-button .wp-block-button__link:hover {
	background-color: #f3f4f6; /* hover:bg-gray-100 */
	transform: scale(1.05); /* hover:scale-105 */
}