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

/* Key Facts Section - py-6 md:py-8 bg-white */
.wp-block-group.hs-key-facts,
.wp-block-group.alignfull.hs-key-facts,
.hs-key-facts {
	background-color: #ffffff !important; /* bg-white */
	padding-top: 1.5rem !important; /* py-6 */
	padding-bottom: 1.5rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.wp-block-group.hs-key-facts,
	.hs-key-facts {
		padding-top: 2rem !important; /* md:py-8 */
		padding-bottom: 2rem !important;
	}
}

/* Key Facts Container - max-w-6xl mx-auto px-4 sm:px-6 */
.hs-key-facts-container {
	max-width: 72rem; /* max-w-6xl = 1152px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
}

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

/* Key Facts Wrapper - bg-gray-50 rounded-[20px] md:rounded-[30px] p-6 md:p-8 shadow-sm */
.hs-key-facts-wrapper {
	background-color: #f9fafb; /* bg-gray-50 */
	border-radius: 20px; /* rounded-[20px] */
	padding: 1.5rem; /* p-6 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	margin: 0;
}

@media (min-width: 768px) {
	.hs-key-facts-wrapper {
		border-radius: 30px; /* md:rounded-[30px] */
		padding: 2rem; /* md:p-8 */
	}
}

/* Heading - text-xl md:text-2xl mb-5 md:mb-6 */
.hs-key-facts-heading {
	font-size: 1.25rem; /* text-xl */
	line-height: 1.5;
	font-weight: 600;
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 1.75rem; /* mb-5 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

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

/* Key Facts Grid - grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 */
.hs-key-facts-grid.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem; /* gap-4 */
	margin: 0 !important;
}

@media (min-width: 640px) {
	.hs-key-facts-grid.wp-block-columns {
		grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
		gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.hs-key-facts-grid.wp-block-columns {
		grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
	}
}

@media (min-width: 768px) {
	.hs-key-facts-grid.wp-block-columns {
		gap: 1.5rem; /* md:gap-6 */
	}
}

/* Reset column padding/margin and set flex layout */
.hs-key-facts-grid.wp-block-columns .wp-block-column,
.hs-key-facts-grid.wp-block-columns .wp-block-column.hs-key-facts-item {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important; /* gap-3 */
	width: 100%;
}

@media (min-width: 768px) {
	.hs-key-facts-grid.wp-block-columns .wp-block-column,
	.hs-key-facts-grid.wp-block-columns .wp-block-column.hs-key-facts-item {
		gap: 1rem !important; /* md:gap-4 */
	}
}

/* Key Facts Item - flex items-start gap-3 md:gap-4 */
.hs-key-facts-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important; /* gap-3 */
	width: 100%;
}

@media (min-width: 768px) {
	.hs-key-facts-item {
		gap: 1rem !important; /* md:gap-4 */
	}
}

/* Icon Wrapper - w-9 h-9 md:w-10 md:h-10 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0 */
.hs-key-facts-icon-wrapper {
	width: 2.25rem !important; /* w-9 */
	height: 2.25rem !important; /* h-9 */
	background-color: #ffedd5 !important; /* bg-orange-100 */
	border-radius: 0.75rem !important; /* rounded-xl */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	.hs-key-facts-icon-wrapper {
		width: 2.5rem; /* md:w-10 */
		height: 2.5rem; /* md:h-10 */
	}
}

/* Icon Text Block in Key Facts */
.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text .hs-icon-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	gap: 0;
}

.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text .hs-icon-text__icon {
	width: 1.25rem; /* w-4 */
	height: 1.25rem; /* h-4 */
	color: #f97316; /* text-orange-500 */
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text .hs-icon-text__icon {
		width: 1.5rem; /* md:w-5 */
		height: 1.5rem; /* md:h-5 */
	}
}

.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text .hs-icon-text__icon svg {
	width: 100%;
	height: 100%;
	color: #f97316;
	stroke: #f97316;
    stroke-width: 1.5px;
}

.hs-key-facts-icon-wrapper .wp-block-hundeschule-icon-text .hs-icon-text__content {
	display: none; /* Hide text content */
}

/* Key Facts Content - flex-1 min-w-0 */
.hs-key-facts-content {
	flex: 1 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

.hs-key-facts-content .wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Label - text-xs text-gray-500 mb-1 */
.hs-key-facts-label,
.hs-key-facts-content .hs-key-facts-label,
.hs-key-facts-content p.hs-key-facts-label {
	font-size: 0.95rem !important; /* text-xs */
	color: var(--muted-foreground, #6b7280) !important; /* text-gray-500 */
	margin-bottom: 0.125rem !important; /* mb-1 */
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	line-height: 1.5;
	font-weight: 500;
}

/* Value - text-sm text-gray-900 */
.hs-key-facts-value,
.hs-key-facts-content .hs-key-facts-value,
.hs-key-facts-content p.hs-key-facts-value {
	font-size: 0.85rem !important; /* text-sm */
	color: var(--foreground, #111827) !important; /* text-gray-900 */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	line-height: 1.5;
	font-weight: 400;
}