/**
 * Cards List Pattern Styles
 *
 * Styling für das Cards List Pattern basierend auf React Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* Cards List Section - py-16 bg-white */
.wp-block-group.hs-cards-list-section,
.wp-block-group.alignfull.hs-cards-list-section,
.hs-cards-list-section {
	background-color: #ffffff;
	padding-top: 4rem; /* py-16 */
	padding-bottom: 4rem;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Cards List Container - max-w-6xl mx-auto px-6 */
.hs-cards-list-container {
	max-width: 72rem !important; /* max-w-6xl = 1152px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem; /* px-6 */
	padding-right: 1.5rem;
}

/* Cards List Header - text-center mb-10 */
.hs-cards-list-header {
	text-align: center;
	margin-bottom: 2.5rem; /* mb-10 */
}

/* Cards List Title - text-3xl mb-2 */
.hs-cards-list-title {
	font-size: 1.875rem; /* text-3xl */
	line-height: 1.2;
	margin-bottom: 0.5rem; /* mb-2 */
	font-weight: 600;
	color: #1f2937; /* text-gray-800 */
}

/* Cards List Subtitle - text-base text-gray-600 */
.hs-cards-list-subtitle {
	font-size: 1rem; /* text-base */
	color: #4b5563; /* text-gray-600 */
	margin: 0;
}

.hs-cards-list-note {
	color: #6b7280;
	font-size: 0.875rem; /* text-sm */
	margin-bottom: 1.5rem;
}

/* Query Grid - grid md:grid-cols-3 gap-6 */
.hs-cards-list-container .wp-block-query {
	margin: 0;
}

.hs-cards-list-container .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem; /* gap-6 */
	margin: 0;
}

@media (min-width: 768px) {
	.hs-cards-list-container .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Card Link - Makes entire card clickable */
.hs-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
	outline: none;
	border: none;
}

.hs-card-link:hover {
	text-decoration: none;
}

.hs-card-link:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.hs-card-link:focus-visible {
	outline: none;
	border: none;
	box-shadow: none;
}

/* Card Item - bg-white border-2 border-gray-100 rounded-3xl overflow-hidden hover:border-orange-200 transition-all hover:shadow-lg */
.hs-card-item {
	background: linear-gradient(to bottom right, #f9fafb, rgba(255, 237, 213, 0.3));
	border: 2px solid #f3f4f6; /* border-gray-100 */
	border-radius: 24px; /* rounded-3xl */
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

@media (min-width: 768px) {
	.hs-card-item {
background: #fff;
}
}



.hs-card-item .wp-block-group {
	margin-left: 0 !important;
}

/* Hover effects on card - works both when wrapped in link and standalone */
.hs-card-link:hover .hs-card-item,
.hs-card-item:hover {
	border-color: #fed7aa; /* hover:border-orange-200 */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

/* Card Image - h-48 overflow-hidden */
.hs-card-image {
	height: 12rem; /* h-48 */
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.hs-card-image img,
.hs-card-image figure {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Remove link styling from images in cards */
.hs-card-image a,
.hs-card-item .hs-card-image a {
	pointer-events: none;
	text-decoration: none;
	cursor: default;
}

.hs-card-image a:hover,
.hs-card-item .hs-card-image a:hover {
	text-decoration: none;
}

/* Card Title - text-xl mb-2 */
.hs-card-title {
	font-size: 1.25rem; /* text-xl */
	line-height: 1.3;
	margin-bottom: 0.5rem; /* mb-2 */
	font-weight: 600;
	color: #1f2937; /* text-gray-800 */
}

/* Title color should NOT change on hover */
.hs-card-link:hover .hs-card-title,
.hs-card-item:hover .hs-card-title {
	color: #1f2937; /* Keep original color */
}

/* Card Description - text-gray-600 mb-4 text-sm */
.hs-card-description {
	color: #4b5563; /* text-gray-600 */
	margin-bottom: 1rem; /* mb-4 */
	font-size: 1rem !important; /* text-sm */
	line-height: 1.5;
}

.hs-card-footer {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hs-seminar-details-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
    margin-left: 0 !important;
}

.hs-seminar-detail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #4b5563;
    font-weight: 400;
}

.hs-seminar-detail .hs-seminar-icon {
	width: 0.975rem;
	height: 0.975rem;
	flex-shrink: 0;
	color: #f97316;
}

/* Features List - space-y-1.5 */
.hs-features-list {
	list-style: none;
	padding: 0;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.375rem; /* space-y-1.5 */
}

/* Features Item - flex items-center gap-2 text-xs text-gray-700 */
.hs-features-item {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* gap-2 */
	font-size: 0.85rem; /* text-xs */
	color: #374151; /* text-gray-700 */
	line-height: 1.5;
}

/* Features Check Icon - w-3.5 h-3.5 text-orange-500 */
.hs-features-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem; /* w-3.5 */
	height: 0.875rem; /* h-3.5 */
	flex-shrink: 0;
	color: #f97316; /* text-orange-500 */
}

.hs-features-check-icon {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

/* Features Text */
.hs-features-text {
	flex: 1;
}

/* Card Details Link Button */
.hs-card-button-wrapper {
	margin-top: 1rem !important;
	margin-bottom: 0 !important;
}

.hs-card-details-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;
	position: relative;
	transition: color 0.2s ease;
}

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

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

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

.hs-card-details-underline {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 0.1rem; /* h-0.5 */
	background-color: #f97316; /* bg-orange-500 */
	transition: width 0.3s ease;
}

.hs-card-details-link:hover .hs-card-details-underline {
	width: 100%;
}