/**
 * ZARE Listing Card facts and location presentation.
 *
 * Keeps the accepted Card recipe generic while specializing the reusable
 * Listing-family metadata anatomy. Facts remain a single row when space allows
 * and become a balanced 2×2 grid on mobile or in an unusually narrow card.
 */

.zare-recipe--card-listing {
	--zare-recipe-meta-inline-gap: var(--zare-theme-icon-standard-inline-gap);
	--zare-listing-card-media-ratio: 4 / 3;
	container-name: zare-listing-card;
	container-type: inline-size;
}

.zare-recipe--card-listing > .zare-recipe__card-media {
	aspect-ratio: var(--zare-listing-card-media-ratio);
	min-block-size: 0;
}

.zare-recipe--card-listing > .zare-recipe__card-media > :where(figure, .wp-block-cover, .wp-block-gallery, .zare-media-gallery-runtime),
.zare-recipe--card-listing > .zare-recipe__card-media > :where(figure, .wp-block-cover, .wp-block-gallery, .zare-media-gallery-runtime) > :where(a, img, .zare-media-gallery-runtime__track) {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
}

.zare-recipe--card-listing > .zare-recipe__card-media :where(img, .wp-block-cover__image-background) {
	object-fit: cover;
}

.zare-recipe__card-location,
.zare-recipe__card-facts > .wp-block-group {
	display: flex;
	min-inline-size: 0;
	align-items: center;
	justify-content: flex-start;
	gap: var(--zare-recipe-meta-inline-gap);
	text-align: start;
}

.zare-recipe__card-location > *,
.zare-recipe__card-facts > .wp-block-group > * {
	margin-block: 0;
}

.zare-recipe__card-location .wp-block-icon,
.zare-recipe__card-facts > .wp-block-group .wp-block-icon {
	flex: 0 0 auto;
	inline-size: var(--zare-theme-icon-standard-inline-size);
	block-size: var(--zare-theme-icon-standard-inline-size);
}

.zare-recipe__card-location .wp-block-icon svg,
.zare-recipe__card-facts > .wp-block-group .wp-block-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/*
 * The controlled 4:3 Listing media stage is taller than Core Cover's legacy
 * minimum. Stretch the authored overlay through the full stage so Top Start
 * and Bottom Start remain true media-edge anchors at every card width.
 */
.zare-recipe--card-listing.zare-recipe--card-media-highlights .wp-block-cover__inner-container,
.zare-recipe--card-listing.zare-recipe--card-media-highlights .zare-recipe__card-media-overlay {
	block-size: 100%;
	min-block-size: 0;
}

.zare-recipe--card-listing .zare-recipe__card-facts {
	justify-content: flex-start;
}

@media (max-width: 480px) {
	.zare-recipe--card-listing .zare-recipe__card-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		justify-items: start;
	}

	.zare-recipe--card-listing .zare-recipe__card-facts > .wp-block-group {
		inline-size: 100%;
	}
}

@container zare-listing-card (max-width: 27.5rem) {
	.zare-recipe--card-listing .zare-recipe__card-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		justify-items: start;
	}

	.zare-recipe--card-listing .zare-recipe__card-facts > .wp-block-group {
		inline-size: 100%;
	}
}