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

/* Team Mini Section - py-12 md:py-16 */
.wp-block-group.hs-team-mini,
.wp-block-group.alignfull.hs-team-mini,
.hs-team-mini {
	padding-top: 4rem !important; /* py-12 */
	padding-bottom: 4rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-color: #f9fafb;
}

@media (min-width: 768px) {
	.wp-block-group.hs-team-mini,
	.hs-team-mini {
		padding-top: 4rem !important; /* md:py-16 */
		padding-bottom: 4rem !important;
	}
}

/* Team Mini Container - max-w-6xl mx-auto px-4 sm:px-6 */
.hs-team-mini-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-team-mini-container {
		padding-left: 1.5rem; /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

/* Title - text-xl md:text-2xl mb-6 md:mb-8 text-center */
.hs-team-mini-title {
	font-size: 1.5rem; /* text-xl */
	line-height: 1.5;
	font-weight: 600;
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 2rem;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.hs-team-mini-title {
		font-size: 1.5rem; /* md:text-2xl */
	}
}

.hs-team-mini-description {
	text-align: center;
	font-size: 1rem;
	color: var(--muted-foreground, #717182);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	line-height: 1.5;
	font-weight: 400;
}

/* Team Mini Grid – flex + justify-center: wenige Mitglieder bleiben zentriert */
.hs-team-mini-grid.wp-block-columns {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 1rem;
	margin: 0 !important;
}

/* Spaltenbreite wie 2 / 3 / 4-Spalten-Grid, Inhalt zentriert bei Lücken */
.hs-team-mini-grid.wp-block-columns > .wp-block-column {
	flex: 0 1 calc((100% - 1rem) / 2);
	max-width: calc((100% - 1rem) / 2);
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	.hs-team-mini-grid.wp-block-columns {
		gap: 1.5rem;
	}

	.hs-team-mini-grid.wp-block-columns > .wp-block-column {
		flex: 0 1 calc((100% - 3rem) / 3);
		max-width: calc((100% - 3rem) / 3);
	}
}

@media (min-width: 1024px) {
	.hs-team-mini-grid.wp-block-columns > .wp-block-column {
		flex: 0 1 calc((100% - 4.5rem) / 4);
		max-width: calc((100% - 4.5rem) / 4);
	}
}

/* Team Member - text-center */
.hs-team-mini-member {
	text-align: center;
}

/* Team Image - w-24 h-24 md:w-32 md:h-32 mx-auto mb-2 md:mb-3 rounded-full overflow-hidden shadow-lg */
.hs-team-mini-image {
	margin: 0 auto 0.5rem !important; /* mb-2 */
	width: 8rem; /* w-24 */
	height: 8rem; /* h-24 */
	border-radius: 9999px; /* rounded-full */
	overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
	display: block;
	margin-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
	.hs-team-mini-image {
		width: 8rem; /* md:w-32 */
		height: 8rem; /* md:h-32 */
		margin-bottom: 0.75rem !important; /* md:mb-3 */
	}
}

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

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

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

/* Team Name - text-sm md:text-base mb-1 */
.hs-team-mini-name {
	font-size: 1rem; /* text-sm */
	line-height: 1.5;
	font-weight: var(--font-weight-medium, 500);
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 0.25rem; /* mb-1 */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.hs-team-mini-name {
		font-size: 1rem; /* md:text-base */
	}
}

/* Team Role - text-xs text-gray-600 */
.hs-team-mini-role {
	font-size: 0.85rem; /* text-xs */
	color: var(--muted-foreground, #717182); /* text-gray-600 */
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	text-align: center;
	font-weight: 400;
}