/**
 * Contact Page Pattern Styles
 *
 * Styling für die Kontakt-Seite basierend auf Figma Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* Hero Section - pt-32 pb-16 md:pt-40 md:pb-20 bg-gradient-to-br from-orange-50 via-yellow-50 to-white */
.hs-contact-hero,
.hs-contact-hero.wp-block-group,
.hs-contact-hero.alignfull {
	position: relative;
	padding-top: 6rem !important; /* pt-32 */
	padding-bottom: 4rem !important; /* pb-16 */
	background: linear-gradient(to bottom right, #fff7ed, #fefce8, #ffffff) !important; /* from-orange-50 via-yellow-50 to-white */
	overflow: hidden;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
}

@media (min-width: 768px) {
	.hs-contact-hero {
		padding-top: 10rem; /* md:pt-40 */
		padding-bottom: 5rem; /* md:pb-20 */
	}
}

/* Decorative blob as pseudo-element - absolute top-10 right-10 w-80 h-80 text-orange-100 -z-0 opacity-60 hidden md:block */
.hs-contact-hero::before {
	content: '';
	position: absolute;
	top: 2.5rem; /* top-10 */
	right: 2.5rem; /* right-10 */
	width: 20rem; /* w-80 */
	height: 20rem; /* h-80 */
	z-index: 0;
	opacity: 0.6;
	display: none;
	pointer-events: none;
	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;
}

@media (min-width: 768px) {
	.hs-contact-hero::before {
		display: block;
	}
}

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

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

/* Hero Content - text-center */
.hs-contact-hero-content {
	text-align: center;
	position: relative;
	z-index: 10;
}

/* Badge - inline-block px-3 py-1.5 bg-orange-100 text-orange-600 rounded-full text-xs mb-4 */
.hs-contact-badge {
	display: inline-block;
	padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
	background-color: #ffedd5; /* bg-orange-100 */
	color: #ea580c; /* text-orange-600 */
	border-radius: 9999px; /* rounded-full */
	font-size: 0.75rem; /* text-xs */
	margin-bottom: 1rem; /* mb-4 */
	font-weight: 500;
}

/* Hero Title - text-3xl md:text-4xl lg:text-5xl mb-4 leading-tight */
.hs-contact-hero-title {
	font-size: 1.875rem; /* text-3xl */
	line-height: 1.25; /* leading-tight */
	margin-bottom: 1rem; /* mb-4 */
	font-weight: 600;
	color: #1f2937; /* text-gray-800 */
}

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

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

.hs-contact-hero-title-highlight {
	color: #f97316; /* text-orange-500 */
}

/* Hero Subtitle - text-base md:text-lg text-gray-600 max-w-2xl mx-auto */
.hs-contact-hero-subtitle {
	font-size: 1rem; /* text-base */
	color: #4b5563; /* text-gray-600 */
	max-width: 42rem; /* max-w-2xl */
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.hs-contact-hero-subtitle {
		font-size: 1.125rem; /* md:text-lg */
	}
}

/* Contact Cards Section - py-12 md:py-16 bg-white */
.hs-contact-cards-section,
.hs-contact-cards-section.wp-block-group,
.hs-contact-cards-section.alignfull {
	padding-top: 3rem !important; /* py-12 */
	padding-bottom: 4rem !important; /* py-16 */
	background-color: #ffffff !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

@media (min-width: 768px) {
	.hs-contact-cards-section {
		padding-top: 4rem; /* md:py-16 */
		padding-bottom: 4rem;
	}
}

/* Contact Cards Container - max-w-6xl mx-auto px-4 sm:px-6 */
.hs-contact-cards-container {
	max-width: 72rem; /* max-w-6xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
}

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

/* Contact Grid - grid md:grid-cols-2 gap-8 md:gap-12 items-start */
.hs-contact-grid.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem; /* gap-8 */
	align-items: start;
	margin: 0 !important;
}

@media (min-width: 768px) {
	.hs-contact-grid.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem; /* md:gap-12 */
	}
}

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

/* Contact Image Column */
.hs-contact-image-column {
	display: block;
}

/* Contact Image - h-[350px] md:h-[450px] lg:h-[500px] rounded-[40px] overflow-hidden shadow-2xl */
.hs-contact-image {
	margin: 0 !important;
	position: relative;
	height: 350px; /* h-[350px] */
	border-radius: 40px; /* rounded-[40px] */
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    max-height: 15rem;
}

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

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

@media (min-width: 1024px) {
	.hs-contact-image {
		height: 500px; /* lg:h-[500px] */
        max-height: none;
	}
}

/* Contact Details Column */
.hs-contact-details-column {
	width: 100%;
}

/* Contact Details Title - text-2xl md:text-3xl mb-6 */
.hs-contact-details-title {
	font-size: 1.5rem; /* text-2xl */
	line-height: 1.3;
	margin-bottom: 1.5rem; /* mb-6 */
	font-weight: 600;
	color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) {
	.hs-contact-details-title {
		font-size: 1.875rem; /* md:text-3xl */
	}
}

/* Contact Details Wrapper - space-y-12 */
.hs-contact-details-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0rem; /* space-y-12 */
}

/* Contact Details List - space-y-6 */
.hs-contact-details-list {
	display: flex;
	flex-direction: column;
	gap: 0rem; /* space-y-6 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* Contact Card - border-2 border-gray-100 rounded-3xl p-6 hover:border-orange-200 transition-all */
.hs-contact-card {
	border: 2px solid #f3f4f6; /* border-gray-100 */
	border-radius: 24px; /* rounded-3xl */
	padding: 1.5rem; /* p-6 */
	transition: border-color 0.2s ease;
	background-color: #ffffff;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hs-contact-card:hover {
	border-color: #fed7aa; /* hover:border-orange-200 */
}

/* Contact Card Header - flex items-center gap-3 mb-4 pb-4 border-b border-gray-100 */
.hs-contact-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem; /* gap-3 */
	margin-bottom: 1rem; /* mb-4 */
	padding-bottom: 1rem; /* pb-4 */
	border-bottom: 1px solid #f3f4f6; /* border-b border-gray-100 */
}

/* Contact Card Icon - w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center flex-shrink-0 */
.hs-contact-card-icon {
	width: 2.5rem; /* w-10 */
	height: 2.5rem; /* h-10 */
	background-color: #f97316; /* bg-orange-500 */
	border-radius: 0.75rem; /* rounded-xl */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
	stroke-width: 1.5px;
}

.hs-contact-card-icon .wp-block-hundeschule-icon-text {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hs-contact-card-icon .hs-icon-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	gap: 0;
}

.hs-contact-card-icon .hs-icon-text__icon {
	width: 1.5rem; /* w-5 */
	height: 1.5rem; /* h-5 */
	color: #ffffff;
	flex-shrink: 0;
}

.hs-contact-card-icon .hs-icon-text__icon svg {
	width: 100%;
	height: 100%;
	color: #ffffff;
	stroke: #ffffff;
	fill: none;
}

.hs-contact-card-icon .hs-icon-text__content {
	display: none; /* Hide text content */
}

/* Contact Card Title - text-base */
.hs-contact-card-title {
	font-size: 1rem; /* text-base */
	font-weight: 500;
	color: #1f2937; /* text-gray-800 */
	margin: 0;
}

/* Contact Card Content - space-y-2.5 */
.hs-contact-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* space-y-2.5 */
}

/* Contact Hours Row - flex justify-between items-center text-sm */
.hs-contact-hours-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.875rem; /* text-sm */
    width: 100%;
    justify-content: space-between;
}

.hs-contact-hours-label {
	color: #4b5563; /* text-gray-600 */
    font-weight: 400;
}

.hs-contact-hours-value {
	font-weight: 500;
	color: #1f2937; /* text-gray-800 */
}

/* Contact Address Text - text-sm text-gray-600 leading-relaxed mb-4 */
.hs-contact-address-text {
	font-size: 0.875rem; /* text-sm */
	color: #4b5563; /* text-gray-600 */
	line-height: 1.75; /* leading-relaxed */
	margin-bottom: 0 !important; /* mb-4 - removed since no route button */
	margin-top: 0;
	white-space: pre-line; /* Allow line breaks */
    font-weight: 400;
}

/* Contact Route Link - inline-flex items-center gap-1.5 text-sm text-orange-500 hover:text-orange-600 group */
.hs-contact-route-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem; /* gap-1.5 */
	font-size: 0.875rem; /* text-sm */
	color: #f97316; /* text-orange-500 */
	text-decoration: none;
	transition: color 0.2s ease;
}

.hs-contact-route-link:hover {
	color: #ea580c; /* hover:text-orange-600 */
	text-decoration: none;
}

.hs-contact-route-icon {
	width: 0.875rem; /* w-3.5 */
	height: 0.875rem; /* h-3.5 */
	transition: transform 0.2s ease;
}

.hs-contact-route-link:hover .hs-contact-route-icon {
	transform: translateX(0.25rem); /* translate-x-1 */
}

/* Contact CTA Buttons - flex flex-col sm:flex-row gap-3 mt-8 */
.hs-contact-cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* gap-3 */
	margin-top: 2rem; /* mt-8 */
}

@media (min-width: 640px) {
	.hs-contact-cta-buttons {
		flex-direction: row;
	}
}

/* Contact CTA Button - flex-1 px-6 py-3 rounded-full hover:scale-105 text-sm text-center font-medium flex items-center justify-center gap-2 */
.hs-contact-cta-button {
	margin: 0 !important;
	flex: 1;
    width: 100%;
}

.hs-contact-cta-button .wp-block-button__link {
	padding: 0.75rem 1.5rem !important; /* px-6 py-3 */
	border-radius: 9999px !important; /* rounded-full */
	font-size: 0.875rem !important; /* text-sm */
	font-weight: 500 !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important; /* gap-2 */
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.hs-contact-cta-button .wp-block-button__link:hover {
	transform: scale(1.05) !important;
}

/* Email Button - bg-orange-500 text-white hover:bg-orange-600 */
.hs-contact-cta-button-email .wp-block-button__link {
	background-color: #f97316 !important; /* bg-orange-500 */
	color: #ffffff !important;
}

.hs-contact-cta-button-email .wp-block-button__link:hover {
	background-color: #ea580c !important; /* hover:bg-orange-600 */
}

/* WhatsApp Button - bg-white border-2 border-gray-200 text-gray-700 hover:border-orange-500 hover:text-orange-500 */
.hs-contact-cta-button-whatsapp .wp-block-button__link {
	background-color: #ffffff !important;
	border: 2px solid #e5e7eb !important; /* border-gray-200 */
	color: #374151 !important; /* text-gray-700 */
}

.hs-contact-cta-button-whatsapp .wp-block-button__link:hover {
	border-color: #f97316 !important; /* hover:border-orange-500 */
	color: #f97316 !important; /* hover:text-orange-500 */
}

/* Contact CTA Icon - w-4 h-4 */
.hs-contact-cta-icon {
	width: 1rem; /* w-4 */
	height: 1rem; /* h-4 */
	flex-shrink: 0;
}

/* Contact Info Notice */
.hs-contact-info-notice {
	margin-top: 0;
	margin-bottom: 0;
}