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

/* Hero 2 Section - relative md:pt-46 pb-20 md:pt-36 md:pb-28 bg-gradient-to-br from-orange-50 via-yellow-50 to-white overflow-hidden */
.wp-block-group.hs-hero-2,
.wp-block-group.alignfull.hs-hero-2,
.hs-hero-2 {
	position: relative !important;
	overflow: hidden !important;
	background: linear-gradient(to bottom right, #fff7ed, #fefce8, #ffffff) !important; /* from-orange-50 via-yellow-50 to-white */
	padding-top: 8rem !important; /* pt-46 */
	padding-bottom: 5rem !important; /* pb-20 */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.wp-block-group.hs-hero-2,
.wp-block-group.alignfull.hs-hero-2,
.hs-hero-2  {
		padding-top: 11rem !important; /* md:pt-36 */
		padding-bottom: 7rem !important; /* md:pb-28 */
	}
}

/* Hero 2 Container - max-w-6xl mx-auto px-6 relative z-10 */
.hs-hero-2-container {
	max-width: 72rem; /* max-w-6xl = 1152px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem; /* px-6 */
	padding-right: 1.5rem;
	position: relative;
	z-index: 10;
}

/* SVG Top-Right Decoration via ::before pseudo-element - absolute top-10 right-10 w-96 h-96 text-orange-100 -z-0 opacity-60 */
.hs-hero-2-container::before,
.wp-block-group.hs-hero-2-container::before,
.wp-block-group.hs-hero-2-container.has-global-padding::before,
.wp-block-group.hs-hero-2-container.is-layout-constrained::before {
	content: '';
	position: absolute;
	top: 2.5rem; /* top-10 */
	right: 2.5rem; /* right-10 */
	width: 24rem; /* w-96 */
	height: 24rem; /* h-96 */
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
	color: #ffedd5; /* text-orange-100 */
	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="%23ffedd5" d="M43.3,-73.6C55.9,-66.2,66.3,-54.5,73.1,-40.9C79.9,-27.3,83.1,-11.8,82.6,3.7C82.1,19.2,78,34.7,69.8,47.8C61.6,60.9,49.3,71.6,35.2,77.4C21.1,83.2,5.2,84.1,-10.5,82.3C-26.2,80.5,-41.7,76,-54.8,67.8C-67.9,59.6,-78.6,47.7,-84.2,33.9C-89.8,20.1,-90.3,4.4,-86.9,-10.2C-83.5,-24.8,-76.2,-38.3,-65.7,-48.9C-55.2,-59.5,-41.5,-67.2,-27.2,-73.8C-12.9,-80.4,2,-86,17.4,-86.9C32.8,-87.8,30.7,-81,43.3,-73.6Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* SVG Bottom-Left Decoration via ::after pseudo-element - absolute bottom-0 left-0 w-80 h-80 text-yellow-100 -z-0 opacity-50 */
.hs-hero-2-container::after,
.wp-block-group.hs-hero-2-container::after,
.wp-block-group.hs-hero-2-container.has-global-padding::after,
.wp-block-group.hs-hero-2-container.is-layout-constrained::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20rem; /* w-80 */
	height: 20rem; /* h-80 */
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	color: #fef9c7; /* text-yellow-100 */
	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="%23fef9c7" d="M47.3,-78.9C60.9,-71.1,71.3,-57.3,77.8,-42.1C84.3,-26.9,87,-10.3,85.5,5.8C84,21.9,78.3,37.5,68.9,49.8C59.5,62.1,46.4,71.1,32.1,76.4C17.8,81.7,2.3,83.3,-13.5,82.5C-29.3,81.7,-45.4,78.5,-58.7,70.8C-72,63.1,-82.5,50.9,-87.8,36.5C-93.1,22.1,-93.2,5.5,-89.3,-9.8C-85.4,-25.1,-77.5,-39.1,-66.3,-49.9C-55.1,-60.7,-40.6,-68.3,-25.8,-75.3C-11,-82.3,4.2,-88.7,19.5,-87.5C34.8,-86.3,33.7,-86.7,47.3,-78.9Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Hero 2 Grid - grid md:grid-cols-2 gap-12 items-center */
.hs-hero-2-grid.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem; /* gap-12 */
	align-items: center;
	margin: 0 !important;
}

@media (min-width: 768px) {
	.hs-hero-2-grid.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Reset column padding/margin */
.hs-hero-2-grid.wp-block-columns .wp-block-column {
	margin: 0 !important;
	padding: 0 !important;
}

/* Content Column - order-2 md:order-1 */
.hs-hero-2-content-column {
	order: 2;
}

@media (min-width: 768px) {
	.hs-hero-2-content-column {
		order: 1; /* md:order-1 */
	}
}

/* Image Column - order-1 md:order-2 */
.hs-hero-2-image-column {
	order: 1;
}

@media (min-width: 768px) {
	.hs-hero-2-image-column {
		order: 2; /* md:order-2 */
	}
}

/* Badge - inline-block px-3 py-1.5 bg-orange-100 text-orange-600 rounded-full text-xs mb-4 */
.hs-hero-2-badge,
.wp-block-paragraph.hs-hero-2-badge {
	display: inline-block !important;
	padding: 0.375rem 0.75rem !important; /* px-3 py-1.5 */
	background-color: #ffedd5 !important; /* bg-orange-100 */
	color: #ea580c !important; /* text-orange-600 */
	border-radius: 9999px !important; /* rounded-full */
	font-size: 0.75rem !important; /* text-xs */
	margin-bottom: 1rem !important; /* mb-4 */
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	font-weight: 500;
	text-align: left;
}

/* Heading - text-3xl md:text-4xl lg:text-5xl mb-6 leading-tight */
.hs-hero-2-heading,
.wp-block-heading.hs-hero-2-heading {
	font-size: 1.875rem; /* text-3xl */
	line-height: 1.25; /* leading-tight */
	font-weight: 700 !important;
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 1.5rem; /* mb-6 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.hs-hero-2-heading,
	.wp-block-heading.hs-hero-2-heading {
		font-size: 3rem; /* wie hs-hero-3-heading */
	}
}

.hs-hero-2-heading-highlight {
	display: block;
	color: #f97316; /* text-orange-500 */
}

/* Description - text-base text-gray-600 mb-5 leading-relaxed */
.hs-hero-2-description {
	font-size: 1rem; /* text-base */
	color: var(--muted-foreground, #717182); /* text-gray-600 */
	line-height: 1.625; /* leading-relaxed */
	margin-top: 0;
	margin-bottom: 1.75rem; /* mb-5 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-weight: 400;
}

/* Buttons - flex gap-3 */
.hs-hero-2-buttons.wp-block-buttons {
	display: flex;
	gap: 0.75rem; /* gap-3 */
	flex-wrap: wrap;
	margin: 0;
	margin-top: 0.5rem;

	.wp-block-button{
		width: 100%;
	}
}


@media (min-width: 768px) {
.hs-hero-2-buttons.wp-block-buttons .wp-block-button{
		width: auto;
}
}

/* Primary Button - px-6 py-2.5 bg-[rgb(255,105,0)] text-white rounded-full hover:bg-orange-600 transition-colors text-sm */
.hs-hero-2-button-primary .wp-block-button__link,
.hs-hero-2-buttons .hs-hero-2-button-primary .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem; /* px-6 py-2.5 */
	background-color: rgb(255, 105, 0) !important; /* bg-[rgb(255,105,0)] */
	color: #ffffff !important;
	border-radius: 9999px; /* rounded-full */
	text-decoration: none;
	font-size: 0.85rem; /* text-sm */
	font-weight: 500;
	transition: background-color 0.2s ease-in-out;
	border: none;
	cursor: pointer;
}

.hs-hero-2-button-primary .wp-block-button__link:hover,
.hs-hero-2-buttons .hs-hero-2-button-primary .wp-block-button__link:hover {
	background-color: #ea580c !important; /* hover:bg-orange-600 */
	color: #ffffff !important;
}

/* Secondary Button - px-6 py-2.5 bg-white border-2 border-gray-300 text-gray-700 rounded-full hover:border-gray-400 transition-colors text-sm */
.hs-hero-2-button-secondary .wp-block-button__link,
.hs-hero-2-buttons .hs-hero-2-button-secondary .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem; /* px-6 py-2.5 */
	background-color: #ffffff !important;
	border: 2px solid #eaeaeb !important; /* border-2 border-gray-300 */
	color: #374151 !important; /* text-gray-700 */
	border-radius: 9999px; /* rounded-full */
	text-decoration: none;
	font-size: 0.85rem; /* text-sm */
	font-weight: 500;
	transition: border-color 0.2s ease-in-out;
	cursor: pointer;
}

.hs-hero-2-button-secondary .wp-block-button__link:hover,
.hs-hero-2-buttons .hs-hero-2-button-secondary .wp-block-button__link:hover {
	border-color: #9ca3af !important; /* hover:border-gray-400 */
	color: #374151 !important;
}

/* Image Wrapper - relative order-1 md:order-2 */
.hs-hero-2-image-wrapper {
	position: relative;
	z-index: 10;
}

/* SVG Decoration on Image - absolute -top-6 -right-16 w-40 h-40 text-orange-200 -z-0 */
.hs-hero-2-image-wrapper::before {
	content: '';
	position: absolute;
	top: -1.5rem; /* -top-6 */
	right: -4rem; /* -right-16 */
	width: 10rem; /* w-40 */
	height: 10rem; /* h-40 */
	z-index: 0;
	pointer-events: none;
	color: #fed7aa; /* text-orange-200 */
	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="%23fed7aa" d="M43.3,-73.6C55.9,-66.2,66.3,-54.5,73.1,-40.9C79.9,-27.3,83.1,-11.8,82.6,3.7C82.1,19.2,78,34.7,69.8,47.8C61.6,60.9,49.3,71.6,35.2,77.4C21.1,83.2,5.2,84.1,-10.5,82.3C-26.2,80.5,-41.7,76,-54.8,67.8C-67.9,59.6,-78.6,47.7,-84.2,33.9C-89.8,20.1,-90.3,4.4,-86.9,-10.2C-83.5,-24.8,-76.2,-38.3,-65.7,-48.9C-55.2,-59.5,-41.5,-67.2,-27.2,-73.8C-12.9,-80.4,2,-86,17.4,-86.9C32.8,-87.8,30.7,-81,43.3,-73.6Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Image - h-[400px] md:h-[450px] rounded-[50px] overflow-hidden shadow-2xl */
.hs-hero-2-image {
	margin: 0 !important;
	position: relative;
	z-index: 10;
	height: 400px; /* h-[400px] */
	border-radius: 50px; /* rounded-[50px] */
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
	display: block;
	width: 100%;
}

@media (min-width: 768px) {
	.hs-hero-2-image {
		height: 420px; /* md:h-[450px] */
	}
}

.hs-hero-2-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hs-hero-2-image figure {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.hs-hero-2-image figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}