/**
 * WX APIfy — frontend output styling.
 *
 * Theme-neutral, dezent. Greift nur innerhalb von .wxa-output / .wxa-field,
 * damit das Theme nicht überschrieben wird.
 */

.wxa-output {
	margin: 1em 0;
	font-size: inherit;
	line-height: 1.5;
}

.wxa-output .wxa-empty,
.wxa-detail .wxa-empty {
	margin: 0;
	padding: 0.5em 0.75em;
	color: #666;
	font-style: italic;
	border-left: 3px solid #ddd;
	background: #f7f7f7;
}

/* Definition list look for object / item output. */
.wxa-output dl {
	display: grid;
	grid-template-columns: minmax(8em, max-content) 1fr;
	gap: 0.25em 1em;
	margin: 0;
	padding: 0;
}

.wxa-output dt {
	margin: 0;
	font-weight: 600;
	color: #1d2327;
	overflow-wrap: anywhere;
}

.wxa-output dd {
	margin: 0;
	color: #2c3338;
	overflow-wrap: anywhere;
}

/* One box per item in a list response. */
.wxa-output .wxa-item {
	padding: 0.75em 1em;
	margin: 0 0 0.75em;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
	background: #fff;
}

.wxa-output .wxa-item:last-child {
	margin-bottom: 0;
}

/* Inline single-field output. */
.wxa-field {
	display: inline;
}

/* ===========================================================================
 * Block scaffold — wx-apify/list, /item, /field, /image, /badge, /link, /filter.
 *
 * Layout & structure ONLY. Colours, fonts, borders and fine spacing are left
 * to the theme (e.g. rules on .wxa-field--title, .wxa-badge, .wxa-filter). The
 * intra-card row arrangement (image left / text right) is also a theme concern.
 * The item block's .wxa-detail wrapper is deliberately bare — a pure theme hook.
 * ========================================================================= */

.wxa-list {
	margin: 1.5rem 0;
}

.wxa-list--grid {
	display: grid;
	grid-template-columns: repeat(var(--wxa-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

.wxa-list--rows {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wxa-card {
	position: relative;
	min-width: 0;
}

.wxa-card.is-hidden {
	display: none;
}

/* Filter field hidden by a conditional-visibility rule (data-wxa-when-*).
   !important so it wins over theme layout rules on .wxa-filter__field. */
.wxa-filter__field.is-hidden {
	display: none !important;
}

.wxa-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wxa-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Unresolved/empty image URL token collapses (like .wxa-badge:empty). */
.wxa-image[src=""] {
	display: none;
}

.wxa-field--eyebrow,
.wxa-field--meta {
	display: block;
}

.wxa-field--title,
.wxa-field--price {
	display: block;
}

/* Empty badge (missing value) collapses. */
.wxa-badge:empty {
	display: none;
}

/* Filter bar. */
.wxa-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
}

.wxa-filter__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.wxa-filter__count {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
}

@media (max-width: 600px) {
	.wxa-list--grid {
		grid-template-columns: 1fr;
	}

	.wxa-filter__field {
		flex: 1 1 100%;
	}
}