/**
 * WSH Variation UI - responsive breakpoints.
 *
 * Desktop uses --wsh-vui-desktop-columns (set inline via PHP from the
 * admin setting). Tablet and mobile progressively reduce the column
 * count, finishing at --wsh-vui-mobile-columns, and cards never overflow
 * their container.
 */

@media (max-width: 1024px) {
	.wsh-vui-cards {
		grid-template-columns: repeat(
			min(var(--wsh-vui-desktop-columns, 3), 2),
			minmax(0, 1fr)
		);
	}
}

@media (max-width: 600px) {
	.wsh-vui-cards {
		grid-template-columns: repeat(var(--wsh-vui-mobile-columns, 1), minmax(0, 1fr));
	}

	.wsh-vui-card {
		padding: 14px;
	}

	.wsh-vui-pills {
		gap: 8px;
	}

	.wsh-vui-pill {
		padding: 7px 14px;
		font-size: 0.9em;
	}
}

.wsh-vui-cards,
.wsh-vui-pills {
	max-width: 100%;
	box-sizing: border-box;
}

.wsh-vui-card {
	max-width: 100%;
	box-sizing: border-box;
	word-break: break-word;
}