/* KW Biohof – Galerie-Widget (biohof_catalog, „Biohof Galerie": CPT-Karten-Raster).
 *
 * Karten-Raster mit client-seitigem Filter (Pills) + Live-Suche + Lightbox.
 * Versteckte Karten: hidden + content-visibility (kein Layout/Paint, Bilder
 * laden per loading="lazy" nicht). Tokens fallen auf die Marken-Farben zurück,
 * solange im Style-Tab nichts gesetzt ist. Kein !important. */

.biohof-cat {
	--biohof-cat-gap: var(--biohof-space-md);
	--biohof-cat-ratio: 4 / 3;
	--biohof-cat-img-pos: center center;
	--biohof-cat-card-bg: var(--biohof-color-surface);
	--biohof-cat-title-color: var(--biohof-color-text-strong);
	--biohof-cat-meta-color: var(--biohof-color-text);
	--biohof-cat-card-radius: var(--biohof-radius-md);
	--biohof-cat-pill-active-bg: var(--biohof-color-primary);
	--biohof-cat-pill-active-fg: var(--biohof-color-on-primary);

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

.biohof-cat--empty {
	color: var(--biohof-color-text-muted);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
}

/* Überschrift: geteilte Komponente (assets/css/core/heading.css). */

/* ── Werkzeugleiste (Suche + Filter) ────────────────────────────────────── */

.biohof-cat__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--biohof-space-sm) var(--biohof-space-md);
}

.biohof-cat__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 14rem;
	max-inline-size: 22rem;
}

.biohof-cat__search-icon {
	position: absolute;
	inset-inline-start: 0.75rem;
	display: inline-flex;
	color: var(--biohof-color-text-muted);
	pointer-events: none;
}

.biohof-cat__search-icon svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

/* Doppel-Klasse (0,3,0): erzwingt das Innenabstand-Padding gegen Theme-/Elementor-
   Input-Styles – sonst rutscht der Platzhalter unter die Lupe (links 2.4rem hält
   Abstand zum Icon, rechts 2.6rem zum Lösch-Button). */
.biohof.biohof-cat .biohof-cat__search-input {
	inline-size: 100%;
	padding: 0.55rem 2.6rem 0.55rem 2.4rem;
	font: inherit;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text);
	background: var(--biohof-color-bg);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-pill);
}

.biohof-cat__search-clear {
	position: absolute;
	inset-inline-end: 0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--biohof-color-text-muted);
	cursor: pointer;
	border-radius: var(--biohof-radius-pill);
}

.biohof-cat__search-clear[hidden] {
	display: none;
}

.biohof-cat__search-clear svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.biohof-cat__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--biohof-space-2xs);
}

.biohof-cat__pill {
	appearance: none;
	min-block-size: 44px;
	padding: 0.35rem 0.9rem;
	font: inherit;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text);
	background: transparent;
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-pill);
	cursor: pointer;
	transition: color var(--biohof-duration) var(--biohof-ease), background-color var(--biohof-duration) var(--biohof-ease), border-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-cat__pill[aria-pressed="true"] {
	color: var(--biohof-cat-pill-active-fg);
	background: var(--biohof-cat-pill-active-bg);
	border-color: var(--biohof-cat-pill-active-bg);
}

@media (hover: hover) {
	.biohof-cat__pill:hover {
		color: var(--biohof-color-primary);
		border-color: var(--biohof-color-primary);
	}

	.biohof-cat__pill[aria-pressed="true"]:hover {
		color: var(--biohof-cat-pill-active-fg);
	}
}

/* „Filter zurücksetzen" – dezenter Text-Knopf, nur bei aktivem Filter/Suche
   (JS blendet ihn ein). */
.biohof-cat__reset {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--biohof-space-2xs);
	min-block-size: 44px;
	padding: 0.35rem 0.6rem;
	font: inherit;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text-muted);
	background: none;
	border: 0;
	border-radius: var(--biohof-radius-pill);
	cursor: pointer;
	transition: color var(--biohof-duration) var(--biohof-ease);
}

.biohof-cat__reset[hidden] {
	display: none;
}

.biohof-cat__reset svg {
	inline-size: 0.9rem;
	block-size: 0.9rem;
}

@media (hover: hover) {
	.biohof-cat__reset:hover {
		color: var(--biohof-color-primary);
	}
}

/* ── Raster ─────────────────────────────────────────────────────────────── */

.biohof-cat__grid {
	--biohof-cat-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--biohof-cat-cols), minmax(0, 1fr));
	gap: var(--biohof-cat-gap);
}

/* ── Karte ──────────────────────────────────────────────────────────────── */

.biohof-cat__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--biohof-cat-card-bg);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-cat-card-radius);
	content-visibility: auto;
	contain-intrinsic-size: auto 22rem;
}

/* Eigene Klassen-Regel schlägt das UA-[hidden] (sonst bliebe die Karte sichtbar). */
.biohof-cat__item[hidden] {
	display: none;
}

.biohof-cat__media {
	display: block;
	position: relative;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	background: var(--biohof-color-surface-soft);
}

.biohof-cat__media--button {
	appearance: none;
	border: 0;
	cursor: pointer;
}

.biohof-cat__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--biohof-cat-ratio);
	object-fit: cover;
	object-position: var(--biohof-cat-img-pos);
}

.biohof-cat__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--biohof-cat-ratio);
	color: var(--biohof-color-text-muted);
}

.biohof-cat__img--placeholder svg {
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

.biohof-cat__zoom {
	position: absolute;
	inset-block-end: var(--biohof-space-xs);
	inset-inline-end: var(--biohof-space-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	color: var(--biohof-color-on-primary);
	background: color-mix(in srgb, var(--biohof-color-primary) 88%, transparent);
	border-radius: var(--biohof-radius-pill);
	opacity: 0;
	transform: translateY(0.3rem);
	transition: opacity var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-cat__zoom svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

@media (hover: hover) {
	.biohof-cat__media--button:hover .biohof-cat__zoom,
	.biohof-cat__media--button:focus-visible .biohof-cat__zoom {
		opacity: 1;
		transform: translateY(0);
	}

	.biohof-cat__media--button:hover .biohof-cat__img {
		transform: scale(1.03);
	}
}

.biohof-cat__media--button .biohof-cat__img {
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-cat__media--button:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: -3px;
}

.biohof-cat__body {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-2xs);
	padding: var(--biohof-space-md);
	flex: 1 1 auto;
}

.biohof-cat__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--biohof-space-2xs);
	margin: 0 0 var(--biohof-space-2xs);
	padding: 0;
	list-style: none;
}

.biohof-cat__badge {
	display: inline-block;
	padding: 0.15em 0.65em;
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	line-height: 1.5;
	color: var(--biohof-color-text-strong);
	background: color-mix(in srgb, var(--biohof-color-primary) 12%, var(--biohof-color-bg));
	border-radius: var(--biohof-radius-pill);
}

.biohof-cat__badge--success {
	background: color-mix(in srgb, var(--biohof-color-primary) 22%, var(--biohof-color-bg));
}

.biohof-cat__badge--neutral {
	color: var(--biohof-color-text);
	background: transparent;
	border: 1px solid var(--biohof-color-border);
}

.biohof-cat__name {
	margin: 0;
	font-size: var(--biohof-fs-500);
	color: var(--biohof-cat-title-color);
}

.biohof-cat__subtitle {
	margin: 0;
	color: var(--biohof-color-text);
}

.biohof-cat__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: var(--biohof-space-2xs) 0 0;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-cat-meta-color);
}

.biohof-cat__meta-row {
	display: flex;
	gap: 0.4rem;
}

.biohof-cat__meta-label {
	font-weight: var(--biohof-weight-medium);
}

.biohof-cat__meta-label::after {
	content: ":";
}

.biohof-cat__meta-value {
	margin: 0;
}

/* ── CTA als Karten-Footer ───────────────────────────────────────────────────
   Plastik (Glanz/Relief/Hover/Defense) liegt in assets/css/core/card-cta.css.
   Hier nur das Andocken: volle Kartenbreite, eckig (overflow:hidden der Karte
   rundet die unteren Ecken), Fokusring nach innen, kein Hover-Lift. */
.biohof-cat__cta {
	display: flex;
}

.biohof-cat__cta-icon {
	display: inline-flex;
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-cat__cta-icon svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

@media (hover: hover) {
	.biohof-cat__cta:hover .biohof-cat__cta-icon {
		transform: translate(1px, -1px);
	}
}

.biohof-cat__cta:focus-visible {
	outline-offset: -3px;
}

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

/* ── Leerzustand (Suche/Filter ohne Treffer) ────────────────────────────── */

.biohof-cat__noresults {
	margin: 0;
	padding: var(--biohof-space-lg);
	text-align: center;
	color: var(--biohof-color-text-muted);
}

.biohof-cat__noresults[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.biohof-cat__pill,
	.biohof-cat__zoom,
	.biohof-cat__media--button .biohof-cat__img {
		transition: none;
	}
}