/*
 * Listing row.
 *
 * Two irreducible bits, both because core has no equivalent:
 *   - a bound field with no value leaves an empty element behind, and there is
 *     no conditional block, so empties are collapsed here;
 *   - the whole row is a click target, which needs a stretched overlay on the
 *     title link rather than wrapping the row in an anchor (block markup cannot
 *     nest a Query Loop's contents inside a single link).
 *
 * Tokens come from theme.json. No hardcoded colour or spacing values.
 */

.wb-listing {
	position: relative;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.wb-listing:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
}

/* Stretch the title link over the whole row. */
.wb-listing .wp-block-post-title a::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
}

.wb-listing .wp-block-post-title {
	margin: 0;
}

/* Keep the row title and its badge on one line, badge pushed right. */
.wb-listing__head {
	width: 100%;
}

/* Facts sit on one line on wide screens and wrap on narrow ones. */
.wb-listing__facts > * {
	margin: 0;
}

/* Unfilled bindings leave empty elements behind. */
.wb-listing__meta:empty,
.wb-listing__badge:empty,
.wb-listing .wp-block-post-excerpt:has(.wp-block-post-excerpt__excerpt:empty) {
	display: none;
}

.wb-listing__badge:not(:empty) {
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.15em 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* Anything genuinely interactive must sit above the stretched overlay. */
.wb-listing a:not(.wp-block-post-title a),
.wb-listing .wp-block-button {
	position: relative;
	z-index: 1;
}