/*
 * KW Biohof – Zahlen-&-Fakten-Widget. Wenige große Kennzahlen/Claims (Wert +
 * Beschriftung) in drei Stilen aus EINEM Datensatz: Karten, Schlicht, Band mit
 * Trennern. Komplett ohne JS – Hover und Scroll-Reveal sind reines CSS. Alle
 * Farben aus Tokens; lokale --biohof-facts-* mit Marken-Fallback, vom Stil-Tab
 * überschreibbar. Kein !important.
 *
 * Die Kennzahl ist bedeutungstragender Text → Standardfarbe = text-strong (WCAG).
 * Das Markengrün dient nur Symbol und Trennern (dekorativ).
 */

/* Spalten-Obergrenze als typisierte Ganzzahl mit Default 99 (= „unbegrenzt",
   die Mindestbreite regelt dann allein). „Automatisch" liefert bewusst keinen
   Integer und fällt darum sauber auf diesen Default zurück. */
@property --biohof-facts-cap {
	syntax: "<integer>";
	inherits: true;
	initial-value: 99;
}

.biohof-facts {
	--biohof-facts-min: 13rem;
	--biohof-facts-gap: var(--biohof-space-md);
	--biohof-facts-radius: var(--biohof-radius-lg);
	/* Wärmer & markentreuer als Grau – die Primärfarbe ist dunkles Waldgrün
	   (#2c6e49, AA-geprüft: 6,1:1 auf Weiß, 5,2:1 auf Karten-Tint). */
	--biohof-facts-value-color: var(--biohof-color-primary);
	--biohof-facts-label-color: var(--biohof-color-text);
	--biohof-facts-accent-color: var(--biohof-color-primary);
	--biohof-facts-surface-color: var(--biohof-color-surface-soft);

	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
	color: var(--biohof-facts-label-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* ── Einzelner Fakt (geteilt) ──────────────────────────────────────────────── */
.biohof-facts__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-space-xs);
	min-inline-size: 0;
	text-align: center;
}

.biohof-facts__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--biohof-facts-accent-color);
}

.biohof-facts__icon svg {
	display: block;
	inline-size: 1.9rem;
	block-size: 1.9rem;
}

/* Getöntes Medaillon nur für Karten & Schlicht – warm und mit etwas Tiefe. */
.biohof-facts--cards .biohof-facts__icon,
.biohof-facts--plain .biohof-facts__icon {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: var(--biohof-radius-pill);
	background: color-mix(in srgb, var(--biohof-facts-accent-color) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biohof-facts-accent-color) 22%, transparent);
}

.biohof-facts--cards .biohof-facts__icon svg,
.biohof-facts--plain .biohof-facts__icon svg {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

.biohof-facts__value {
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-800);
	font-weight: var(--biohof-weight-bold);
	line-height: var(--biohof-line-tight);
	color: var(--biohof-facts-value-color);
	text-wrap: balance;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Kurze Akzentlinie unter der Kennzahl – feiner, warmer Marken-Touch. */
.biohof-facts__value::after {
	content: "";
	display: block;
	inline-size: 1.75rem;
	block-size: 3px;
	margin: var(--biohof-space-2xs) auto 0;
	border-radius: var(--biohof-radius-pill);
	background: linear-gradient(
		to right,
		var(--biohof-facts-accent-color),
		color-mix(in srgb, var(--biohof-facts-accent-color) 30%, transparent)
	);
}

.biohof-facts__label {
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-facts-label-color);
	text-wrap: balance;
}

.biohof-facts__desc {
	margin: 0;
	font-size: var(--biohof-fs-300);
	line-height: var(--biohof-line-base);
	color: var(--biohof-color-text);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ══ Raster (Karten & Schlicht): Spaltenzahl aus dem Stil-Tab ════════════════ */
.biohof-facts--cards .biohof-facts__items,
.biohof-facts--plain .biohof-facts__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--biohof-facts-gap);
	/* RAM-Pattern mit Spalten-Obergrenze: auto-fit nutzt nie mehr als
	   --biohof-facts-cap Spalten und bricht bei zu wenig Platz selbständig um –
	   nie über den Rand. Die gewählte Spaltenzahl ist ein Maximum, kein Zwang. */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--biohof-facts-min),
				calc((100% - (var(--biohof-facts-cap) - 1) * var(--biohof-facts-gap)) / var(--biohof-facts-cap))
			),
			1fr
		)
	);
}

/* ── Subgrid: Symbol/Wert/Beschriftung/Erläuterung über alle Spalten exakt auf
   eine Linie bringen (Karten & Schlicht). Jede Karte übernimmt dieselben vier
   Zeilen-Spuren des Rasters; fehlt z.B. ein Symbol, bleibt die Wert-Zeile
   trotzdem bündig. Ohne Subgrid-Support → sauberer Fallback auf die
   Flex-Stapelung. ──────────────────────────────────────────────────────────── */
@supports (grid-template-rows: subgrid) {
	.biohof-facts--cards .biohof-facts__item,
	.biohof-facts--plain .biohof-facts__item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: var(--biohof-space-xs);
		justify-items: center;
	}
	.biohof-facts--cards .biohof-facts__icon,
	.biohof-facts--plain .biohof-facts__icon {
		grid-row: 1;
	}
	.biohof-facts--cards .biohof-facts__value,
	.biohof-facts--plain .biohof-facts__value {
		grid-row: 2;
	}
	.biohof-facts--cards .biohof-facts__label,
	.biohof-facts--plain .biohof-facts__label {
		grid-row: 3;
	}
	.biohof-facts--cards .biohof-facts__desc,
	.biohof-facts--plain .biohof-facts__desc {
		grid-row: 4;
	}
}

/* ══ Stil: Karten ════════════════════════════════════════════════════════════ */
.biohof-facts--cards .biohof-facts__item {
	padding: var(--biohof-space-lg) var(--biohof-space-md);
	background: var(--biohof-facts-surface-color);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-facts-radius);
	/* Sanfter Ruheschatten = etwas Tiefe; vertieft sich beim Überfahren. */
	box-shadow: var(--biohof-shadow-sm);
	/* Hover transformiert NIE das Item selbst (sonst Konflikt mit Reveal-transform). */
	transition: box-shadow var(--biohof-duration) var(--biohof-ease),
		border-color var(--biohof-duration) var(--biohof-ease);
}

@media (hover: hover) {
	.biohof-facts--cards .biohof-facts__item:hover {
		box-shadow: var(--biohof-shadow-md);
		border-color: color-mix(in srgb, var(--biohof-facts-accent-color) 40%, var(--biohof-color-border));
	}
	.biohof-facts--cards .biohof-facts__item:hover .biohof-facts__icon {
		transform: scale(1.08);
	}
}

.biohof-facts--cards .biohof-facts__icon {
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

/* ══ Stil: Band mit Trennern ═════════════════════════════════════════════════
   Bewusst NICHT umbrechende Reihe → senkrechte Trenner bleiben heil. Auf
   schmaler Breite (Container Query am inneren Element) stapeln die Fakten und
   die Trenner werden waagerecht. */
.biohof-facts--band .biohof-facts__items {
	container-type: inline-size;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.biohof-facts--band .biohof-facts__item {
	flex: 1 1 0;
	padding-inline: var(--biohof-facts-gap);
	padding-block: var(--biohof-space-2xs);
	border-inline-start: 1px solid color-mix(in srgb, var(--biohof-facts-accent-color) 40%, transparent);
}

.biohof-facts--band .biohof-facts__item:first-child {
	border-inline-start: 0;
}

@container (max-width: 40rem) {
	.biohof-facts--band .biohof-facts__items {
		flex-direction: column;
	}
	.biohof-facts--band .biohof-facts__item {
		border-inline-start: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--biohof-facts-accent-color) 40%, transparent);
		padding-block: var(--biohof-space-md);
	}
	.biohof-facts--band .biohof-facts__item:first-child {
		border-block-start: 0;
	}
}

/* ── Editor-Hinweis (leer) ─────────────────────────────────────────────────── */
.biohof-facts--empty {
	color: var(--biohof-color-text);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
}

/* ── Fokus sichtbar (Safety, falls künftig Links/Buttons dazukommen) ────────── */
.biohof-facts.biohof-facts :where(a, button):focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Jeder Fakt eigene Timeline
   → natürlicher Stagger ohne nth-child-Verzögerungen. ──────────────────────── */
@supports (animation-timeline: view()) {
	.biohof-facts--reveal .biohof-facts__item {
		animation: biohof-facts-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 40%;
	}
}

@keyframes biohof-facts-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-facts--reveal .biohof-facts__item {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.biohof-facts__item,
	.biohof-facts__icon {
		transition: none;
	}
}