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

/* Hero 1 Section - relative md:pt-32 pt-28 md:pb-12 pb-8 overflow-hidden px-0 bg-gradient-to-br from-orange-50 via-yellow-50 to-white */
.wp-block-group.hs-hero-1,
.wp-block-group.alignfull.hs-hero-1,
.hs-hero-1 {
	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-28 */
	padding-bottom: 6rem !important; /* pb-8 */
	padding-left: 0 !important; /* px-0 */
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.wp-block-group.hs-hero-1,
.wp-block-group.alignfull.hs-hero-1,
.hs-hero-1  {
		padding-top: 10rem !important; /* md:pt-32 */
		padding-bottom: 6rem !important; /* md:pb-12 */
	}
}

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

/* SVG Top-Right Decoration via ::before pseudo-element - absolute top-10 -right-10 w-[400px] h-[400px] text-orange-50 z-0 hidden lg:block */
.hs-hero-1-container::before,
.wp-block-group.hs-hero-1-container::before,
.wp-block-group.hs-hero-1-container.has-global-padding::before,
.wp-block-group.hs-hero-1-container.is-layout-constrained::before {
	content: '';
	position: absolute;
	top: 2.5rem; /* top-10 */
	right: -2.5rem; /* -right-10 */
	width: 400px; /* w-[400px] */
	height: 400px; /* h-[400px] */
	z-index: 0;
	pointer-events: none;
	display: none;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><g><path fill="%23ff990038" d="M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z"/><path fill="%23ff990038" d="M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z"/><path fill="%23ff990038" d="M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z"/><path fill="%23ff990038" d="M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z"/><path fill="%23ff990038" d="M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z"/></g></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 1024px) {
	.hs-hero-1-container::before,
	.wp-block-group.hs-hero-1-container::before,
	.wp-block-group.hs-hero-1-container.has-global-padding::before,
	.wp-block-group.hs-hero-1-container.is-layout-constrained::before {
		display: block; /* lg:block */
	}
}

/* SVG Bottom-Left Decoration via ::after pseudo-element - absolute -bottom-40 -left-60 w-[580px] h-[580px] -z-0 hidden lg:block */
.hs-hero-1-container::after,
.wp-block-group.hs-hero-1-container::after,
.wp-block-group.hs-hero-1-container.has-global-padding::after,
.wp-block-group.hs-hero-1-container.is-layout-constrained::after {
	content: '';
	position: absolute;
	bottom: -10rem; /* -bottom-40 */
	left: -15rem; /* -left-60 */
	width: 580px; /* w-[580px] */
	height: 580px; /* h-[580px] */
	z-index: 0;
	pointer-events: none;
	display: none;
	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="%23ff990014" 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;
}

@media (min-width: 1024px) {
	.hs-hero-1-container::after,
	.wp-block-group.hs-hero-1-container::after,
	.wp-block-group.hs-hero-1-container.has-global-padding::after,
	.wp-block-group.hs-hero-1-container.is-layout-constrained::after {
		display: block; /* lg:block */
	}
}

@media (min-width: 640px) {
	.hs-hero-1-container {
		padding-left: 1.5rem; /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

/* Content Container - text-center mb-4 mt-0 */
.hs-hero-1-content {
	text-align: center;
	margin-bottom: 1rem; /* mb-4 */
	margin-top: 0;
	position: relative;
	z-index: 10;
}

.hs-hero-1-images {
	position: relative;
	z-index: 10;
}

/* Badge - inline-block px-4 py-1.5 bg-orange-100 text-orange-600 rounded-full text-sm mb-4 */
.hs-hero-1-badge,
.wp-block-paragraph.hs-hero-1-badge {
	display: inline-block !important;
	padding: 0.375rem 1rem !important; /* px-4 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.85rem !important; /* text-sm */
	margin-bottom: 1rem !important; /* mb-4 */
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	font-weight: 400;
	text-align: center;
}

/* Heading - text-3xl md:text-4xl lg:text-5xl mb-4 md:mb-6 leading-tight font-bold font-normal px-4 */
.hs-hero-1-heading {
	font-size: 2.25rem; /* text-3xl */
	line-height: 1.25; /* leading-tight */
	margin-bottom: 1rem; /* mb-4 */
	font-weight: 700; /* font-bold */
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
}

@media (min-width: 768px) {
	.hs-hero-1-heading {
		font-size: 2.25rem; /* md:text-4xl */
		margin-bottom: 1.5rem; /* md:mb-6 */
	}
}

@media (min-width: 1024px) {
	.hs-hero-1-heading {
		font-size: 3rem; /* lg:text-5xl */
	}
}

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

/* Description - text-sm md:text-base lg:text-lg text-gray-600 max-w-2xl mx-auto mb-4 md:mb-6 leading-relaxed px-4 */
.hs-hero-1-description {
	font-size: 0.85rem; /* text-sm */
	color: var(--muted-foreground, #717182); /* text-gray-600 */
	max-width: 42rem; /* max-w-2xl */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem; /* mb-4 */
	line-height: 1.625; /* leading-relaxed */
	font-weight: 400;
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
}

@media (min-width: 768px) {
	.hs-hero-1-description {
		font-size: 1rem; /* md:text-base */
		margin-bottom: 1.5rem; /* md:mb-6 */
	}
}

@media (min-width: 1024px) {
	.hs-hero-1-description {
		font-size: 1.125rem; /* lg:text-lg */
	}
}

/* CTA Button */
.hs-hero-1-cta {
	margin-top: 0;
}

.hs-hero-1-button .wp-block-button__link,
.hs-hero-1-cta .wp-block-button__link {
	display: inline-block;
	padding: 0.625rem 1.5rem; /* px-6 py-2.5 */
	background-color: #f97316; /* bg-orange-500 */
	color: #ffffff;
	border-radius: 9999px; /* rounded-full */
	text-decoration: none;
	font-size: 0.85rem; /* text-sm */
	font-weight: 400;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
	border: none;
}

.hs-hero-1-button .wp-block-button__link:hover,
.hs-hero-1-cta .wp-block-button__link:hover {
	background-color: #ea580c; /* hover:bg-orange-600 */
	transform: scale(1.05); /* hover:scale-105 */
	color: #ffffff;
}

@media (min-width: 768px) {
	.hs-hero-1-button .wp-block-button__link,
	.hs-hero-1-cta .wp-block-button__link {
		padding: 0.75rem 2rem; /* md:px-8 md:py-3 */
		font-size: 1rem; /* md:text-base */
	}
}

/* Images Container - hidden md:flex items-center justify-center gap-4 mt-6 max-w-7xl mx-auto */
.hs-hero-1-images {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 1rem; /* gap-4 */
	margin-top: 2.5rem; /* mt-6 */
	max-width: 80rem; /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.hs-hero-1-images {
		display: flex; /* md:flex */
		flex-wrap: wrap; /* Allow wrapping for tablet/mobile layout */
	}
}

/* Tablet and Mobile Layout: Images 1 and 3 in a row, Image 2 below in full width */
@media (min-width: 768px) and (max-width: 1023px) {
	.hs-hero-1-images {
		display: grid !important;
		grid-template-columns: 1fr 1fr; /* Two columns for images 1 and 3 */
		grid-template-rows: auto auto; /* Two rows */
		gap: 1rem;
	}
	
	/* First row: Images 1 and 3 side by side */
	.hs-hero-1-image-1 {
		grid-column: 1;
		grid-row: 1;
		width: 100% !important;
		height: auto;
		aspect-ratio: 16 / 18; /* Maintain aspect ratio */
	}
	
	.hs-hero-1-image-3 {
		grid-column: 2;
		grid-row: 1;
		width: 100% !important;
		height: auto;
		aspect-ratio: 16 / 18; /* Maintain aspect ratio */
	}
	
	/* Second row: Image 2 in full width */
	.hs-hero-1-image-2 {
		grid-column: 1 / -1; /* Span both columns */
		grid-row: 2;
		width: 100% !important;
		height: auto;
		aspect-ratio: 400 / 288; /* Maintain aspect ratio (400px / 288px) */
	}
}

/* Mobile Layout (below 768px) - same as tablet */
@media (max-width: 767px) {
	.hs-hero-1-images {
		display: grid !important;
		grid-template-columns: 1fr 1fr; /* Two columns for images 1 and 3 */
		grid-template-rows: auto auto; /* Two rows */
		gap: 1rem;
	}
	
	/* Set height for all image wrappers in mobile */
	.hs-hero-1-image-wrapper {
		height: 14rem !important;
	}
	
	/* First row: Images 1 and 3 side by side */
	.hs-hero-1-image-1 {
		grid-column: 1;
		grid-row: 1;
		width: 100% !important;
		height: 14rem !important;
	}
	
	.hs-hero-1-image-3 {
		grid-column: 2;
		grid-row: 1;
		width: 100% !important;
		height: 14rem !important;
	}
	
	/* Second row: Image 2 in full width */
	.hs-hero-1-image-2 {
		grid-column: 1 / -1; /* Span both columns */
		grid-row: 2;
		width: 100% !important;
		height: 14rem !important;
	}
}

/* Image Wrapper */
.hs-hero-1-image-wrapper {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

.hs-hero-1-image-wrapper .wp-block-group {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/* Image 1 - w-56 h-64 rounded-tl-[80px] rounded-tr-[20px] rounded-br-[80px] rounded-bl-[20px] */
.hs-hero-1-image-1 {
	width: 16rem; /* w-56 */
	height: 18rem; /* h-64 */
	border-top-left-radius: 5rem; /* rounded-tl-[80px] */
	border-top-right-radius: 1.25rem; /* rounded-tr-[20px] */
	border-bottom-right-radius: 5rem; /* rounded-br-[80px] */
	border-bottom-left-radius: 1.25rem; /* rounded-bl-[20px] */
}

/* Image 2 - w-[400px] h-64 rounded-[120px] */
.hs-hero-1-image-2 {
	width: 30rem; /* w-[400px] */
	height: 18rem; /* h-64 */
	border-radius: 7.5rem; /* rounded-[120px] */
}

/* Image 3 - w-56 h-64 rounded-tr-[80px] rounded-tl-[20px] rounded-bl-[80px] rounded-br-[20px] */
.hs-hero-1-image-3 {
	width: 16rem; /* w-56 */
	height: 18rem; /* h-64 */
	border-top-right-radius: 5rem; /* rounded-tr-[80px] */
	border-top-left-radius: 1.25rem; /* rounded-tl-[20px] */
	border-bottom-left-radius: 5rem; /* rounded-bl-[80px] */
	border-bottom-right-radius: 1.25rem; /* rounded-br-[20px] */
}

/* Image */
.hs-hero-1-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hs-hero-1-image-wrapper .hs-hero-1-image {
	width: 100%;
	height: 100%;
	display: block;
}

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

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

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