/**
 * Gruppen-Preview + Group-Card — Steckbrief-Stil (DESIGN.md §7.6)
 *
 * 8 Mini-Cards in einem Grid. Foto-Platzhalter, 3px-Strich in Charakter-Farbe,
 * Name + Alterssgruppe. Kein Card-on-Card-Schachteln, keine Schatten ausser
 * dem leichten Hover-Lift (DESIGN.md §10.2).
 *
 * Charakter-Farbe wird per inline `--gruppe-farbe` gesetzt (siehe template-parts).
 */

.groups-preview {
	background-color: color-mix(in oklab, var(--color-cream) 92%, var(--color-deep-brown));
	padding-block: var(--space-10);
}

@media (min-width: 1024px) {
	.groups-preview {
		padding-block: var(--space-16);
	}
}

.groups-preview__header {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	margin-bottom: var(--space-10);
}

.groups-preview__heading {
	font-size: var(--font-size-h2);
	color: var(--color-midnight);
	margin-bottom: var(--space-3);
	line-height: var(--line-height-snug);
}

.groups-preview__intro {
	font-size: var(--font-size-body-lg);
	color: var(--color-text-body);
	line-height: var(--line-height-relaxed);
}

.groups-preview__list {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.groups-preview__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.groups-preview__list {
		gap: var(--space-8);
	}
}

/* ── Group Card ──────────────────────────────────────────────────────── */

.group-card {
	background-color: var(--color-cream);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	list-style: none;
	transition:
		transform 200ms var(--ease-out),
		box-shadow 200ms var(--ease-out);
}

.group-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -12px rgba(43, 33, 25, 0.18);
}

.group-card__photo {
	aspect-ratio: 4 / 3;
	background-color: color-mix(in oklab, var(--gruppe-farbe, var(--color-cream)) 18%, var(--color-cream));
	background-image:
		radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--gruppe-farbe) 30%, transparent), transparent 60%),
		radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--gruppe-farbe) 18%, transparent), transparent 70%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.group-card__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.group-card__stripe {
	height: 3px;
	background-color: var(--gruppe-farbe);
}

.group-card__name {
	font-size: var(--font-size-h4);
	color: var(--color-midnight);
	padding: var(--space-4) var(--space-4) var(--space-1) var(--space-4);
	line-height: var(--line-height-snug);
}

.group-card__age {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	padding: 0 var(--space-4) var(--space-4) var(--space-4);
	line-height: var(--line-height-normal);
}