/* Campaign badge row — used at the bottom of apartment cards, below the
   single page gallery, and inside the vacant-apartments table. */

.ValuCampaignBadges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;

}

.ValuCampaignBadges--card {
	margin-top: var(--wp--preset--spacing--40, 12px);
	padding-top: var(--wp--preset--spacing--40, 12px);
	border-top: 1px solid var(--wp--preset--color--base-2, #e7eef5);
	padding-bottom: var(--wp--preset--spacing--20, 12px);
}

/* The wrapper carries `alignwide` for these surfaces, so the block-theme
   handles centering and width. Just add vertical spacing. */
.ValuCampaignBadges--single,
.ValuCampaignBadges--cost-pool {
	margin-block: var(--wp--preset--spacing--40, 16px);
}

.ValuCampaignBadges--table {
	gap: 4px;
}

/* Apartment-number cell wrapper in the vacant-apartments table — sits the
   apartment number link inline with the campaign badges. */
.SinglePage__ApartmentsTable__NumberCell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ValuCampaignBadges__Item {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--base, #fff);
	background: var(--wp--preset--color--primary, #003a7a);
	border-radius: 999px;
	white-space: nowrap;
}

.ValuCampaignBadges__Item--priority-1 {
	background: var(--wp--preset--color--primary, #003a7a);
}

.ValuCampaignBadges__Item--priority-2 {
	background: var(--wp--preset--color--accent-two, #008CD2);
}

.ValuCampaignBadges__Item--priority-3 {
	background: var(--wp--preset--color--base, #fff);
	border: 2px solid var(--wp--preset--color--accent-two, #008CD2);
	color: var(--wp--preset--color--primary, #003a7a);
}

/* Vacant-apartments table — responsive campaign column.
   Mobile-first: dedicated column is hidden; badges render inline next to the
   apartment number. From 768px up, the dedicated column takes over and the
   inline copy is hidden. Both slots are rendered server-side (see
   VacantTableColumn) so this is pure CSS — no JS, no layout shift. */
.SinglePage__ApartmentsTable__CampaignsCell {
	display: none;
}

@media (min-width: 768px) {
	.SinglePage__ApartmentsTable__CampaignsCell {
		display: table-cell;
	}

	.SinglePage__ApartmentsTable__NumberCell .ValuCampaignBadges {
		display: none;
	}
}