/**
 * Zertifikate-Widget: ruhige Siegel-Kacheln mit optionaler Beschriftung.
 * JS-frei; Größen über Modifier-Klassen, Farben über Tokens.
 *
 * Logo-Leisten-Prinzip: Alle Siegel werden gleich HOCH dargestellt (feste
 * Logo-Höhe), die Kacheln sind gleich hoch und passen ihre Breite ans Logo an
 * (mindestens quadratisch). So wirken Siegel verschiedener Seitenverhältnisse
 * gleich groß, statt dass quadratische die Kachel füllen und breite verloren wirken.
 */

.biohof.biohof-certs {
	--certs-h: 6rem;        /* Kachelhöhe – für alle gleich. */
	--certs-logo: 3.75rem;  /* Logohöhe – für alle gleich. */

	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
}

.biohof.biohof-certs.biohof-certs--s {
	--certs-h: 5rem;
	--certs-logo: 3rem;
}

.biohof.biohof-certs.biohof-certs--l {
	--certs-h: 8rem;
	--certs-logo: 5rem;
}

.biohof.biohof-certs .biohof-certs__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--biohof-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: flex-start;
}

.biohof.biohof-certs.biohof-certs--center .biohof-certs__items {
	justify-content: center;
}

.biohof.biohof-certs.biohof-certs--end .biohof-certs__items {
	justify-content: flex-end;
}

.biohof.biohof-certs .biohof-certs__link,
.biohof.biohof-certs .biohof-certs__static {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-space-xs);
	text-decoration: none;
}

/* Kachel: feste HÖHE (alle gleich), Breite passt sich dem Logo an (mind.
   quadratisch). Siegel-Grafiken verlangen einen hellen Grund – Kachel bleibt in
   beiden Modi hell (mode-unabhängig, wie die Lightbox-Flächen). */
.biohof.biohof-certs .biohof-certs__tile {
	display: grid;
	place-items: center;
	block-size: var(--certs-h);
	min-inline-size: var(--certs-h);
	padding-inline: var(--biohof-space-md);
	background-color: white;
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-lg);
	transition: transform var(--biohof-duration) var(--biohof-ease), box-shadow var(--biohof-duration) var(--biohof-ease);
}

/* Feste Logo-HÖHE (statt height:auto) → alle Siegel gleich groß, unabhängig vom
   Seitenverhältnis; Breite frei (großzügiges Limit für sehr breite Siegel).
   Spezifität (0,3,0) schlägt Elementors `.elementor img { height:auto }` (0,1,1). */
.biohof.biohof-certs .biohof-certs__img {
	block-size: var(--certs-logo);
	inline-size: auto;
	max-inline-size: 14rem;
	object-fit: contain;
}

/* Beschriftung liegt auf dem Seitengrund: Name kräftig, Nummer gedämpft. */
.biohof.biohof-certs .biohof-certs__caption {
	display: flex;
	flex-direction: column;
	max-inline-size: 12rem;
	text-align: center;
}

.biohof.biohof-certs .biohof-certs__name {
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-color-text);
}

.biohof.biohof-certs .biohof-certs__number {
	font-size: var(--biohof-fs-300);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-color-text-muted);
}

/* Pink-Defense: Linkfarben in jedem Zustand explizit halten (0,3,2). */
.biohof.biohof-certs a.biohof-certs__link,
.biohof.biohof-certs a.biohof-certs__link:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-text);
}

@media (hover: hover) {
	.biohof.biohof-certs a.biohof-certs__link:hover .biohof-certs__tile {
		transform: translateY(-3px);
		box-shadow: 0 6px 18px color-mix(in srgb, var(--biohof-color-text) 14%, transparent);
	}
}

.biohof.biohof-certs a.biohof-certs__link:focus-visible {
	outline: 3px solid var(--biohof-color-primary);
	outline-offset: 2px;
	border-radius: var(--biohof-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
	.biohof.biohof-certs .biohof-certs__tile {
		transition: none;
	}

	.biohof.biohof-certs a.biohof-certs__link:hover .biohof-certs__tile {
		transform: none;
	}
}